Next.js - Support CSS global

Dans Next.js, créons des styles globaux qui seront appliqués sur toutes les pages.

Dans cet exemple, nous allons créer un style.css qui sera utilisé sur tous les composants en utilisant le composant _app.js.

Mettons à jour le projet nextjs utilisé dans le chapitre Support CSS .

Créez d'abord un répertoire de styles au niveau racine et ajoutez un fichier styles.css comme suit -

html,
body {
   padding: 0;
   margin: 0;
   line-height: 1.6;
   font-size: 18px;
   background-color: lime;
}

* {
   box-sizing: border-box;
}

a {
   color: #0070f3;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

img {
   max-width: 100%;
   display: block;
}

Créer le fichier _app.js dans le répertoire des pages

import '../styles/styles.css'

export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />
}

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 dans un navigateur et vous verrez la sortie suivante.

Cliquez sur le lien Premier message.