Как устроен Next.js: разбираем ключевые особенности фреймворка на примере небольшого pet-проекта13.12.2024 11:15

На майской конференции React Conf 2024 команда React не только презентовала версию библиотеки React 19, но и рекомендовала использовать для старта новых JavaScript-проектов один из четырех фреймворков: Next.js, Remix, RedwoodJs или Expo. Позже аналогичная рекомендация появилась в официальной документации по React. Из этих фреймворков Next.js может похвастаться самым большим комьюнити, документацией и удобством. Если вы до сих пор его не освоили, то мы идем к вам!

Привет, Хабр! В этой статье расскажем, что такое Next.js, и покажем вам на примере небольшого pet-проекта его базовые возможности.

Определение

Next.js — это фреймворк на базе React для создания fullstack-приложений. Фреймворк хоть и молодой (2016), но развивается стремительно. Next.js активно применяют и поддерживают крупные компании вроде Google, Netflix, Uber и TikTok, а его создатель Vercel предлагает удобную инфраструктуру для деплоя приложений. Фреймворк решает многие типичные задачи, с которыми сталкиваются разработчики при создании приложений на React, и позволяет сосредоточиться на бизнес-логике.

Ключевые особенности Next.js

1. Маршрутизация на основе файловой системы.

2. Клиентский (CSR) и серверный рендеринг (SSR, SSG, ISR) с использованием клиентских и серверных компонентов.

3. Автоматическая оптимизация шрифтов и изображений.

4. Расширенный fetch c поддержкой кэширования.

5. Эффективная SEO-оптимизация.

6. Поддержка предпочитаемых методов стилизации, включая модули CSS, Tailwind CSS и CSS-in-JS.

7. Собственный сборщик Turbopack, написанный на языке Rust специально под Next.js.

Некоторые из этих пунктов разберем подробнее на примере простенького pet-проекта из четырех страниц:

Старт

Чтобы начать работать с Next.js, откройте в терминале папку, в которой будет находиться ваш проект, и запустите команду npx create-next-app@latest — она установит последнюю версию фреймворка и инициализирует новый проект. Подробнее об установке можно прочитать здесь.

Работу можно вести в любой привычной вам IDE. Наш pet-проект был реализован в интегрированной среде разработки WebStorm.

Маршрутизация

Начиная с 13-й версии, когда был представлен новый App Router, вся маршрутизация в Next.js строится на основе файловой системы каталога app. До 13-й версии использовался каталог pages.

Работать с папкой app легко: нужно просто добавить файл, и маршрут построится автоматически. Вложенные папки внутри app определяют навигацию, следуя от корневой папки до финальной.

Также Next.js предоставляет набор специальных файлов для создания пользовательского интерфейса с определенным поведением.

Некоторые из них:

• page — пользовательский интерфейс маршрута;

• layout — общий пользовательский интерфейс для сегмента и его дочерних элементов;

• loading — загрузка пользовательского интерфейса для сегмента и его дочерних элементов;

• error — пользовательский интерфейс ошибок для сегмента и его дочерних элементов;

• middleware — промежуточное ПО, которое позволяет выполнять определенные действия до того, как пользователь увидит страницу.

В нашем примере: корневой каталог app с подкаталогами about, gallery, posts. Когда в этих подкаталогах есть файл с названием page, мы можем увидеть публичный маршрут, перейдя по этому адресу:

А вот как выглядит корневой файл layout, который оборачивает все приложение, начиная с уровня app, и без которого работа приложения невозможна:

Отметим, что в Next.js также можно подключить дополнительные файлы layout, создав их на уровне любого маршрута. Мы сделали один на уровне about, чтобы поменять на этой странице цвет фона и шрифты:

Результат:

Шрифты, изображения и ссылки

Next автоматически оптимизирует все шрифты, включая пользовательские. Мы можем использовать любой локальный шрифт или шрифт Google Fonts без отправок запросов в Google.

Чтобы подключить шрифт на уровне корневого или дополнительного layout, достаточно импортировать его из Next.js, задать необходимые параметры, такие как толщина и степень наклонности, и передать шрифт как className.

Компонент Image в Next.js расширяет стандартный тег . Его плюсы:

• оптимизация размера через параметр sizes, при использовании которого Next.js формирует набор картинок под разные экраны и затем автоматически выбирает нужный;

• предотвращение смещения макета при загрузке изображений;

• ускоренная загрузка страниц за счет того, что изображения загружаются, только когда они попадают в область просмотра;

• возможность настройки форматов изображений.

Если картинка подгружается с внешнего источника, то обязательно передать ее ширину и высоту:

А также прописать в nextConfig параметры protocol и hostname:

Компонент Link Next.js расширяет стандартный тег , обеспечивая навигацию между страницами на стороне клиента. Является рекомендуемым и основным способом навигации в Next.js.

export async function GET() {
  const res = await fetch('https://data.mongodb-api.com/...')
  const data = await res.json()

  return Response.json(data)
}