Com o lançamento do Next.js App Router, muitos desenvolvedores estão ansiosos para migrar seus projetos existentes. Nesta postagem, compartilharei minha experiência na migração de um projeto para o Next.js App Router, incluindo os principais desafios, mudanças e como você pode tornar o processo mais tranquilo.

É uma abordagem incremental, você pode usar o roteador de página e o roteador de aplicativo simultaneamente.

Por que migrar para o roteador de aplicativos Next.js?

O App Router apresenta diversas vantagens:

• Roteamento aprimorado: roteamento mais limpo baseado em sistema de arquivos.
• Aprimoramentos na renderização do lado do servidor (SSR): manipulação mais eficiente de dados do lado do servidor.
• Manipulação de meta: gerenciamento simplificado de SEO.
• Desempenho aprimorado: otimizações integradas para vários componentes.

Ao migrar, você pode preparar seu aplicativo para o futuro para aproveitar as vantagens dos recursos mais recentes do Next.js.

Etapas para migrar para o App Router

• Atualizar dependências

A primeira etapa é garantir que seu Next.js e dependências relacionadas estejam atualizados. Execute os seguintes comandos para instalar as versões mais recentes do Next.js e React:

npm install next@latest react@latest react-dom@latest
npm install -D eslint-config-next@latest

• Estruture a pasta do aplicativo

O App Router depende do novo diretório de aplicativos para gerenciar rotas, metadados e layouts. Veja como estruturá-lo:

Pasta de aplicativos: mova suas páginas para a pasta de aplicativos. Cada rota agora tem sua própria pasta dedicada contendo um arquivo page.tsx.

Layouts: adicione um arquivo layout.tsx para definir layouts para seções específicas do seu aplicativo. Isso é particularmente útil para lidar com componentes compartilhados, como barras de navegação ou rodapés.

• Alterações no roteador

Uma das mudanças mais significativas é a substituição de next/router por next/navigation para roteamento e funcionalidade de navegação.

Substitua todas as importações de next/router por next/navigation.
Atualize funções como useRouter com novos equivalentes, como usePathname, useSearchParams e useRouter() quando apropriado.

• Refatorar código do lado do servidor

getServerSideProps e getStaticProps estão obsoletos no App Router.
Use componentes de servidor assíncronos ou ações de servidor para busca de dados em páginas do lado do servidor.

export async function getData() {
  const res = await fetch('https://getData.com/data');
  return res.json();
}

• Tratamento de componentes do lado do cliente

Componentes do cliente:
Qualquer componente que use ganchos React, APIs de navegador ou interações de usuário deve ser marcado com 'use client'. Isso diz ao Next.js para renderizá-los no lado do cliente.

Componentes do servidor:
Qualquer componente que não requeira interação com o navegador pode permanecer como componente do servidor. Eles são mais eficientes, pois evitam o envio de JavaScript desnecessário ao cliente.

• Manuseio de bibliotecas externas

Se você estiver usando bibliotecas externas como React Query, AntDesign ou framer etc. Você precisa atualizá-las e fazer alterações conforme necessário. Não é possível incluir todas as alterações neste blog. Embora as alterações sejam mencionadas em sua documentação.

Desafios comuns durante a migração

• Manipulação de eventos do roteador:

Com a mudança de next/router para next/navigation, o tratamento de eventos de roteador pode exigir uma abordagem diferente.
Certifique-se de atualizar todos os ouvintes ou ganchos de eventos do roteador adequadamente.

• Problemas de mudança de layout:

Ao migrar páginas com layouts complexos (especialmente aquelas com animações), você poderá notar mudanças de layout. Adicione um espaço reservado ou mantenha o alinhamento adequado no próprio servidor para evitar mudanças de layout.

• Atualizações de componentes de imagem e link:

O App Router introduz alterações nos componentes Image e Link.
Use codemods para atualizar componentes automaticamente.
Para o componente Imagem, remova atributos obsoletos como responsivo.

• Animações

Componentes relacionados à animação, como arquivos framer, swiper e lootie, precisam ser mantidos no lado do cliente.

Conclusão

A migração para o Next.js App Router traz seus desafios, mas também traz melhorias significativas no desempenho, escalabilidade e flexibilidade. Ao dividir a migração em seções gerenciáveis ​​(atualizações no nível do aplicativo, no nível da página e de recursos), consegui lidar com cada mudança de forma sistemática.

Deixe-me saber se você tiver alguma dúvida ou dica sobre suas próprias migrações!