Роутер страниц: компонент Layout

Сначала создадим компонент Layout, который будет общим для всех страниц.

Создайте корневую директорию с именем components.
Внутри components создайте файл layout.js со следующим содержимым:

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

Затем откройте pages/posts/first-post.js, добавьте импорт компонента Layout и сделайте его самым внешним компонентом:

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

Добавление CSS

Теперь добавим стили для компонента Layout. Для этого воспользуемся CSS Modules, которые позволяют импортировать CSS-файлы в React-компоненты.

Создайте файл components/layout.module.css со следующим содержимым:

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

Важно: Для использования CSS Modules имя CSS-файла должно заканчиваться на .module.css.

Чтобы использовать класс container внутри components/layout.js, необходимо:

Импортировать CSS-файл и присвоить ему имя, например styles
Использовать styles.container в качестве className

Откройте components/layout.js и замените его содержимое следующим:

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

Если вы перейдёте по адресу http://localhost:3000/posts/first-post, то увидите, что текст теперь находится внутри центрированного контейнера:

Layout

Автоматическая генерация уникальных имён классов

Если вы посмотрите на HTML в инструментах разработчика браузера, то заметите, что div, отрендеренный компонентом Layout, имеет имя класса вида layout_container__...:

Devtools

Это особенность CSS Modules: они автоматически генерируют уникальные имена классов. Пока вы используете CSS Modules, вам не нужно беспокоиться о конфликтах имён классов.

Кроме того, функция code splitting в Next.js также работает с CSS Modules. Она гарантирует, что для каждой страницы загружается минимально необходимое количество CSS. Это приводит к уменьшению размера бандлов.

CSS Modules извлекаются из JavaScript-бандлов во время сборки и генерируют .css файлы, которые автоматически загружаются Next.js.

Компонент Layout

Добавление CSS

Автоматическая генерация уникальных имён классов

On this page