🎯 Aula 01

🔧 Instalação e Configuração

Configure seu ambiente de desenvolvimento Next.js do zero, seguindo as melhores práticas oficiais.

15 minutos

Nível:Iniciante

Por que isso é importante

Uma configuração adequada do Next.js pode reduzir o tempo de build em até 60% e melhorar a performance de desenvolvimento significativamente. Aplicações Next.js bem configuradas carregam 3x mais rápido que SPAs tradicionais, resultando em melhor SEO e conversão.

Conceitos Importantes para Entender

Node.js Runtime:

Next.js roda sobre Node.js, permitindo JavaScript no servidor. Isso possibilita Server-Side Rendering (SSR) e Server Components.

App Router vs Pages Router:

App Router é a nova arquitetura do Next.js 13+, baseada em Server Components. Mais performática e flexível que o Pages Router.

Turbopack:

Bundler sucessor do Webpack, escrito em Rust. Até 10x mais rápido para builds de desenvolvimento.

TypeScript First:

Next.js tem suporte nativo ao TypeScript, com zero configuração e otimizações automáticas.

Pré-requisitos do Sistema

🎯 Requisitos Mínimos

Node.js 18.17+ (LTS recomendado)
npm 9+ ou yarn 1.22+
Git para controle de versão
Editor de código (VS Code recomendado)

🚀 Para Melhor Performance

Node.js 20+ (melhor performance V8)
pnpm 8+ (gerenciador mais rápido)
SSD para builds mais rápidos
8GB+ RAM para projetos grandes

Verificação do Ambiente

Antes de começar, vamos verificar se seu ambiente está corretamente configurado:

🔧 Verificar Node.js

typescript

# Verificar versão do Node.js
node --version

# Deve retornar v18.17.0 ou superior
# Exemplo: v20.10.0

📦 Verificar npm

typescript

# Verificar versão do npm
npm --version

# Deve retornar 9.0.0 ou superior
# Exemplo: 10.2.3

🔗 Verificar Git

typescript

# Verificar versão do Git
git --version

# Deve retornar qualquer versão 2.x
# Exemplo: git version 2.42.0

Criando Seu Primeiro Projeto

🚀 create-next-app🔧 Configuração Manual

create-next-app

✅ Método Recomendado - create-next-app

O create-next-app é a ferramenta oficial para criar projetos Next.js com todas as configurações otimizadas.

🎯 Com TypeScript (Recomendado)

typescript

# Criar projeto com TypeScript, Tailwind CSS e App Router
npx create-next-app@latest meu-projeto --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"

# Navegar para o diretório
cd meu-projeto

# Instalar dependências (caso não tenha sido automático)
npm install

⚡ Versão Interativa

typescript

# Modo interativo - você escolhe as opções
npx create-next-app@latest

# Responda as perguntas:
# ✔ What is your project named? › meu-projeto
# ✔ Would you like to use TypeScript? › Yes
# ✔ Would you like to use ESLint? › Yes
# ✔ Would you like to use Tailwind CSS? › Yes
# ✔ Would you like to use `src/` directory? › Yes
# ✔ Would you like to use App Router? › Yes
# ✔ Would you like to customize the default import alias? › Yes
# ✔ What import alias would you like configured? › @/*

manual

🔧 Configuração Manual (Para Aprendizado)

Entenda cada passo da configuração criando um projeto do zero:

1️⃣ Inicializar projeto

typescript

# Criar diretório e inicializar npm
mkdir meu-projeto-manual
cd meu-projeto-manual
npm init -y

2️⃣ Instalar Next.js

typescript

# Instalar Next.js, React e React-DOM
npm install next@latest react@latest react-dom@latest

# Instalar TypeScript (opcional)
npm install --save-dev typescript @types/react @types/node

3️⃣ Configurar package.json

package.json

{
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "start": "next start",
    "lint": "next lint"
  }
}

Testando a Instalação

Vamos verificar se tudo está funcionando corretamente:

🚀 Iniciar servidor de desenvolvimento

typescript

# Iniciar o servidor de desenvolvimento
npm run dev

# O servidor estará disponível em:
# http://localhost:3000

# Para parar o servidor:
# Ctrl + C (ou Cmd + C no Mac)

✅ Resultado Esperado

Se tudo estiver correto, você verá a página inicial do Next.js no navegador com:

Logo do Next.js
Mensagem de boas-vindas
Links para documentação
No terminal: "ready - started server on 0.0.0.0:3000"

Vantagens desta Implementação

🔒 Configuração Oficial:
Segue exatamente as recomendações da documentação do Next.js
⚡ Performance Otimizada:
App Router e TypeScript para máxima performance
🛠️ Ferramentas Modernas:
ESLint, Tailwind CSS e estrutura src/ organizadas

🔄 Hot Reload:
Desenvolvimento mais rápido com atualizações instantâneas
📱 Responsivo:
Tailwind CSS configurado para design mobile-first
🔍 Type Safety:
TypeScript detecta erros em tempo de desenvolvimento

O que Você Conquistou

🎉 Parabéns! Você agora tem um ambiente Next.js 14+ completo e otimizado, seguindo todas as melhores práticas da indústria.

✅ Ambiente configurado com Node.js, npm/yarn e Git
✅ Projeto Next.js criado com App Router e TypeScript
✅ Ferramentas modernas como Tailwind CSS e ESLint
✅ Servidor de desenvolvimento rodando em localhost:3000
✅ Base sólida para construir aplicações profissionais

Próxima aula