Next.js: Configuração do Ambiente & Estrutura do Projeto

# Um comando interativo, Basta responder algumas perguntas simples
npx create-next-app@latest taskflow --ts --tailwind --app --src-dir --import-alias "@/*"

# Executar o comando de scaffolding
npx create-next-app@latest

? What is your project named?  taskflow
? Would you like to use TypeScript?  Yes / No
? Would you like to use ESLint?  Yes / No
? Would you like to use Tailwind CSS?  Yes / No
? Would you like to use `src/` directory?  Yes / No
? Would you like to use App Router? (recommended)  Yes / No
? Would you like to customize the import alias (`@/*` by default)?  No

# Opções Recomendadas Para Este Curso(Todos os projetos usam este conjunto)
npx create-next-app@latest taskflow ^
  --typescript ^
  --eslint ^
  --tailwind ^
  --src-dir ^
  --app ^
  --import-alias "@/*"

# ============================================
---
# Criar um arquivo chamado shophub Novo Projeto
---
# ============================================

npx create-next-app@latest shophub --ts --tailwind --app --src-dir

# Saída do Console
cd shophub
npm run dev

Creating a new Next.js project in C:\Users\Charlie\shophub.

✔ 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? (recommended) … Yes
✔ Would you like to customize the import alias? … @/*

Success! Created shophub at shophub
Inside that directory, you can run:
  npm run dev       # Iniciar o servidor de desenvolvimento
  npm run build     # Construir a versão de produção
  npm start         # Iniciar o servidor de produção

Diagrama: shophub/; src/; public/; Outros Arquivos de Configuração; app/; app/globals.css.

// ============================================
// create-next-app Página Inicial Padrão
// ============================================

import Image from "next/image";

export default function Home() {
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
        <Image
          className="dark:invert"
          src="/next.svg"
          alt="Next.js logo"
          width={180}
          height={38}
          priority
        />
        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
          <li className="mb-2">
            Get started by editing{" "}
            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
              src/app/page.tsx
            </code>
          </li>
          <li>Save and see your changes instantly.</li>
        </ol>
        <div className="flex gap-4 items-center flex-col sm:flex-row">
          <a className="...">Deploy now</a>
          <a className="...">Read our docs</a>
        </div>
      </main>
    </div>
  );
}

Renderiza: Componente Home com elementos UI descritos.

Abra em um navegador http://localhost:3000, Como você pode ver:
- Logo Oficial Next.js
- "Get started by editing src/app/page.tsx" Apresentação
- "Deploy now" e "Read our docs" dois links
- Tema Escuro/Claro Responsivo

public/
├── favicon.ico      # Ícone da Aba do Navegador
├── file.svg         # Ícone de Tipo de Arquivo
├── globe.svg        # Ícone da Terra
├── next.svg         # Logo Next.js
├── vercel.svg       # Logo Vercel
└── window.svg       # Ícone de Janela

// Referenciar em um componente public Imagens no diretório
<img src="/logo.png" alt="Logo" />
// ou usar next/image Componentes
import Image from 'next/image';
<Image src="/logo.png" alt="Logo" width={200} height={100} />

TypeScript compilado.

// ============================================
// next.config.ts — Configuração de Tempo de Compilação Next.js
// ============================================

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Permitir que imagens externas sejam carregadas de domínios especificados
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "fakestoreapi.com",
      },
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
    ],
  },

  // Habilitar PPR(Partial Prerendering)
  experimental: {
    ppr: true,
  },
};

export default nextConfig;

O componente renderiza sua UI.

Depois que a configuração entrar em vigor:
1. Componentes <Image> podem carregar imagens de fakestoreapi.com e images.unsplash.com
2. Na página Suspense O conteúdo após o limite usará Renderização Streaming PPR
3. Execute Novamente npm run dev A configuração entrará em vigor depois

# Ir para o diretório do projeto
cd shophub

# Iniciar o servidor de desenvolvimento
npm run dev

  ▲ Next.js 16.0.0
  - Local:        http://localhost:3000
  - Environments: .env.local

 ✓ Starting...
 ✓ Ready in 1.2s

# ============================================
---
# Iniciar o servidor de desenvolvimento, Observação Turbopack Na velocidade máxima HMR
---
# ============================================

npm run dev

# Saída do Console
> shophub@0.1.0 dev
> next dev

  ▲  ▲
  ▲  Next.js 16.2
  ▲  - Local: http://localhost:3000
  ▲  - Turbopack: ✓ loaded in 742ms

✔ Compiled /src/app/page.tsx in 142ms (modules: 523)

✔ Updated /src/app/page.tsx in 4ms    ← 4 milissegundos! Atualiza quase instantaneamente

  ▲ Next.js 16.2
  - Local: http://localhost:3000
  - Turbopack: ✓ loaded in 742ms

✔ Compiled /src/app/page.tsx in 142ms (modules: 523)
✔ Updated /src/app/page.tsx in 4ms    ← 4 milissegundos! Atualiza quase instantaneamente

# Construir a versão de produção
npm run build

✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages (5/5)
✓ Collecting build traces
✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    5.1 kB          89 kB
├ ○ /_not-found                          152 B          84.1 kB
└ λ /api/hello                           0 B            84.1 kB
+ First Load JS shared by all            84.1 kB
  ├ chunks/main-app                      ...
  └ chunks/webpack                       ...

○  (Static)  Geração Estática(SSG)
λ  (Dynamic) Renderização Dinâmica(SSR)

(Veja saída acima)

# ============================================
---
# Interpretando a Saída do Build de Produção
---
# ============================================

# Suponha que duas páginas foram criadas:
---
# app/about/page.tsx e app/dashboard/page.tsx
---
# Entre eles dashboard Usado cookies() Funções Dinâmicas

npm run build

# Significado dos Símbolos na Saída:
○  /              # Página Estática(Sem funções dinâmicas)
○  /about         # Página Estática
λ  /dashboard     # Páginas Dinâmicas(Usou API dinâmica)
○  /_not-found    # Página 404

Route (app)                              Size     First Load JS
┌ ○ /                                    5.1 kB          89 kB
├ ○ /about                               3.2 kB          87 kB
├ λ /dashboard                           6.8 kB          92 kB
└ ○ /_not-found                          152 B          84.1 kB

Route (app)                              Size     First Load JS
┌ ○ /                                    5.1 kB          89 kB
├ ○ /about                               3.2 kB          87 kB
├ λ /dashboard                           6.8 kB          92 kB
└ ○ /_not-found                          152 B          84.1 kB

○  (Static)  Geração Estática(SSG)
λ  (Dynamic) Renderização Dinâmica(SSR)

# Iniciar o servidor de produção após o deploy
npm run build
npm start

{
  "name": "shophub",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^16.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@types/node": "^22.0.0",
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "typescript": "^5.7.0",
    "tailwindcss": "^4.0.0",
    "eslint": "^9.0.0",
    "@eslint/eslintrc": "^3.0.0"
  }
}

Estrutura JSON com scripts (dev, build, start, lint, type-check, format, preview) e seus comandos CLI correspondentes.

// ============================================
// Adicionar scripts personalizados comumente usados em package.json
// ============================================

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "type-check": "tsc --noEmit",
    "format": "prettier --write .",
    "preview": "npm run build && npm start"
  }
}

npm run type-check   → Executar Verificação de Tipo TypeScript(Não gera arquivo)
npm run format       → Formatar todo o código com Prettier
npm run preview      → Construir primeiro, depois iniciar o servidor de produção(Feito com um único comando)

npm run type-check   → Executar Verificação de Tipo TypeScript (sem gerar arquivos)
npm run format       → Formatar todo o código com Prettier
npm run preview      → Construir primeiro, depois iniciar o servidor de produção (comando único)

# ============================================
---
# Exemplo Abrangente: Construir um Sistema Completo do Zero Next.js 16 Projeto
---
# TaskFlow — Plataforma de Gerenciamento de Colaboração de Projetos
---
# ============================================

# 1. Criar um Projeto
npx create-next-app@latest taskflow ^
  --typescript ^
  --eslint ^
  --tailwind ^
  --src-dir ^
  --app ^
  --import-alias "@/*"

# 2. Ir para o diretório do projeto
cd taskflow

# 3. Ver Estrutura de Diretórios
tree . /F | findstr /r "^.*src" > nul && dir /s /b src

# 4. Iniciar o servidor de desenvolvimento
npm run dev

# 5. Em outro terminal, Adicionar Layout VS Code Recomendado
mkdir .vscode

// .vscode/settings.json — Configuração de Nível de Projeto
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

// src/app/page.tsx — Mudar a página inicial para Página de Boas-Vindas TaskFlow
import Link from "next/link";

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      <div className="container mx-auto px-4 py-16 text-center">
        <h1 className="text-5xl font-bold text-gray-900 mb-4">
          TaskFlow
        </h1>
        <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
          A collaborative project management platform built with Next.js 16.
          Plan, track, and deliver projects together.
        </p>
        <div className="flex gap-4 justify-center">
          <Link
            href="/login"
            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          >
            Get Started
          </Link>
          <Link
            href="/about"
            className="px-6 py-3 border border-gray-300 rounded-lg hover:bg-gray-50"
          >
            Learn More
          </Link>
        </div>
        <div className="mt-16 grid grid-cols-3 gap-8 max-w-3xl mx-auto">
          <div className="p-6 bg-white rounded-xl shadow-sm">
            <h3 className="font-bold text-lg">Plan</h3>
            <p className="text-gray-500 mt-2">Create projects and assign tasks</p>
          </div>
          <div className="p-6 bg-white rounded-xl shadow-sm">
            <h3 className="font-bold text-lg">Track</h3>
            <p className="text-gray-500 mt-2">Monitor progress in real-time</p>
          </div>
          <div className="p-6 bg-white rounded-xl shadow-sm">
            <h3 className="font-bold text-lg">Deliver</h3>
            <p className="text-gray-500 mt-2">Ship projects on schedule</p>
          </div>
        </div>
      </div>
    </div>
  );
}

No navegador http://localhost:3000 Veja:

[Título TaskFlow]
A collaborative project management platform built with Next.js 16.
Plan, track, and deliver projects together.

[Get Started] [Learn More]

┌──────┐  ┌──────┐  ┌──────┐
│ Plan │  │ Track│  │Deliver│
└──────┘  └──────┘  └──────┘