Description du projet Next.js

Un projet Next.js se compose de plusieurs fichiers et dossiers, chacun ayant sa fonction spécifique.

Ce qui suit est une explication de base du code du projet Next.js pour vous aider à comprendre la structure du projet et la fonction de chaque partie.

À partir de Next.js 13, Next.js a introduit l'App Router basé sur le système de fichiers (répertoire app), remplaçant le répertoire pages traditionnel. Le nouveau répertoire app offre des fonctionnalités plus puissantes telles que le routage imbriqué, les mises en page, les composants serveur, et plus encore.

Structure du projet

Un projet Next.js utilisant le répertoire app contient généralement les fichiers et dossiers suivants :

my-next-app/
├── node_modules/       # 项目依赖的第三方库
├── public/             # 静态资源文件夹
│   ├── favicon.ico     # 网站图标
│   └── ...             # 其他静态资源（如图片、字体等）
├── app/                # 应用路由目录（核心）
│   ├── layout.js       # 根布局组件
│   ├── page.js         # 首页组件
│   ├── about/          # 关于页面
│   │   └── page.js     # 关于页面组件
│   ├── blog/           # 博客页面
│   │   ├── page.js     # 博客列表页
│   │   └── [slug]/     # 动态路由
│   │       └── page.js # 博客详情页
│   └── ...             # 其他页面和路由
├── components/         # 可复用的 React 组件
├── styles/             # 样式文件
├── utils/              # 工具函数
├── package.json        # 项目配置和依赖管理
├── package-lock.json   # 依赖的精确版本锁定文件
├── next.config.js      # Next.js 配置文件
└── README.md           # 项目说明文档

Explication des fichiers principaux

app/layout.js

app/layout.jsIl s'agit du fichier de mise en page racine, utilisé pour définir la structure de mise en page de toute l'application.

app/layout.jsIl englobe toutes les pages et peut inclure des styles globaux, des métadonnées, etc.

Exemple

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

app/page.js

app/page.jsC'est le fichier de la page d'accueil, correspondant à la route /./。

Exemple

export default function Home() {
  return (
    <div>
      <h1>Bienvenue sur Next.js 13!</h1>
    </div>
  );
}

app/about/page.js

app/about/page.jsC'est le fichier de la page à propos, correspondant à la route /about.

Exemple

export default function About() {
  return (
    <div>
      <h1>À propos</h1>
      <p>Ceci est la page à propos.</p>
    </div>
  );
}

app/blog/[slug]/page.js

app/blog/[slug]/page.jsC'est le fichier de route dynamique, utilisé pour gérer des routes telles que/blog/:slugroutes.

Exemple

export default function BlogPost({ params }) {
  return (
    <div>
      <h1>Article de blog: {params.slug}</h1>
    </div>
  );
}

app/loading.js

app/loading.jsC'est le fichier d'état de chargement, utilisé pour afficher l'état de chargement pendant le chargement d'une page.

Exemple

export default function Loading() {
  return <p>Loading...</p>;
}

app/error.js

app/error.jsC'est le fichier de page d'erreur, utilisé pour capturer et afficher les erreurs.

Exemple

'use client'; // Marquer comme composant client

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Une erreur est survenue!</h2>
      <button onClick={() => reset()}>Réessayer</button>
    </div>
  );
}

app/not-found.js

app/not-found.jsC'est le fichier de page 404, utilisé pour afficher la page introuvable.

Exemple

export default function NotFound() {
  return (
    <div>
      <h2>Page introuvable</h2>
    </div>
  );
}

Explication des nouvelles fonctionnalités

1. Composants serveur

Next.js 13 utilise les composants serveur par défaut, ce qui réduit la quantité de JavaScript côté client chargée.

Les composants serveur peuvent accéder directement aux données backend sans qu'il soit nécessaire d'effectuer des appels API supplémentaires.

Exemple

async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <div>{data.message}</div>;
}

2. Composants client

Si vous avez besoin d'utiliser l'état React ou les API du navigateur, vous pouvez marquer le composant comme un composant client.

Utilisez'use client'comme directive.

Exemple

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Compteur: {count}</p>
      <button onClick={() => setCount(count + 1)}>Bouton</Incrémenter>
    </div>
  );
}

3. Layouts imbriqués

Vous pouvez créer des layouts imbriqués dans le répertoire app, et chaque sous-répertoire peut avoir son propre fichier layout.

Par exemple :

app/dashboard/layout.jsC'est le layout de la page dashboard.

app/dashboard/page.jsC'est le contenu de la page dashboard.

4. Streaming

Next.js 13 prend en charge le rendu en streaming, ce qui permet de rendre le contenu progressivement pendant le chargement de la page.

Exemple

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <Suspense fallback={<p>Chargement...</p>}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

Exécution du projet

  1. Démarrer le serveur de développement：

    • Exécuteznpm run devouyarn devpour démarrer le serveur de développement.

    • Ouvrez un navigateur et visitezhttp://localhost:3000pour voir l'application.

  2. Compiler le code de production：

    • Exécuteznpm run buildouyarn buildpour générer du code de production optimisé.

  3. Démarrer le serveur de production：

    • Exécuteznpm run startouyarn startpour démarrer le serveur de production.

Autres extensions