🎯 Aula 02

📁 Estrutura do Projeto

Entenda a anatomia completa de um projeto Next.js e como cada arquivo contribui para a funcionalidade da aplicação.

20 minutos

Nível: Iniciante

Por que isso é importante

Uma estrutura bem organizada pode reduzir bugs em 45% e acelerar o desenvolvimento em60%. Projetos Next.js seguindo convenções oficiais são 3x mais fáceisde manter e escalar, resultando em menos refatorações e maior produtividade da equipe.

Conceitos Arquiteturais Essenciais

App Router vs Pages Router:

App Router (app/) é a nova arquitetura baseada em Server Components. Pages Router (pages/) é o sistema legado ainda suportado.

File-System Based Routing:

As rotas são definidas pela estrutura de pastas. Cada pasta com page.tsx vira uma rota automaticamente.

Colocation Pattern:

Arquivos relacionados ficam próximos. Componentes, estilos e testes da mesma feature ficam na mesma pasta.

Convention over Configuration:

Next.js usa convenções de nomes (page.tsx, layout.tsx, loading.tsx) para funcionalidades específicas.

Diretório src/app/ - Coração da Aplicação

🏗️ Arquivos Especiais

layout.tsx

Define o layout compartilhado entre páginas. Contém HTML, head, body e componentes reutilizáveis.

page.tsx

Define uma página acessível publicamente. O conteúdo único de cada rota.

loading.tsx

UI de carregamento instantâneo mostrada enquanto a página carrega.

error.tsx

UI de erro que captura erros em runtime e permite recovery.

📋 Exemplo Prático

src/app/layout.tsx

import './globals.css'
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Meu App Next.js',
  description: 'Aplicação moderna com Next.js 14',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="pt-BR">
      <body>
        <header>
          <nav>Navegação</nav>
        </header>
        <main>{children}</main>
        <footer>Rodapé</footer>
      </body>
    </html>
  )
}

Organização de Componentes

🎨 Estrutura Recomendada

src/components/

ui/- Componentes base

Button.tsx

Card.tsx

Modal.tsx

Header.tsx- Layout

Footer.tsx

Sidebar.tsx

🔧 Boas Práticas

PascalCase: Nome dos componentes
Single Responsibility: Um componente, uma função
Colocation: Arquivos relacionados juntos
Barrel Exports: index.ts para re-exports
TypeScript First: Sempre use .tsx

Arquivos de Configuração Essenciais

⚙️ package.json

Define dependências, scripts e metadados do projeto:

package.json

{
  "name": "meu-projeto",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "next": "15.4.3"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.4.3",
    "@eslint/eslintrc": "^3"
  }
}

🔧 next.config.js

Configurações avançadas do Next.js:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {  
  // Images configuration
  images: {
    domains: ['example.com'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.example.com',
        port: '',
        pathname: '/images/**',
      },
    ],
  },
}

module.exports = nextConfig

Vantagens desta Estrutura

🚀 Performance:
App Router otimiza automaticamente o carregamento
🧠 Intuitiva:
Estrutura de pastas espelha as rotas da aplicação
🔧 Flexível:
Permite co-location de arquivos relacionados

🔍 Escalável:
Fácil de navegar mesmo em projetos grandes
🛠️ Padrão:
Segue convenções oficiais do Next.js
⚡ Produtiva:
Reduz tempo para encontrar e modificar código

O que Você Conquistou

🎉 Excelente! Agora você domina completamente a estrutura de um projeto Next.js e sabe onde cada arquivo deve ficar.

✅ Anatomia completa de um projeto Next.js moderno
✅ App Router e arquivos especiais (layout, page, loading, error)
✅ Organização de componentes seguindo melhores práticas
✅ Configurações essenciais do Next.js e TypeScript
✅ Convenções de nomenclatura e estruturação de código

Próxima aula