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

Это поэтапный подход: вы можете использовать маршрутизатор страниц и маршрутизатор приложений одновременно.

Зачем переходить на маршрутизатор приложений Next.js?

App Router имеет ряд преимуществ:

• Улучшенная маршрутизация: более чистая маршрутизация на основе файловой системы.
• Усовершенствования рендеринга на стороне сервера (SSR): более эффективная обработка данных на стороне сервера.
• Обработка метаданных: упрощенное управление SEO.
• Улучшение производительности: встроенная оптимизация различных компонентов.

Выполнив миграцию, вы сможете подготовить свое приложение к будущему и использовать преимущества новейших функций Next.js.

Действия по переходу на App Router

• Обновить зависимости

Первый шаг — убедиться, что ваш Next.js и связанные с ним зависимости обновлены. Выполните следующие команды, чтобы установить последние версии Next.js и React:

npm install next@latest react@latest react-dom@latest
npm install -D eslint-config-next@latest

• Структурирование папки приложения

Маршрутизатор приложений использует новый каталог приложений для управления маршрутами, метаданными и макетами. Вот как это структурировать:

Папка приложения: переместите свои страницы в папку приложения. У каждого маршрута теперь есть отдельная папка, содержащая файл page.tsx.

Макеты: добавьте файл layout.tsx, чтобы определить макеты для определенных разделов вашего приложения. Это особенно полезно для обработки общих компонентов, таких как панели навигации или нижние колонтитулы.

• Изменения маршрутизатора

Одним из наиболее значительных изменений является замена next/router на next/navigation для функций маршрутизации и навигации.

Замените все импорты next/router на next/navigation.
Обновите такие функции, как useRouter, новыми эквивалентами, такими как usePathname, useSearchParams и useRouter(), где это необходимо.

• Рефакторинг серверного кода

getServerSideProps и getStaticProps устарели в App Router.
Используйте асинхронные серверные компоненты или действия сервера для получения данных на серверных страницах.

export async function getData() {
  const res = await fetch('https://getData.com/data');
  return res.json();
}

• Обработка клиентских компонентов

Клиентские компоненты:
Любой компонент, который использует перехватчики React, API браузера или взаимодействие с пользователем, должен быть помечен как «использовать клиент». Это указывает Next.js отображать их на стороне клиента.

Компоненты сервера:
Любой компонент, не требующий взаимодействия с браузером, может оставаться серверным компонентом. Они более эффективны, поскольку позволяют избежать отправки ненужного JavaScript клиенту.

• Обработка внешних библиотек

Если вы используете внешние библиотеки, такие как React Query, AntDesign или Framer и т. д., вам необходимо обновить их и внести изменения по мере необходимости. Невозможно включить все изменения в этот блог. Хотя изменения упоминаются в их документации.

Распространенные проблемы во время миграции

• Обработка событий маршрутизатора:

При переходе от next/router к next/navigation обработка событий маршрутизатора может потребовать другого подхода.
Обязательно обновите все прослушиватели событий маршрутизатора или перехватчики соответствующим образом.

• Проблемы со сдвигом макета:

При переносе страниц со сложным макетом (особенно с анимацией) вы можете заметить изменения макета. Добавьте заполнитель или сохраните правильное выравнивание на стороне сервера, чтобы предотвратить сдвиги макета.

• Обновления компонентов изображений и ссылок:

App Router вносит изменения в компоненты изображения и ссылки.
Используйте кодовые моды для автоматического обновления компонентов.
Для компонента изображения удалите устаревшие атрибуты, такие как адаптивность.

• Анимация

Компоненты, связанные с анимацией, такие как Framer, Swiper и файлы лути, должны храниться на стороне клиента.

Заключение

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

Дайте мне знать, если у вас есть какие-либо вопросы или советы по вашей собственной миграции!