Этот урок посвящен отслеживанию URL-адресов и работе со стилями в Next.js. В предыдущем уроке мы рассматривали создание URL-адресов: создание папок в директории pages и размещение в них файла page.js. Название папки определяет URL-адрес, отображающий содержимое page.js. В данный момент предполагается наличие двух страниц: главной (файл page.js в корне pages) и /cline (файл page.js в папке cline).
Вложенные URL-адреса
Для создания вложенных URL-адресов, например, /cline/show, создайте вложенные папки. Создайте папку show внутри cline и поместите в неё файл page.js. Измените название функции и содержимое тега <h1> в этом файле, чтобы отображалось «Шоу страница». После запуска сервера переход по адресу /cline/show отобразит эту страницу. Вложенность URL-адресов соответствует вложенности папок.
Динамические URL-адреса
Рассмотрим динамические URL-адреса, например, /cline/[clineId], где [clineId] – динамический параметр. Внутри папки cline создайте папку [clineId] и файл page.js внутри неё. В page.js измените название функции на clineId и выведите параметр clineId в заголовок и абзац. Для доступа к параметру используйте params.clineId. Теперь переходы по адресам /cline/1, /cline/John, /cline/Bob и т.д. будут корректно отображать соответствующую страницу, выводя переданный параметр.
Стили
В Next.js можно создавать глобальные и локальные стили.
Глобальные стили
Глобальные стили размещаются, например, в файле globals.css в корне проекта или в папке styles. Рекомендуется подключать их в файле layout.js в директории App. В globals.css можно прописать общие стили, например: margin: 0; padding: 0; background-color: #333; color: #fff;.
Локальные стили
Локальные стили добавляются для отдельных URL-адресов. Например, для страницы /cline/show создайте файл style.css в папке show. В этом файле пропишите специфичные стили (например, background-color: #fff; color: #000;). Подключите style.css в layout.js соответствующей директории (cline/show). layout.js можно размещать в родительской папке для применения стилей и шаблона ко всем вложенным страницам.
Подключение стилей и шрифтов
В layout.js подключаются CSS-файлы. Для подключения шрифтов Google Fonts достаточно указать название шрифта. Например, для подключения шрифтов «Inter» и «Poppins»:
import Link from 'next/link';
// ... другой код
const poppins = {
subsets: ['latin'],
weight: ['400', '700']
};Затем в <body> используйте className={poppins.className}. (Обратите внимание, что предоставленный пример фрагмента кода не показывает, как корректно подключить шрифты Google Fonts. Необходимо использовать соответствующие CSS @import или теги <link>.)
Шаблоны страниц и компоненты
В layout.js можно добавлять код до и после вывода дочерних компонентов, создавая кастомные шаблоны страниц.
Next.js поддерживает серверные и клиентские компоненты. Серверные компоненты генерируются на сервере (полезно для SEO). Клиентские компоненты выполняются в браузере. Если используете хуки, такие как useState, компонент должен быть клиентским (добавить ‘use client’ вверху файла). При обычном выводе данных используются серверные компоненты.
Ссылки
Для создания ссылок используйте компонент Link из next/link:
<Link href="/">Главная</Link>
<Link href="/cline/12345">Клиент 12345</Link>В этом уроке мы рассмотрели отслеживание URL-адресов, работу со стилями, создание шаблонов страниц, использование серверных и клиентских компонентов, а также создание ссылок в Next.js. Мы рассмотрели статические и динамические URL-адреса, а также способы создания и подключения стилей.