Next.js est un framework puissant permettant de créer des applications React très performantes. L’une de ses fonctionnalités est la possibilité de créer des mises en page personnalisées pour vos pages, ce qui vous permet de créer un design cohérent, facile à maintenir et à mettre à jour dans toute votre application.
Création d’un composant de mise en page personnalisé dans Next.JS
Dans le dossier nommé composants Dans votre projet Next.js, créez Layout.jsx et ajoutez le code suivant pour créer le composant de mise en page.
import Head from 'next/head'
import Header from './Header.jsx'
import Footer from './Footer.jsx'
const Layout = (children) => (
<div>
<Head>
<title>My App</title>
<link rel="stylesheet" href="/static/css/style.css" />
</Head>
<Header />
{children}
<Footer />
</div>
)
export default Layout
Ce composant importe les composants Header et Footer et accepte les enfants comme props. Il rend les composants enfants entre les composants En-tête et Pied de page. Lorsque vous enveloppez une page avec cette mise en page, l’en-tête et le pied de page s’affichent en haut et en bas.
Utilisation du composant Layout
Pour utiliser le composant de mise en page, importez-le dans un composant de page et utilisez-le comme indiqué ci-dessous.
import Layout from '../components/Layout'
const Page = () => (
<Layout>
<h1>Home</h1>
</Layout>
)
export default Page
La mise en page sera appliquée à cette page. Vous pouvez répéter ce processus pour toutes les pages auxquelles vous souhaitez appliquer la mise en page.
Pour utiliser la mise en page sur toutes les pages des applications en une seule fois, importez le composant de mise en page dans le dossier de l’application /page/_app.js et utilisez-le comme suit.
import Layout from "../components/layout";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
Les exemples présentés jusqu’à présent utilisent les dossiers de pages de Next.js 12. Dans Next.js 13, vous créez la mise en page dans le dossier app (à l’heure où nous écrivons ces lignes, il s’agit d’une version bêta).
Création d’une mise en page personnalisée dans le dossier App
Le dossier App de Next.js 13 nécessite la création d’une mise en page racine à sa base. Il s’agit de la mise en page que Next.js appliquera à toutes les pages de votre application.
Pour démontrer, créez un fichier nommé layout.jsx et ajoutez le code suivant.
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Le composant de mise en page racine accepte et rend l’élément enfants. Voici quelques-unes des choses que vous devez savoir sur la mise en page d’une racine :
- Vous devez l’inclure dans le dossier de l’application.
- Il remplace _app.js et _document.js dans le dossier des pages de Next.js 12.
- Vous devez inclure explicitement la balise HTML et body.
- Il s’agit d’un composant serveur par défaut.
Comme mentionné, la mise en page racine s’applique à toutes les pages, alors comment créer des mises en page personnalisées pour différents segments de route ?
Dans votre dossier d’application, vous pouvez définir un itinéraire en créant des dossiers pour chaque segment d’itinéraire. Par exemple, en créant un dossier appelé articles correspond au chemin URL app/articles. Pour ajouter d’autres segments d’itinéraire, créez un sous-dossier dans le dossier principal de l’itinéraire. Par exemple, en ajoutant un dossier appelé tendance à l’intérieur de la articles correspond au chemin URL app/articles/trending.
Lorsque vous ajoutez un layout.jsx à un dossier d’itinéraire, il s’appliquera à toutes les pages de ce segment d’itinéraire et de ses sous-dossiers. Par exemple, l’ajout d’un composant de mise en page au dossier articles s’appliquera à toutes les pages de la route des articles, y compris celles du dossier tendances sous-dossier. Si vous ajoutez également un composant de mise en page dans le sous-dossier tendance la mise en page du dossier articles sera imbriquée dans celui-ci.
Avantages de l’utilisation des mises en page
Next.js vous permet de créer des composants de mise en page que vous pouvez réutiliser sur différentes pages. Cela vous permet d’avoir un aspect cohérent sur votre site Web sans dupliquer le code sur plusieurs pages. En outre, les mises en page vous aident à mettre en œuvre des changements rapidement, car vous n’avez pas besoin d’apporter des modifications à chaque page.
