Наше путешествие по миграции образца SDK Logto в Next.js 13 App Router
В этой статье подробно описывается процесс миграции образца проекта SDK Next.js от Logto на новый Next.js 13 App Router, включая создание новых страниц и макетов, переход API-маршрутов и использование серверных и клиентских компонентов.
SijieDeveloper
Хватит тратить недели на аутентификацию пользователей
Запускайте безопасные приложения быстрее с Logto. Интегрируйте аутентификацию пользователей за считанные минуты и сосредоточьтесь на вашем основном продукте.
В 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:
После завершения миграции мы обнаружили, что наш код и структура значительно более стройны и интуитивно понятны. Хотя изначально это казалось сложным, процесс оказался далеко не страшным. Мы надеемся, что наш опыт сможет служить ценным руководством, помогая вам уверенно мигрировать ваши проекты на App Router.
Для сравнения, вот ссылки на наши проекты, как до, так и после миграции:
