Como adotar Next.js em seu aplicativo existente

Para implementar, precisaremos criar um diretório pages e converter todos os componentes Route em nosso aplicativo para arquivos dentro de pages .

 páginas mkdir && touch pages/index.tsx pages/WithoutTS.jsx

Agora vamos criar nossa página inicial. Adicione o seguinte código ao seu arquivo pages/index.tsx :

 importar {DisplayWithTS} de'../src/pages/WithTS'
const TSComponent=()=> { Retorna( 
  Com TS  
  Sem TS  
 
  
 ) } exportar TSComponent padrão

Para demonstrar o componente JavaScript, construiremos a página WithoutTS. Adicione o seguinte código ao arquivo pages/WithoutTS :

 importar {DisplayWithoutTS} de'../src/pages/WithoutTS'
const JSCOmponent=()=> { Retorna( 
  Com TS  
  Sem TS  
 
  
 ) } exportar JSCOmponent padrão

Estilo

Da mesma forma que Create React App, next permite que você importe estilos para componentes. No Next.js, no entanto, eles precisam ser tratados como Módulos CSS .

Você pode, entretanto, adicionar folhas de estilo globais criando um arquivo _app.js personalizado no diretório pages :

 touch pages/_app.js

Importe estilos para _app.js e adicione o seguinte código:

 import'../src/App.css' exportar função padrão App ({Component, pageProps}) { retornar 
}

Você precisará reiniciar o servidor de desenvolvimento para carregar as alterações após criar _app.js . Faça isso e verifique seu navegador; agora você terá replicado completamente a aparência anterior do aplicativo, conforme visto na caixa de proteção do código. E assim, seu aplicativo agora é renderizado no lado do servidor com Next.js. Muito bom!

Limpeza

Agora você pode apagar os arquivos gerados pelo Create React App do diretório src , como App.tsx , App.test.tsx , index.ts , index.css e serviceWorker.ts , porque Next.js agora lida com tudo o que esses arquivos estavam fazendo.

Você também pode reorganizar sua estrutura de pastas um pouco como quiser, mas lembre-se de que Next.js usa um mecanismo de roteamento baseado em sistema de arquivos ao fazer isso.

Outras coisas a serem investigadas

Agora você está pronto para começar a migrar seus projetos antigos para Next.js. Para projetos mais complexos, no entanto, você pode precisar se aprofundar um pouco mais.

• Acesso a window , localStorage , navigator e outros APIs da Web -geralmente estão disponíveis para aplicativos renderizados do lado do cliente prontos para uso, mas como Next.js usa pré-renderização, você precisará acessá-los apenas em o lado do cliente do seu aplicativo SSR. Uma maneira de fazer isso é com o gancho useEffect
• Otimização de imagem-embora nosso aplicativo de demonstração não contenha imagens, a maioria dos aplicativos da web fará uso de ativos de imagem em algum lugar dentro deles. Next.js fornece um componente Imagem personalizado. next/image é uma extensão do HTML elemento , evoluído para a web moderna. Ele fornece otimizações de tempo de construção para redimensionar, otimizar e exibir imagens em formatos modernos como WebP quando o navegador for compatível
• Variáveis ​​de ambiente-variáveis ​​ou segredos .env também são suportados no Next.js, assim como no Create React App. No entanto, você precisará alterar o prefixo REACT_APP_ para NEXT_PUBLIC_ para torná-los disponíveis no momento da compilação
• next/head para SEO-Next.js fornece um componente integrado para anexar tags à página head de seu aplicativo em next/head .

No geral, Next.js é uma das melhores opções de SSR disponíveis atualmente. Usar a renderização do lado do servidor em seus aplicativos traz benefícios para a experiência do usuário, como carregamento mais rápido, e para exposição, aumentando a compatibilidade com SEO e SMO.

Adicionar Next.js em seu aplicativo React já existente é um processo bastante direto que oferece uma boa visão de como pode ser o futuro do desenvolvimento web de front-end, deixando muitos desenvolvedores animados com o que os próximos React Server Components irão trazer.

A postagem Como adotar o Next. js em seu aplicativo existente apareceu primeiro no LogRocket Blog .

Source link