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é Composants dans votre projet Next.js, créez Mise en page.jsx et ajoutez le code suivant pour créer le composant de mise en page.
importer Diriger depuis'suivant/tête'
importer Entête depuis'./En-tête.jsx'
importer Bas de page depuis'./Pied de page.jsx'
constante Disposition = (enfants) => (
Mon application</title>
"stylesheet" href="/static/css/style.css" />
</Head>
{enfants}
</div>
)
exporter disposition par défaut
< p>Ce composant importe les composants Header et Footer et
accepte les enfants comme accessoires. Il affiche 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 de la 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 Disposition de '../components/Layout'
const Page = () => (
Accueil</h1>
</Mise en page>
)
exporter default Page
Elle appliquera la mise en page sur 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 à la fois, importez le composant de mise en page dans le fichier /page/_app.js et utilisez-le comme suit.
import Layout from durée> "../components/layout" ;
fonction MonApp({ Composant, pageProps } span>) {
retour (
</Layout>
) ;
}
Les exemples présentés jusqu'à présent utilisez 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 App
Le dossier app dans Next.js 13 vous oblige à créer 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 illustrer, créez un fichier nommé layout.jsx et ajoutez le code suivant. p>
export par défaut fonction RootLayout({ enfants } span>) {
retour (
"fr">
{children}</body>
</html>< br/> );
}
Le composant de mise en page racine accepte et rend le enfants. Vous trouverez ci-dessous certaines des choses que vous devez savoir sur une mise en page 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 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 d'itinéraire ?
Dans le dossier de votre application, vous pouvez définir un itinéraire en créant des dossiers pour chaque itinéraire segment. 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é tendance dans le dossier articles correspond au chemin de l'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 route et 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 tendance, la mise en page du dossier 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érents 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.