Next.js und SSR: Erstellen leistungsstarker, servergerenderter Anwendungen

1. Erstellen Sie ein Projekt

Erstellen Sie ein neues Next.js-Projekt mit dem Gerüst „create-next-app“:

npx create-next-app my-app
cd my-app

2. Automatisches SSR

In Next.js wird jede Komponente einer .js- oder .jsx-Datei automatisch als SSR-Seite verarbeitet. Erstellen Sie beispielsweise eine Datei „pages/index.js“:

// pages/index.js
import React from 'react';

function Home() {
  return (
    <div>
      <h1>Welcome to Next.js with SSR!</h1>
      <p>This is rendered on the server.</p>
    </div>
  );
}

export default Home;

Führen Sie npm run dev aus, um den Entwicklungsserver zu starten, besuchen Sie http://localhost:3000 und Sie werden feststellen, dass der HTML-Code bereits den vom Server gerenderten Inhalt enthält.

3. Dynamisches Routing und Datenerfassung

Next.js unterstützt dynamisches Routing, z. B. seiten/posts/[id].js. Holen Sie sich Daten in getStaticPaths und getStaticProps oder getServerSideProps:

// pages/posts/[id].js
import { useRouter } from 'next/router';
import { getPostById } from '../lib/api'; // Custom API to obtain data

export async function getServerSideProps(context) {
  const id = context.params.id;
  const post = await getPostById(id);

  return {
    props: {
      post,
    },
  };
}

function Post({ post }) {
  const router = useRouter();
  if (!router.isFallback && !post) {
    router.push('/404');
    return null;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export default Post;

4. Statische Optimierung und Vorrendering

Next.js unterstützt auch statische Optimierung und Pre-Rendering (Static Site Generation, SSG). Konfigurieren Sie in getStaticPaths und getStaticProps:

// pages/posts/[id].js
export async function getStaticPaths() {
  // Get all possible dynamic paths
  const paths = await getPostIds();

  return {
    paths: paths.map((id) => `/posts/${id}`),
    fallback: false, // Or 'true' to return 404 for non-prerendered paths
  };
}

export async function getStaticProps(context) {
  const id = context.params.id;
  const post = await getPostById(id);

  return {
    props: {
      post,
    },
  };
}

6. Dynamischer Import und Codeaufteilung

Next.js unterstützt den dynamischen Import, der das Laden von Code bei Bedarf erleichtert und die anfängliche Ladezeit verkürzt:

// pages/index.js
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/Dynamic'), {
  ssr: false, // Avoid rendering on the server
});

function Home() {
  return (
    <div>
      <h1>Welcome to Next.js with SSR!</h1>
      <DynamicComponent />
    </div>
  );
}

export default Home;

7. Optimieren Sie Bilder und Ressourcen

Verwenden Sie die next/image-Komponente, um das Laden von Bildern, die automatische Komprimierung und Größenänderung zu optimieren:

// pages/index.js
import Image from 'next/image';

function Home() {
  return (
    <div>
      <h1>Welcome to Next.js with SSR!</h1>
      <Image src="/example.jpg" alt="Example Image" width={500} height={300} />
    </div>
  );
}

export default Home;

8. Benutzerdefinierte Server

Wenn Sie eine detailliertere Kontrolle benötigen, können Sie einen benutzerdefinierten Server erstellen:

// server.js
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true);
    const { pathname } = parsedUrl;

    if (pathname === '/api') {
      // Custom API route handling
      // ...
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

9. Integrieren Sie Bibliotheken und Frameworks von Drittanbietern

Next.js ermöglicht Ihnen die einfache Integration von Bibliotheken und Frameworks von Drittanbietern wie Redux, MobX, Apollo usw.:

// pages/_app.js
import React from 'react';
import App from 'next/app';
import { Provider } from 'react-redux';
import store from '../store';

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

10. Optimieren Sie SEO

Die SSR-Funktion von Next.js ist SEO-freundlich, Sie können sie aber auch durch Meta-Tags optimieren:

// pages/index.js
import Head from 'next/head';

function Home() {
  return (
    <>
      <Head>
        <title>My Next.js App</title>
        <meta name="description" content="This is an example of using Next.js with SEO." />
      </Head>
      <h1>Welcome to Next.js with SEO!</h1>
    </>
  );
}

export default Home;

11. Internationalisierung (i18n)

Next.js 10 führt integrierte i18n-Unterstützung ein und erleichtert so die Implementierung mehrsprachiger Websites:

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
  },
};

12. Serverloser Modus

Next.js unterstützt den serverlosen Modus, der auf Vercel standardmäßig aktiviert ist. In diesem Modus wird Ihre Anwendung bei Bedarf ausgeführt, wodurch Ressourcenkosten gespart werden.

13. Web-Worker

Verwenden Sie Web Worker in Next.js, um intensive Rechenaufgaben zu bewältigen und eine Blockierung des Hauptthreads zu vermeiden:

// components/Worker.js
import { useEffect } from 'react';
import { createWorker } from 'workerize-loader!./my-worker.js'; // Use workerize-loader to load worker files

function MyComponent() {
  const worker = createWorker();

  useEffect(() => {
    const result = worker.calculate(100000); // Calling worker methods
    result.then(console.log);
    return () => worker.terminate(); // Cleaning up workers
  }, []);

  return <div>Loading...</div>;
}

export default MyComponent;

14. TypeScript-Integration

Next.js unterstützt TypeScript und fügt Ihrem Projekt Typsicherheit hinzu:

Typescript und @types/react installieren.

Erstellen Sie eine tsconfig.json-Konfigurationsdatei.

Ändern Sie next.config.js, um TypeScript-Unterstützung zu aktivieren.

15. Benutzerdefinierte Fehlerseiten

Erstellen Sie benutzerdefinierte Fehlerseiten für „pages/_error.js“:

npx create-next-app my-app
cd my-app

16. Bereitstellung in Vercel

Next.js ist perfekt in Vercel integriert. Sie können es in nur wenigen einfachen Schritten bereitstellen:

Erstellen Sie ein Konto oder melden Sie sich auf der Vercel-Website an.

Autorisieren Sie Vercel, auf Ihr GitHub- oder GitLab-Repository zuzugreifen.

Wählen Sie das bereitzustellende Projekt aus und Vercel erkennt automatisch die Next.js-Konfiguration.

Legen Sie den Projektdomänennamen und die Umgebungsvariablen fest (falls erforderlich).

Klicken Sie auf die Schaltfläche „Bereitstellen“, und Vercel erstellt und stellt die Anwendung automatisch bereit.

17. Leistungsüberwachung und -optimierung

Verwenden Sie zur Leistungsbewertung das integrierte Lighthouse-Plugin von Next.js oder Tools von Drittanbietern wie Google PageSpeed ​​​​Insights. Optimieren Sie Code, Bilder und andere Ressourcen basierend auf dem Bericht, um die Ladegeschwindigkeit und das Benutzererlebnis zu verbessern.

Das obige ist der detaillierte Inhalt vonNext.js und SSR: Erstellen leistungsstarker, servergerenderter Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!