Next.js: compatibilidad con CSS global

En Next.js, creemos estilos globales que se aplicarán en todas las páginas.

En este ejemplo, crearemos un styles.css que se utilizará en todos los componentes que utilizan el componente _app.js.

Actualicemos el proyecto nextjs utilizado en el capítulo de soporte de CSS .

Primero cree un directorio de estilos en el nivel raíz y agregue un archivo styles.css de la siguiente manera:

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;
}

Cree el archivo _app.js en el directorio de páginas

import '../styles/styles.css'

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

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

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

Verificar salida

Abra localhost: 3000 en un navegador y verá el siguiente resultado.

Haga clic en el enlace Primera publicación.