Styles globaux

Les Modules CSS sont utiles pour les styles au niveau des composants. Mais si vous souhaitez que certains CSS soient chargés par chaque page, Next.js prend également cela en charge.

Pour charger des styles CSS globaux dans votre application, créez un fichier appelé pages/_app.js avec le contenu suivant :

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

L'export par défaut de _app.js est un composant React de haut niveau qui englobe toutes les pages de votre application. Vous pouvez utiliser ce composant pour conserver l'état lors de la navigation entre les pages, ou pour ajouter des styles globaux comme nous le faisons ici. En savoir plus sur le fichier _app.js.

Redémarrer le serveur de développement

Important : Vous devez redémarrer le serveur de développement lorsque vous ajoutez pages/_app.js. Appuyez sur Ctrl + c pour arrêter le serveur et exécutez :

npm run dev

Ajouter des CSS globaux

Dans Next.js, vous pouvez ajouter des fichiers CSS globaux en les important depuis pages/_app.js. Vous ne pouvez pas importer de CSS globaux ailleurs.

La raison pour laquelle les CSS globaux ne peuvent pas être importés en dehors de pages/_app.js est qu'ils affectent tous les éléments de la page.

Si vous naviguez de la page d'accueil vers la page /posts/first-post, les styles globaux de la page d'accueil affecteraient involontairement /posts/first-post.

Vous pouvez placer le fichier CSS global n'importe où et lui donner n'importe quel nom. Procédons donc comme suit :

• Créez un répertoire styles de premier niveau et un fichier global.css.
• Ajoutez le CSS suivant dans styles/global.css. Ce code réinitialise certains styles et change la couleur de la balise a :

html,
body {
  padding: 0;
  margin: 0;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
  line-height: 1.6;
  font-size: 18px;
}
 
* {
  box-sizing: border-box;
}
 
a {
  color: #0070f3;
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
 
img {
  max-width: 100%;
  display: block;
}

Enfin, importez le fichier CSS dans le fichier pages/_app.js que vous avez créé précédemment :

// `pages/_app.js`
import '../styles/global.css';
 
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Maintenant, si vous accédez à http://localhost:3000/posts/first-post, vous verrez que les styles sont appliqués. Tous les styles importés dans _app.js seront appliqués globalement, à toutes les pages de l'application.

Si cela ne fonctionne pas : Assurez-vous de redémarrer le serveur de développement lorsque vous mettez à jour pages/_app.js.