Migrate NextJS to Vite
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.