Si estás comenzando con Next.js, uno de los conceptos más importantes que debes aprender es App Router. Este sistema permite organizar las páginas, rutas y componentes de una aplicación utilizando principalmente la estructura de carpetas del proyecto.
A diferencia de otros sistemas de enrutamiento, en App Router la ubicación de un archivo dentro de app determina automáticamente la URL de la página.
1. La carpeta app
Al crear un proyecto moderno de Next.js, encontraremos una estructura similar a esta:
mi-proyecto/
├── app/
│ ├── page.js
│ ├── layout.js
│ └── contacto/
│ └── page.js
├── public/
├── package.json
└── ...
El archivo page.js representa una página. Por ejemplo:
export default function Home() {
return <h1>Bienvenido a mi aplicación</h1>;
}
Como está directamente dentro de app, esta página corresponde a:
/
2. Crear nuevas rutas
Para crear una nueva página simplemente debemos crear una carpeta dentro de app.
Por ejemplo:
app/
├── page.js
├── contacto/
│ └── page.js
└── productos/
└── page.js
El archivo contacto/page.js estará disponible en:
/contacto
Y productos/page.js estará disponible en:
/productos
Por ejemplo:
export default function Contacto() {
return (
<main>
<h1>Contacto</h1>
<p>Esta es nuestra página de contacto.</p>
</main>
);
}
No necesitamos configurar manualmente estas rutas.
3. ¿Qué hace layout.js?
Los layouts permiten crear elementos que se mantienen entre diferentes páginas, como un menú, encabezado o pie de página.
export default function Layout({ children }) {
return (
<>
<header>
<h2>Mi sitio web</h2>
</header>
<main>{children}</main>
<footer>© 2026 Mi sitio</footer>
</>
);
}
El contenido de children será reemplazado por la página que estamos visitando.
Esto evita repetir el mismo código en todas las páginas.
4. Navegar entre páginas
Next.js proporciona el componente Link para navegar entre rutas:
import Link from "next/link";
export default function Menu() {
return (
<nav>
<Link href="/">Inicio</Link>
<Link href="/productos">Productos</Link>
<Link href="/contacto">Contacto</Link>
</nav>
);
}
De esta manera podemos crear una navegación rápida entre las diferentes páginas.
5. Rutas dinámicas
App Router también permite crear páginas cuyos valores cambian dinámicamente.
Por ejemplo:
app/
└── productos/
└── [id]/
└── page.js
La carpeta [id] indica que el valor será dinámico.
Así podemos tener URLs como:
/productos/10
/productos/25
/productos/100
Y obtener ese valor desde la página:
export default async function Producto({ params }) {
const { id } = await params;
return <h1>Producto: {id}</h1>;
}
6. Server Components
Una característica importante de App Router es que los componentes son Server Components por defecto. Esto significa que pueden ejecutarse en el servidor y obtener datos sin enviar toda esa lógica al navegador.
Cuando necesitamos interactividad, podemos convertir un componente en cliente utilizando:
"use client";
Por ejemplo, para utilizar useState:
"use client";
import { useState } from "react";
export default function Contador() {
const [contador, setContador] = useState(0);
return (
<button onClick={() => setContador(contador + 1)}>
Clics: {contador}
</button>
);
}
Conclusión
Entender App Router es fundamental para trabajar con las versiones modernas de Next.js. La idea principal es sencilla: las carpetas representan rutas, page.js representa páginas y layout.js permite compartir estructuras.
A partir de estos conceptos podemos construir aplicaciones más organizadas y posteriormente añadir rutas dinámicas, componentes interactivos, carga de datos y APIs.
