Enrutador de páginas: Componente Layout

Primero, vamos a crear un componente Layout que será compartido entre todas las páginas.

Crea un directorio en el nivel superior llamado components.
Dentro de components, crea un archivo llamado layout.js con el siguiente contenido:

export default function Layout({ children }) {
  return <div>{children}</div>;
}

Luego, abre pages/posts/first-post.js, agrega una importación para el componente Layout y haz que sea el componente más externo:

import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/layout';
 
export default function FirstPost() {
  return (
    <Layout>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </Layout>
  );
}

Agregando CSS

Ahora, agreguemos algunos estilos al componente Layout. Para hacerlo, usaremos Módulos CSS, que permiten importar archivos CSS en un componente React.

Crea un archivo llamado components/layout.module.css con el siguiente contenido:

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

Importante: Para usar Módulos CSS, el nombre del archivo CSS debe terminar con .module.css.

Para usar esta clase container dentro de components/layout.js, necesitas:

Importar el archivo CSS y asignarle un nombre, como styles
Usar styles.container como el className

Abre components/layout.js y reemplaza su contenido con lo siguiente:

import styles from './layout.module.css';
 
export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

Si ahora vas a http://localhost:3000/posts/first-post, deberías ver que el texto ahora está dentro de un contenedor centrado:

Layout

Genera automáticamente nombres de clase únicos

Si ahora revisas el HTML en las herramientas de desarrollo de tu navegador, notarás que el div renderizado por el componente Layout tiene un nombre de clase que luce como layout_container__...:

Devtools

Esto es lo que hacen los Módulos CSS: Generan automáticamente nombres de clase únicos. Mientras uses Módulos CSS, no tendrás que preocuparte por colisiones de nombres de clase.

Además, la función de división de código (code splitting) de Next.js también funciona con los Módulos CSS. Esto garantiza que se cargue la cantidad mínima de CSS para cada página, lo que resulta en tamaños de paquete más pequeños.

Los Módulos CSS se extraen de los paquetes JavaScript durante el proceso de compilación y generan archivos .css que Next.js carga automáticamente.

Componente Layout

Agregando CSS

Genera automáticamente nombres de clase únicos

On this page