Se você construiu um aplicativo da web usando Next.js, mas agora precisa convertê-lo em um aplicativo React.js puro, você não está sozinho. Seja pela simplicidade, pelos requisitos específicos do projeto ou pela preferência pela renderização do lado do cliente, a conversão de Next.js para React pode ser simples com a orientação certa. Neste artigo, orientarei você nas etapas para converter um aplicativo Next.js em React.js, garantindo uma transição tranquila enquanto mantém a funcionalidade principal do seu aplicativo.

Nota: Se você deseja converter um aplicativo React.js para Next.js, verifique meu outro artigo sobre como converter React.js para Next.js.

Por que converter Next.js em React.js?

Next.js é uma estrutura fantástica que oferece renderização do lado do servidor (SSR), geração de site estático (SSG) e uma série de outros recursos prontos para uso. No entanto, esses recursos podem ser um exagero para projetos menores ou desnecessários se você preferir a renderização do lado do cliente (CSR) com React.js. A conversão para React.js pode simplificar seu processo de construção, reduzir dependências do servidor e fornecer mais controle sobre a arquitetura de seu aplicativo.

Compreendendo as diferenças

Antes de mergulhar no processo de conversão, é essencial entender as principais diferenças entre Next.js e React.js:

• Renderização do lado do servidor versus renderização do lado do cliente: Next.js oferece suporte a SSR e SSG, enquanto React.js é principalmente para CSR.
• Roteamento: Next.js possui um sistema de roteamento baseado em arquivo integrado. No React.js, você precisará usar uma biblioteca como React Router.
• API Routes: Next.js permite que você crie rotas de API dentro do mesmo projeto. No React.js, você normalmente separa o frontend e o backend.

Etapas para converter Next.js em React.js

Vamos começar com o guia passo a passo sobre como converter um aplicativo Next.js em React.js.

1. Configure um novo aplicativo React.js

Primeiro, crie um novo projeto React.js usando uma ferramenta como Create React App (CRA) ou Vite.

Usando o aplicativo Create React:

npx create-react-app my-react-app
cd my-react-app

Usando o Vite:

npm init vite@latest my-react-app --template react
cd my-react-app
npm install

2. Transferência de Dependências

Copie as dependências e devDependencies do package.json do seu projeto Next.js para o package.json do novo projeto React.js. Execute npm install ou yarn install para instalá-los.

3. Migrar componentes e páginas

Copie o conteúdo dos componentes e diretórios de páginas do Next.js para o diretório src do projeto React.js. Como Next.js usa um diretório de páginas para roteamento, você precisará ajustar essa estrutura.

4. Implementar roteamento com React Router

Next.js lida com o roteamento automaticamente com base no diretório de páginas. No React.js, você precisará configurar o roteamento manualmente.

Instale o roteador React:

npm install react-router-dom

Configurar rotas em src/App.js:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './Home'
import About from './About'
// Import other components as needed

function App() {
  return (
    
      
        } />
        } />
        {/* Add other routes */}
      
    
  )
}

export default App

5. Ajuste os métodos de busca de dados

Em Next.js, a busca de dados é feita usando getServerSideProps, getStaticProps ou getInitialProps. No React.js, você precisará lidar com a busca de dados em seus componentes, normalmente usando useEffect e useState.

Exemplo:

import { useState, useEffect } from 'react'

function Home() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('/api/data') // Update the API endpoint as needed
      .then((response) => response.json())
      .then((data) => setData(data))
  }, [])

  return 
{/* Render your data */}
}

export default Home

6. Lidar com rotas de API

Se seu aplicativo Next.js usa rotas de API dentro do diretório pages/api, você precisará migrá-las para um serviço de back-end separado ou ajustar seu front-end para buscar APIs externas.

Opções:

• Crie um back-end separado: use Node.js, Express ou qualquer estrutura de back-end para configurar endpoints de API.
• Use APIs externas: se possível, ajuste seu frontend para consumir APIs externas diretamente.

7. Atualizar variáveis ​​de ambiente

Next.js usa variáveis ​​de ambiente prefixadas com NEXT_PUBLIC_ para variáveis ​​do lado do cliente. No React.js, crie um arquivo .env na raiz do seu projeto e prefixe as variáveis ​​com REACT_APP_.

Exemplo:

REACT_APP_API_URL=https://api.example.com

Acesse-os em seu código usando process.env.REACT_APP_API_URL.

8. Remova configurações específicas do Next.js

Exclua quaisquer configurações específicas do Next.js, como next.config.js. Além disso, remova quaisquer importações ou pacotes específicos do Next.js que não sejam mais necessários.

9. Teste seu aplicativo

Execute seu aplicativo React.js para garantir que tudo funcione conforme o esperado.

npm start

Examine cada rota e funcionalidade para verificar se a conversão foi bem-sucedida.

Conclusão

Converter um aplicativo Next.js para React.js envolve configurar um novo projeto React e migrar seus componentes, ajustar o roteamento e lidar com a busca de dados de maneira diferente. Embora Next.js ofereça muitos recursos poderosos, um aplicativo React.js puro oferece simplicidade e flexibilidade, especialmente para projetos que não requerem renderização no servidor.

Seguindo este guia sobre como converter Next.js em React.js, você deverá ter uma transição perfeita.

Obrigado pela leitura! Se você estiver interessado em fazer o contrário, confira meu artigo sobre como converter um aplicativo React.js em Next.js. Para mais atualizações sobre novos projetos ou artigos, siga-me no Twitter: @jake_prins.