Documentación

Instalacion y Estructura del Proyecto

Crear un proyecto nuevo

bash
npx create-next-app@latest mi-proyecto

El CLI te pregunta:

  • TypeScript? → Si (recomendado)
  • ESLint? → Si
  • Tailwind CSS? → Si (recomendado)
  • src/ directory? → No (mas simple sin el)
  • App Router? → Si
  • Import alias? → @/* (el default esta bien)

v16Nuevo Turbopack se usa por defecto en desarrollo. No necesitas configurar nada.

bash
cd mi-proyecto
npm run dev

Abre http://localhost:3000 y ya tienes tu proyecto corriendo.

Proyecto existente: migrar a v16

bash
npm install next@16 react@19 react-dom@19
npm install sharp

Verifica que tu package.json tenga:

json
{
  "dependencies": {
    "next": "^16.0.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

Estructura del proyecto

Despues de crear el proyecto, tu carpeta se ve asi:

code
mi-proyecto/
├── app/
│   ├── layout.tsx        # Layout principal (HTML + body)
│   ├── page.tsx           # Pagina de inicio (/)
│   ├── globals.css        # Estilos globales
│   └── favicon.ico
├── public/                # Archivos estaticos (imagenes, fonts)
├── next.config.ts         # Configuracion de Next.js
├── tailwind.config.ts     # Configuracion de Tailwind
├── tsconfig.json          # Configuracion de TypeScript
├── package.json
└── .env.local             # Variables de entorno (no se commitea)

Archivos clave

app/layout.tsx — El layout raiz. Todo lo que pongas aqui envuelve a todas las paginas:

tsx
// app/layout.tsx
import type { Metadata } from "next"
import "./globals.css"

export const metadata: Metadata = {
  title: "Mi Proyecto",
  description: "Descripcion de mi proyecto",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="es">
      <body>{children}</body>
    </html>
  )
}

app/page.tsx — La pagina principal. Es un Server Component por defecto:

tsx
// app/page.tsx
export default function HomePage() {
  return (
    <main>
      <h1>Bienvenido</h1>
      <p>Este componente se renderiza en el servidor</p>
    </main>
  )
}

Configuracion de Next.js

v16Cambio En v16, next.config.ts soporta TypeScript nativamente (ya existia en v15, pero ahora es el formato recomendado):

ts
// next.config.ts
import type { NextConfig } from "next"

const nextConfig: NextConfig = {
  // Turbopack es el default, no necesitas configurarlo

  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cdn.example.com",
      },
    ],
  },
}

export default nextConfig
Turbopack y Webpack

Si un paquete no funciona con Turbopack, puedes volver a Webpack temporalmente con next dev --webpack. Pero la gran mayoria de paquetes ya son compatibles.

Scripts comunes

json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}
  • npm run dev — Desarrollo local con Turbopack (hot reload instantaneo)
  • npm run build — Genera la version de produccion
  • npm start — Corre la version de produccion

Ejemplo: proyecto real desde cero

Imagina que vas a crear un dashboard para un negocio de comida. Asi se ve la estructura despues de agregar tus primeras paginas:

code
app/
├── layout.tsx              # Nav + footer global
├── page.tsx                # Landing del dashboard
├── menu/
│   ├── page.tsx            # Lista de platillos
│   └── [id]/
│       └── page.tsx        # Detalle de un platillo
├── pedidos/
│   ├── page.tsx            # Lista de pedidos
│   └── layout.tsx          # Layout con tabs (activos/completados)
└── api/
    └── pedidos/
        └── route.ts        # API endpoint para pedidos

Cada carpeta dentro de app/ es una ruta. Cada page.tsx es lo que se renderiza. Asi de simple.

AnteriorQue hay de nuevoSiguienteRouting