A Nossa Jornada Migrando a Amostra do SDK do Logto para o Next.js 13 App Router
Este artigo detalha o processo de migração do projeto de amostra do SDK Next.js do Logto para o novo Next.js 13 App Router, abrangendo as etapas de criação de novas páginas e layouts, transição de rotas API, e utilização de componentes do servidor e do cliente.
SijieDeveloper
Pare de perder semanas com autenticação de utilizadores
Lance aplicações seguras mais rapidamente com o Logto. Integre a autenticação de utilizadores em minutos e concentre-se no seu produto principal.
No Logto, oferecemos um SDK Next.js chamado @logto/next, acompanhado por um projeto de amostra. Este projeto demonstra efetivamente como integrar o Logto com o Next.js usando a pasta "pages" tradicional, oferecendo exemplos de rotas de API, getServerSideProps, Client-side Fetching, e até mesmo runtime de borda.
Next.js 13 nos trouxe o revolucionário App Router (anteriormente chamado de diretório de aplicação), introduzindo novas funcionalidades e convenções que rapidamente se tornaram populares na comunidade de desenvolvedores. Dado que o SDK Next.js do Logto suporta totalmente essas novas funcionalidades, nos sentimos inspirados a construir um novo projeto de amostra utilizando este App Router.
Neste post, vamos guiá-lo pelos detalhes de migrar nosso antigo projeto de amostra para o novo usando o App Router. O projeto foi construído com base no antigo projeto de amostra e seguiu o guia de migração oficial guia. O processo envolveu várias etapas: criar páginas e layouts, migrar rotas API, e utilizar componentes do servidor e do cliente.
Na nossa configuração original, usávamos um arquivo _app.tsx para configurar o SWR fetcher e um arquivo index.tsx servia como a página inicial.
Com o App Router, estes se tornam layout.tsx e page.tsx. O arquivo layout.tsx contém as informações principais, enquanto page.tsx espelha a funcionalidade do antigo arquivo index.tsx.
Um percalço surgiu durante a primeira etapa: a configuração de um manipulador "onClick" para o botão foi infrutífera, resultando em uma mensagem de erro que dizia: "Event handlers cannot be passed to Client Component props. If you need interactivity, consider converting part of this to a Client Component."
Para remediar este problema, extraímos a seção problemática para um componente separado e prefixamos o arquivo com use client:
Após completar a migração, descobrimos que nosso código e estrutura estavam significativamente mais simplificados e intuitivos. Embora parecesse desafiador no início, o processo estava longe de ser assustador. Esperamos que nossa experiência possa servir como um guia valioso, ajudando você a migrar confiantemente seus projetos para o App Router.
Para comparação, aqui estão os links para nossos projetos, antes e depois da migração:
