Next.js et SSR : création d'applications hautes performances rendues par un serveur

1. Créez un projet

Créez un nouveau projet Next.js avec l'échafaudage create-next-app :

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

2. RSS automatique

Dans Next.js, chaque composant d'un fichier .js ou .jsx sera automatiquement traité comme une page SSR. Par exemple, créez un fichier 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;

Exécutez npm run dev pour démarrer le serveur de développement, visitez http://localhost:3000 et vous constaterez que le code HTML contient déjà le contenu rendu par le serveur.

3. Routage dynamique et acquisition de données

Next.js prend en charge le routage dynamique, tel que pages/posts/[id].js. Obtenez des données dans getStaticPaths et getStaticProps ou 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. Optimisation statique et pré-rendu

Next.js prend également en charge l'optimisation statique et le pré-rendu (Static Site Generation, SSG). Configurer dans getStaticPaths et 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. Importation dynamique et fractionnement du code

Next.js prend en charge l'importation dynamique, ce qui permet de charger du code à la demande et de réduire le temps de chargement initial :

// 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. Optimiser les images et les ressources

Utilisez le composant next/image pour optimiser le chargement de l'image, la compression et le redimensionnement automatiques :

// 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. Serveurs personnalisés

Si vous avez besoin d'un contrôle plus précis, vous pouvez créer un serveur personnalisé :

// 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. Intégrer des bibliothèques et des frameworks tiers

Next.js vous permet d'intégrer facilement des bibliothèques et des frameworks tiers, tels que Redux, MobX, Apollo, etc. :

// 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. Optimiser le référencement

La fonctionnalité SSR de Next.js est optimisée pour le référencement, mais vous pouvez également l'optimiser via des balises méta :

// 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. Internationalisation (i18n)

Next.js 10 introduit la prise en charge intégrée d'i18n, facilitant la mise en œuvre de sites Web multilingues :

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

12. Mode sans serveur

Next.js prend en charge le mode sans serveur, qui est activé par défaut sur Vercel. Dans ce mode, votre application s'exécutera à la demande, ce qui permettra d'économiser les coûts des ressources.

13. Travailleurs du Web

Utilisez Web Workers dans Next.js pour gérer des tâches informatiques intensives afin d'éviter de bloquer le thread principal :

// 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. Intégration de TypeScript

Next.js prend en charge TypeScript, ajoutant la sécurité des types à votre projet :

Installez TypeScript et @types/react.

Créez un fichier de configuration tsconfig.json.

Modifiez next.config.js pour activer la prise en charge de TypeScript.

15. Pages d'erreur personnalisées

Créer des pages d'erreur personnalisées pages/_error.js :

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

16. Déployer sur Vercel

Next.js est parfaitement intégré à Vercel. Vous pouvez le déployer en quelques étapes simples :

Créez un compte ou connectez-vous sur le site Vercel.

Autorisez Vercel à accéder à votre référentiel GitHub ou GitLab.

Sélectionnez le projet à déployer et Vercel détectera automatiquement la configuration Next.js.

Définissez le nom de domaine du projet et les variables d'environnement (si nécessaire).

Cliquez sur le bouton "Déployer" et Vercel créera et déploiera automatiquement l'application.

17. Suivi et optimisation des performances

Utilisez le plugin Lighthouse intégré de Next.js ou des outils tiers tels que Google PageSpeed ​​​​Insights pour l'évaluation des performances. Optimisez le code, les images et d'autres ressources en fonction du rapport pour améliorer la vitesse de chargement et l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!