Next.js: compatibilidad con CSS

En Next.js, podemos usar la biblioteca inbuild css-in-js llamada styled-jsx. Permite escribir CSS dentro de un componente de reacción y estos estilos se aplicarán al componente.

En este ejemplo, crearemos un objeto Container que se utilizará para diseñar otros componentes al contenerlos.

La actualización de dejar que el nextjs proyecto utilizó en Meta Data capítulo.

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

.container {
   max-width: 36rem;
   padding: 0 1rem;
   margin: 3rem auto 6rem;
   border: 1px solid red;  
}

Cree el archivo container.js en el directorio de componentes

import styles from './container.module.css'

function Container({ children }) {
   return <div className={styles.container}>{children}</div>
}

export default Container

Ahora use el componente Container en first.js.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost() {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
            </h2>
         </Container>
      </>	  
   )
}

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 vaya a la primera publicación, verá el siguiente resultado.

↰ Previous page Next page ↱