Estilos globales

Los Módulos CSS son útiles para estilos a nivel de componente. Pero si deseas que cierto CSS se cargue en todas las páginas, Next.js también tiene soporte para eso.

Para cargar CSS global en tu aplicación, crea un archivo llamado pages/_app.js con el siguiente contenido:

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

La exportación por defecto de _app.js es un componente React de nivel superior que envuelve todas las páginas de tu aplicación. Puedes usar este componente para mantener el estado al navegar entre páginas, o para agregar estilos globales como haremos aquí. Aprende más sobre el archivo _app.js.

Reiniciar el servidor de desarrollo

Importante: Debes reiniciar el servidor de desarrollo cuando agregues pages/_app.js. Presiona Ctrl + c para detener el servidor y ejecuta:

npm run dev

Agregar CSS global

En Next.js, puedes agregar archivos de CSS global importándolos desde pages/_app.js. No puedes importar CSS global en ningún otro lugar.

La razón por la que el CSS global no se puede importar fuera de pages/_app.js es que afecta a todos los elementos de la página.

Si navegaras desde la página de inicio a /posts/first-post, los estilos globales de la página de inicio afectarían /posts/first-post de manera no intencional.

Puedes colocar el archivo CSS global en cualquier lugar y usar cualquier nombre. Hagamos lo siguiente:

• Crea un directorio styles en el nivel superior y un archivo global.css.
• Agrega el siguiente CSS dentro de styles/global.css. Este código restablece algunos estilos y cambia el color de la etiqueta 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;
}

Finalmente, importa el archivo CSS dentro del archivo pages/_app.js que creaste anteriormente:

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

Ahora, si accedes a http://localhost:3000/posts/first-post, verás que los estilos se aplican. Cualquier estilo importado en _app.js se aplicará globalmente, a todas las páginas de la aplicación.

Si no funcionó: Asegúrate de reiniciar el servidor de desarrollo cuando actualices pages/_app.js.