10 частых ошибок с Next.js App Router и как их исправить

Команда Vercel, проанализировав тысячи репозиториев и пообщавшись с сотнями разработчиков, выявила десять наиболее распространённых ошибок при использовании App Router в Next.js. Если вы хотите избежать типичных проблем и ускорить разработку, этот материал для вас. Мы разберём каждую ошибку, объясни

Неправильное использование серверных и клиентских компонентов

Одна из самых частых ошибок — путаница между серверными и клиентскими компонентами. Разработчики часто помечают весь компонент как 'use client', когда достаточно вынести интерактивную часть в отдельный дочерний компонент. Серверные компоненты выполняются на сервере, что уменьшает размер клиентского JavaScript и ускоряет загрузку. Чтобы избежать ошибки, старайтесь минимизировать использование директивы 'use client' и выносите интерактивность в небольшие изолированные компоненты.

Чрезмерное использование 'use client' на страницах

Многие разработчики добавляют 'use client' в начало файла страницы, лишая себя преимуществ серверного рендеринга. Вместо этого используйте 'use client' только в тех компонентах, где действительно нужны хуки React или обработчики событий. Например, если на странице есть форма поиска и список результатов, форму можно сделать клиентским компонентом, а список — серверным.

Игнорирование параллельных маршрутов и перехватывающих маршрутов

App Router поддерживает параллельные маршруты (parallel routes) и перехватывающие маршруты (intercepting routes), которые позволяют отображать несколько страниц одновременно или перехватывать навигацию для модальных окон. Многие не используют эти возможности, хотя они упрощают создание сложных интерфейсов, таких как панели администрирования или галереи с модалками.

Отсутствие загрузочных и обработочных состояний

Загрузочные страницы (loading.js) и обработчики ошибок (error.js) — это мощные инструменты для улучшения пользовательского опыта. Разработчики часто забывают их добавить, что приводит к пустым экранам или необработанным ошибкам. Создайте базовые файлы loading.js и error.js для каждого сегмента маршрута, чтобы обеспечить плавную загрузку и корректную обработку сбоев.

Неправильное кеширование данных

App Router использует новый механизм кеширования, который может сбивать с толку. Например, по умолчанию fetch-запросы в серверных компонентах кешируются, но если вы явно укажете 'cache: no-store', данные будут запрашиваться каждый раз. Важно понимать, как работают статическое и динамическое кеширование, и выбирать стратегию в зависимости от частоты обновления данных.

Смешивание Pages Router и App Router

Хотя Next.js поддерживает одновременное использование обоих маршрутизаторов, это может привести к путанице и дублированию кода. Лучше постепенно мигрировать на App Router, начиная с новых страниц, и избегать смешивания в рамках одного проекта без чёткого плана миграции.

Неправильная работа с middleware

Middleware в App Router выполняется на границе сети и может изменять запросы до того, как они достигнут серверных компонентов. Частая ошибка — попытка использовать в middleware API, доступные только на сервере (например, чтение файлов), или наоборот — использование клиентских API. Помните, что middleware работает в среде, похожей на Edge Runtime, и имеет ограниченный набор доступных функций.

Отсутствие оптимизации изображений и шрифтов

Next.js предоставляет встроенные компоненты Image и Font для оптимизации ресурсов, но разработчики часто используют обычные теги или загружают шрифты через CSS. Это увеличивает размер страницы и ухудшает производительность. Используйте next/image для автоматической оптимизации изображений и next/font для эффективной загрузки шрифтов.

Непонимание ревалидации данных

App Router предлагает несколько способов обновления данных: incremental static regeneration (ISR), server actions и revalidatePath/revalidateTag. Ошибка в том, что разработчики не всегда правильно выбирают метод. Например, для часто обновляемых данных лучше использовать server actions с revalidatePath, а для редких обновлений — ISR с тегами.

Игнорирование TypeScript и строгих типов

Хотя это не обязательно, отказ от TypeScript или использование 'any' приводит к сложно отлаживаемым ошибкам, особенно при работе с пропсами компонентов и типами данных из API. App Router хорошо поддерживает TypeScript, и его использование значительно упрощает разработку и поддержку кода.

Как избежать этих ошибок при миграции на App Router?

Миграция с Pages Router на App Router требует внимательного подхода. Начните с создания новых страниц в App Router, постепенно перенося функциональность. Используйте параллельные маршруты для сложных макетов и не забывайте про loading.js и error.js. Оптимизируйте изображения и шрифты с помощью встроенных компонентов, а для кеширования выбирайте стратегию в зависимости от динамики данных. TypeScript поможет избежать многих ошибок на этапе компиляции.

Заключение

Понимание десяти распространённых ошибок при работе с Next.js App Router и знание способов их исправления помогут вам создавать более эффективные и производительные приложения. Следуя рекомендациям команды Vercel, вы сможете избежать типичных проблем и полностью раскрыть потенциал нового маршрутизатора. Следите за обновлениями и не бойтесь экспериментировать с новыми возможностями.