Nossa Jornada Migrando o Exemplo do SDK do Logto para o Roteador de Aplicativos Next.js 13
Este artigo detalha o processo de migrar o projeto de exemplo do SDK do Next.js do Logto para o novo Roteador de Aplicativos do Next.js 13, cobrindo as etapas de criação de novas páginas e layouts, transição de rotas da API, e utilizando componentes do servidor e do cliente.
SijieDeveloper
Pare de perder semanas com autenticação de usuários
Lance aplicativos seguros mais rapidamente com o Logto. Integre a autenticação de usuários em minutos e concentre-se no seu produto principal.
No Logto, oferecemos um SDK do Next.js chamado @logto/next, acompanhado por um projeto de exemplo. Este projeto demonstra efetivamente como integrar o Logto com o Next.js usando a tradicional pasta "páginas", oferecendo exemplos de rotas de API, getServerSideProps, Busca do Lado do Cliente e até mesmo tempo de execução na borda.
O Next.js 13 nos trouxe o inovador Roteador de Aplicações (anteriormente chamado de diretório de aplicativos), introduzindo novos recursos e convenções que rapidamente se tornaram populares na comunidade de desenvolvedores. Dado que o SDK do Next.js do Logto suporta totalmente esses novos recursos, fomos inspirados a construir um novo projeto de exemplo utilizando este Roteador de Aplicações.
Neste post, vamos guiá-lo pelos detalhes da migração do nosso antigo projeto de exemplo para o novo usando o Roteador de Aplicações. O projeto foi construído com base no antigo projeto de exemplo e seguiu o guia de migração oficial guia. O processo envolveu várias etapas: criar páginas e layouts, migrar rotas da API e utilizar componentes do servidor e do cliente.
Em nossa configuração original, utilizamos um arquivo _app.tsx para configurar o buscador SWR e um arquivo index.tsx serviu como a página inicial.
Com o Roteador de Aplicações, estes se tornam layout.tsx e page.tsx. O arquivo layout.tsx contém as informações centrais, enquanto page.tsx espelha a funcionalidade do antigo arquivo index.tsx.
Um soluço surgiu durante a primeira etapa: definir um manipulador "onClick" para o botão foi mal sucedido, 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 essa questão, extraímos a seção problemática para um componente separado e prefixamos o arquivo com use client:
Após concluir 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 seus projetos com confiança para o Roteador de Aplicações.
Para comparação, aqui estão os links para nossos projetos, antes e depois da migração:
