Наше путешествие по миграции образца SDK Logto в Next.js 13 App Router

Введение#

В Logto мы предлагаем SDK Next.js с названием @logto/next, сопровождаемый образцом проекта. Этот проект эффективно демонстрирует, как интегрировать Logto с Next.js с использованием традиционной папки "страницы", предлагая примеры маршрутов API, getServerSideProps, Client-side Fetching и даже edge runtime.

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

В этом посте мы пройдем вас через детали миграции нашего старого образца проекта на новый с использованием App Router. Проект был построен на основе старого образца проекта и следовал официальному путеводителю по миграции guide. Процесс включал в себя несколько этапов: создание страниц и макетов, миграцию API-маршрутов и использование серверных и клиентских компонентов.

Процесс миграции#

Макет страницы: Новая структура#

В нашей исходной конфигурации мы использовали файл _app.tsx для настройки SWR fetcher и файл index.tsx, который служил домашней страницей.

С приходом App Router они стали layout.tsx и page.tsx. Файл layout.tsx содержит основную информацию, в то время как page.tsx воспроизводит функциональность старого файла index.tsx.

Клиентский компонент#

Одна проблема возникла в первом шаге: установка обработчика "onClick" для кнопки не удалась, в результате чего появилось сообщение об ошибке, гласящее: "Обработчики событий не могут быть переданы в свойства клиентского компонента. Если вам нужна интерактивность, рассмотрите возможность преобразования части этого в клиентский компонент."

Чтобы исправить эту проблему, мы выделили проблемный раздел в отдельный компонент и добавили префикс к файлу use client:

API маршруты#

Переход API-маршрутов был таким же простым, как передача предыдущих файлов из /pages/api в /app/api с небольшими корректировками:

1. index.ts был переименован в route.ts.
2. Экспортированная функция была переименована в GET или в другое актуальное имя метода.

Серверный компонент#

В папке api у нас есть возможность добавлять функции server-only, которые позволяют React Server Components получать данные.

В директории /app/api/logto/user есть файл get-user.tsx:

Эту функцию можно затем вызвать в page.tsx:

Заключение#

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

Для сравнения, вот ссылки на наши проекты, как до, так и после миграции:

До: https://github.com/logto-io/js/tree/master/packages/next-sample

После: https://github.com/logto-io/js/tree/master/packages/next-app-dir-sample

Изучая эти проекты, вы можете получить более ясное представление об изменениях и преимуществах, внесенных этой миграцией.