Migrate NextJS to Vite · eduardosoares

Primeiramente eu fiz a instalação de 4 dependências, listadas abaixo.

npm install --save-dev vite @vitejs/plugin-react vite-tsconfig-paths vite-plugin-svgr

Em seguida, é necessário criar um arquivo de configuração do vite. A nomeação do arquivo é vite.config.ts (lembrando que estava usando typescript no meu projeto, por isso a extensão será .ts).

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
  server: {
    open: true,
  },
  build: {
    outDir: 'build',
  },
});

Dando continuidade, quando criamos um projeto com NextJS, podemos modificar a raiz do nosso documento criando um _document.tsx dentro da pasta src. Esse arquivo não existe por padrão dentro do projeto criado com vite.

Dessa forma, exclui o arquivo _document.tsx e passei as importações de fontes para dentro de um arquivo index.html(esse arquivo é necessário criá-ló), na raiz do projeto. Ele ficou da seguinda maneira.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet" />
    <title>Gym App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./src/main.tsx"></script>
  </body>
</html>

Observe que em script temos o arquivo principal do nosso projeto, esse arquivo main.tsx precisa ter a configuração que vem por padrão para o projeto ReactJS, com importação do React e React Dom. O arquivo padrão no Next é um pouco diferente, então eu renomeei o arquivo _app.tsx para main.tsx dentro da src. Abaixo o componente ficou dessa maneira.

import React from 'react'
import ReactDOM from 'react-dom/client'

import { App } from './App'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Outro fator importante é o roteamento entre páginas para navegação da aplicação. Por padrão, cada arquivo sem a inicial _ dentro de src/pages é uma página dentro do Next. Dessa forma, é necessário a instalação da biblioteca react router dom para adicionar a navegação dentro do arquivo raiz do ReactDOM.createRoot.

npm i react-router-dom

Com isso, basta configurar as rotas da sua aplicação de acordo com as URLs e renderizações dos respectivos componentes. O arquivo App.tsx ficaria semelhante a como está abaixo, dependendo do projeto.

import './styles/global.css';

import { ChakraProvider } from '@chakra-ui/react';;

import { Router } from './Router'

export function App() {
  return (
      <ChakraProvider>
        <Router />
      </ChakraProvider>
  )
}

Router é o arquivo de rotas do meu projeto, seguindo a documentação v6 do react-router-dom. Outro detalhe importante é a execução da navegação, o Next trás o Link component e um hook useRouter por padrão para navegação entre rotas, mas isso deverá ser substituido pelo hook useNavigate do react-router-dom. Abaixo mostro como ficou.

antes:

import { useRouter } from 'next/navigation';

const router = useRouter();

router.push(`/user/${id}`);

depois:

import { useNavigate  } from "react-router-dom";

const navigate = useNavigate();

navigate(`/user/${id}`);

Por conseguinte, deletei alguns arquivos de configurações que o NextJS trazia em si, foram eles:

next.config.js next-env.d.ts eslint.json

Crie um arquivo na raiz do projeto com nome vite-env.d.ts e adicione o seguinte código

/// <reference types="vite/client" />

Agora basta dar adeus ao Next. Executando uninstall do npm.

npm uninstall next eslint-config-next

Agora basta trocar os scripts de execução e build do projeto para usar os binários do vite.

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },

Agora basta executar npm run dev e verificar possíveis erros. Lembrando que no vite as importações de variáveis ambientes é diferente, mas basta olhar a documentação para possíveis ajustes.