Composants et mise en page Next.js

Les composants et fonctionnalités de mise en page de Next.js offrent aux développeurs des outils puissants pour les aider à construire des applications web modulaires et maintenables.

Fonctionnalité	Description
Composants	Composants de page, composants UI et composants de fonctionnalité, utilisés pour construire diverses parties de l'application.
Layout	Mise en page globale, mise en page imbriquée, mise en page dynamique, utilisées pour définir la structure des pages et les éléments communs.
Fichiers spéciaux (version héritée)	`_app.js`、`_document.js`、`_error.js`Utilisés pour définir la mise en page globale et la structure du document.

Dans Next.js 13, le répertoire app remplace le répertoire pages traditionnel pour gérer les routes et la structure des pages. Le répertoire app introduit une mise en page plus flexible et des capacités de rendu parallèle améliorées.

Exemple de structure du répertoire app :

├── app/
│   ├── page.js           # 默认首页
│   ├── about/
│   │   ├── page.js       # About 页
│   └── layout.js         # 根布局
└── public/                # 静态文件目录

Composants

Les composants sont les éléments de base des applications Next.js. Ils peuvent être des composants de page, des composants UI ou des composants de fonctionnalité.

Dans Next.js, toutes les pages et mises en page sont essentiellement des composants React. Vous pouvez créer et utiliser des composants comme vous le feriez dans n'importe quelle application React.

Composants de page

Les composants de page sont la base du routage dans Next.js ; chaque composant de page correspond à une route.

Les composants de page sont généralement stockés dans le répertoire app ou pages.

Exemple

// pages/about.js ou app/about/page.js
export default function About() {
return <div>Page à propos</div>;
}

Composants d'interface utilisateur

Les composants d'interface utilisateur sont des éléments d'interface réutilisables, tels que des boutons, des cartes, des barres de navigation, etc.

Les composants d'interface utilisateur sont généralement stockés dans le répertoire components.

Exemple

// components/Button.js
export default function Button({ children }) {
return <button>{children}</button>;
}

Composants de fonctionnalité

Les composants de fonctionnalité sont des composants qui implémentent des fonctionnalités spécifiques, telles que la récupération de données, la gestion d'état, etc.

Les composants de fonctionnalité sont généralement stockés dans le répertoire hooks ou utils.

Exemple

// hooks/useData.js
import { useEffect, useState } from 'react';

export default function useData(url) {
const [data, setData] = useState(null);

useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((data) => setData(data));
}, [url]);

return data;
}

Exemple

Création d'un composant :Créez Hello.js dans le répertoire app/components/, avec le code suivant :

Exemple

// app/components/Hello.js
const Hello = () => {
return <h1>Hello, Next.js 13!</h1>;
};

export default Hello;

Utilisation du composant :Dans le répertoire app, les composants de page sont exportés depuis page.js, et vous pouvez utiliser des composants à l'intérieur de ceux-ci :

Exemple

// app/page.js
import Hello from './components/Hello';

export default function Home() {
return (
<div>
<Bonjour />
</div>
);
}

Layout

Les mises en page sont des composants utilisés pour définir la structure d'une page, contenant généralement des éléments communs tels que des en-têtes, des pieds de page, des barres de navigation, etc.

Mise en page globale

Les mises en page globales s'appliquent à l'ensemble de l'application et sont généralement définies dans app/layout.js ou _app.js.

Exemple

// pages/_app.js ou app/layout.js
import Header from '../components/Header';
import Footer from '../components/Footer';

export default function Layout({ children }) {
return (
<div>
<En-tête />
<main>{children}</main>
<Pied de page />
</div>
);
}

Mise en page imbriquée

Les mises en page imbriquées vous permettent de définir différentes mises en page pour différents segments de route.

Dans le répertoire app, chaque segment de route peut contenir un fichier layout.js.

app/
├── layout.js        // 根布局
├── about/
│   ├── layout.js    // /about 的布局
│   └── page.js      // /about 页面
└── dashboard/
    ├── layout.js    // /dashboard 的布局
    └── page.js      // /dashboard 页面

Exemple

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
return (
<div>
<h1>Mise en page du tableau de bord</h1>
{children}
</div>
);
}

Mise en page dynamique

Les mises en page dynamiques vous permettent de sélectionner dynamiquement une mise en page en fonction des conditions.

Exemple

// app/layout.js
export default function Layout({ children, isDashboard }) {
return (
<div>
{isDashboard ? <DashboardLayout>{children}</DashboardLayout> : <MainLayout>{children}</MainLayout>}
</div>
);
}

Fichiers spéciaux (version héritée)

Next.js fournit certains fichiers spéciaux pour définir des mises en page globales, la structure du document et les pages d'erreur.

_app.js

_app.js est le composant global dans Next.js, utilisé pour envelopper tous les composants de page.

Exemple

// pages/_app.js
import Layout from '../components/Layout';

export default function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}

_document.js

_document.js est utilisé pour personnaliser la structure du document HTML.

Exemple

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}

_error.js

_error.js est utilisé pour personnaliser les pages d'erreur

Exemple

// pages/_error.js
export default function Error({ statusCode }) {
return (
<div>
<h1>{statusCode} Error</h1>
<p>Désolé, une erreur s'est produite.</p>
</div>
);
}

Autres extensions