Framework de React utilizado na construção do projeto. Site: https://nextjs.org/docs/pages/getting-started
npx create-next-app nome --ts
Instale, preferencialmente, também as dependências:
Após instalado o projeto, apague a pasta “app” se existente, e formate sua estrutura de pastas semelhantemente à foto abaixo:
Lembre-se de principalmente criar as pastas “pages”, “components”, “styles”, conforme o exibido. As pastas devem possuir o nome exatamente igual ao mostrado, pois são pastas de estrutura do Next.
Para inicializar e testar um projeto Next, basta executar o seguinte comando:
npm run dev
Ao contrário do React, no Next nós não somos bloqueados a utilizar o Router-dom, pois possuimos o Next Router. Para Utilizar o Next Router, você deve ter selecionado a opção de utillizar o novo Roteador enquanto Inicializando o projeto.
Com isso em mente, o roteador do Next gira em torno da pasta “pages” em seu diretório. Ao adicionar um .tsx nessa pasta e exportar uma função que retorne um JSX, automaticamente já existirá uma rota com o nome deste arquivo. Observe o exemplo abaixo:
/my-next-app
├── /pages
│ ├── index.tsx → `/` (Home page)
│ ├── about.tsx → `/about`
│ ├── contact.tsx → `/contact`
├── /components
├── /styles
├── .eslintrc.json → ESLint config
├── next.config.js → Next.js config