Comment créer une mise en page personnalisée dans Next.JS
Next.js est un cadre puissant pour créer des applications React hautes performances. 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 une conception cohérente facile à maintenir et à mettre à jour dans votre application.
Création d’un composant de mise en page personnalisé dans Next.JS
Dans le dossier nommé components de 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 accessoires. Il rend les enfants entre les composants Header et Footer. Lorsque vous enveloppez une page avec cette mise en page, l’en-tête et le pied de page seront affichés en haut et en bas.
Utilisation du composant de mise en page
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
Il appliquera la mise en page à cette page. Vous pouvez répéter ce processus sur toutes les pages auxquelles vous souhaitez appliquer la mise en page.
Pour utiliser la mise en page sur toutes les pages des applications à la fois, importez le composant de mise en page dans le fichier /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 Next.js de 12 pages. Dans Next.js 13, vous créez la mise en page dans le dossier de l’application (au moment de l’écriture, c’est en version bêta).
Création d’une mise en page personnalisée dans le dossier de l’application
Le dossier de l’application dans Next.js 13 vous oblige à créer une mise en page racine à sa base. C’est la mise en page que Next.js appliquera à toutes les pages de votre application.
Pour illustrer, 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 restitue les enfants . Vous trouverez ci-dessous certaines des choses que vous devez savoir sur une disposition racine :
- Vous devez l’inclure dans le dossier de l’application.
- Il remplace _app.js et _document.js dans le dossier de pages de Next.js 12.
- Vous devez inclure explicitement le code HTML et la balise body.
- C’est 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, la création d’un dossier appelé articles correspond au chemin d’URL app/articles . Pour ajouter d’autres segments de route, créez un sous-dossier dans le dossier de route principal. Par exemple, l’ajout d’un dossier appelé trending dans le dossier articles correspond au chemin d’URL app/articles/trending .
Lorsque vous ajoutez un composant layout.jsx à un dossier de routage, il s’appliquera à toutes les pages de ce segment de routage 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 sous-dossier tendance . Si vous ajoutez également un composant de mise en page dans le dossier des tendances , la mise en page du dossier des articles y sera imbriquée.
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 une apparence cohérente sur votre site Web sans dupliquer le code sur plusieurs pages. De plus, les mises en page vous aident à mettre en œuvre les modifications rapidement, car vous n’avez pas besoin d’apporter des modifications à chaque page.
Laisser un commentaire