Nossa Jornada Migrando o Exemplo do SDK do Logto para o Roteador de Aplicativos Next.js 13

Introdução#

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.

O processo de migração#

Layout de página: Uma nova estrutura#

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.

Componente do cliente#

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:

Rotas da API#

A transição das rotas da API foi tão simples quanto transferir os arquivos anteriores de /pages/api para /app/api com algumas alterações:

1. index.ts foi renomeado para route.ts.
2. A função exportada foi renomeada para GET ou outro nome de método relevante.

Componente do servidor#

Dentro da pasta api, temos a capacidade de adicionar funções server-only, que permitem que os Componentes do Servidor do React busquem dados.

No diretório /app/api/logto/user, há um arquivo get-user.tsx:

Esta função pode então ser invocada em page.tsx:

Conclusão#

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:

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

Depois: https://github.com/logto-io/js/tree/master/packages/next-app-dir-sample

Ao examinar esses projetos, você pode obter um entendimento mais claro das mudanças e benefícios introduzidos por esta migração.