Estruturando seu Projeto NextJS - Guia Completo para Desenvolvedores Iniciantes!

Neste vídeo, exploramos a estrutura básica de um projeto Next.js, entendendo a função de cada arquivo e diretório criado automaticamente pelo framework.

Arquivos de Configuração Principais

package.json

O coração do projeto Node.js, contendo:

Metadados do projeto (nome, versão, etc.)
Dependências do projeto
Scripts para execução (dev, build, start, lint)

1// Exemplo de scripts
2 "scripts": {
3 "dev": "next dev",
4 "build": "next build",
5 "start": "next start",
6 "lint": "next lint"
7 }

package-lock.json

Controla versões exatas de todas as dependências (nunca editar manualmente).

tsconfig.json

Configurações do TypeScript para o projeto.

next.config.js

Configurações específicas do Next.js (documentação oficial disponível).

Diretórios Principais

public/

Arquivos estáticos (imagens, ícones, fonts):

Acessíveis diretamente pela raiz do projeto
Exemplo: favicon.ico aparece em /favicon.ico

node_modules/

Todas as dependências instaladas (gerenciadas automaticamente pelo npm/yarn).

.next/

Pasta gerada automaticamente com:

Arquivos de build
Cache de desenvolvimento
Não deve ser commitada no Git

src/ (opcional)

Contém o código-fonte da aplicação (padrão comum, mas não obrigatório):

1src/ 
2 app/       # Novo sistema de roteamento (Next 13+)
3 pages/     # Sistema de roteamento tradicional
4 styles/    # Arquivos de estilo globais ...

Arquivos Adicionais

.gitignore: Especifica arquivos a ignorar no Git
.eslintrc.json: Configurações do ESLint para padronização de código
next-env.d.ts: Tipos TypeScript para o Next.js (não editar)
README.md: Documentação básica do projeto

Estrutura do src/ (App Router)

O novo padrão do Next.js 13+:

app/page.tsx: Página inicial (equivalente a /pages/index.tsx)
app/layout.tsx: Layout compartilhado por todas as páginas
app/globals.css: Estilos globais
app/favicon.ico: Ícone da aplicação

Observação: O sistema pages/ ainda funciona para compatibilidade.

Considerações Finais

Esta estrutura inicial proporciona:

Organização clara entre código e configurações
Flexibilidade com o diretório src/ opcional
Suporte a múltiplos sistemas de roteamento
Tudo configurado para produção desde o início

Entender essa estrutura básica é fundamental para desenvolver aplicações robustas com Next.js. Nas próximas aulas, vamos mergulhar mais fundo em cada uma dessas partes.