A Nossa Jornada Migrando a Amostra do SDK do Logto para o Next.js 13 App Router

Introdução#

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.

O processo de migração#

Layout de página: Uma nova estrutura#

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.

Componente do cliente#

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:

Rotas API#

A transição das rotas de 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 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:

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 uma compreensão mais clara das alterações e benefícios introduzidos por esta migração.