0Pricing
React Academy · Lección

Convenciones de archivos de App Router

Comprenda el directorio app/, los archivos page.tsx, layout.tsx, loading.tsx y error.tsx.

Convenciones de archivos de App Router es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

El directorio app/

El enrutador App Router de Next.js utiliza el directorio app/. Las carpetas definen segmentos de URL; los archivos especiales dentro de ellas definen el comportamiento de cada segmento.

page.tsx — La interfaz de la ruta

page.tsx exporta el componente de React que se renderiza para un segmento de URL. Sin un page.tsx, la ruta no es accesible públicamente.

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}
// → accessible at /dashboard

layout.tsx — Estructuras persistentes

layout.tsx envuelve las rutas secundarias. Persiste durante la navegación: su estado no se restablece cuando cambia la ruta secundaria.

// app/layout.tsx (root layout — required)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

loading.tsx — Interfaz de carga instantánea

loading.tsx se renderiza inmediatamente mientras se cargan los datos asíncronos de la página. Envuelve la página en un límite Suspense automático.

// app/dashboard/loading.tsx
export default function Loading() {
  return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetching

error.tsx — Límites de error

error.tsx es un límite de errores de React para el segmento. Recibe el error y una función reset para reintentarlo.

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

not-found.tsx — Interfaz 404

not-found.tsx se renderiza cuando se llama a notFound() desde un componente de servidor o cuando ninguna ruta coincide.

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>404 — Page not found</h2>
      <Link href="/">Go home</Link>
    </div>
  );
}

template.tsx — Layouts que se montan de nuevo

template.tsx funciona como layout.tsx, pero crea una instancia nueva en cada navegación: el estado se restablece y los efectos se vuelven a ejecutar. Úselo para animaciones o analíticas.

// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
  return <div className="shop-fade-in">{children}</div>;
}

route.ts — Rutas de API

route.ts (no route.tsx) exporta controladores de métodos HTTP (GET, POST, etc.) para crear endpoints de API dentro del directorio app/.

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await createUser(body);
  return Response.json(user, { status: 201 });
}

middleware.ts — Middleware de Edge

middleware.ts, ubicado en la raíz del proyecto, se ejecuta antes de cada solicitud coincidente en Edge; se utiliza para comprobaciones de autenticación, redirecciones y reescrituras de encabezados.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

Colocación

Puede colocar archivos que no sean rutas (componentes, utilidades y pruebas) dentro de las carpetas de app/. Solo los archivos con nombres que siguen las convenciones especiales (page, layout, etc.) se tratan como segmentos de ruta.

Layouts anidados

Cada carpeta puede tener su propio layout.tsx. El layout anidado envuelve únicamente a los elementos secundarios de su segmento y se combina con el layout principal que lo contiene.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

Comprobación rápida

¿Qué archivo de App Router proporciona un fallback de Suspense automático mientras se cargan los datos asíncronos de una página?

Resumen

App Router utiliza archivos especiales: page.tsx (interfaz de la ruta), layout.tsx (estructura persistente), loading.tsx (fallback de Suspense), error.tsx (límite de errores), not-found.tsx (404), route.ts (API) y middleware.ts (lógica de Edge).

Preguntas frecuentes

¿La lección «Convenciones de archivos de App Router» es gratis?

Sí — el texto completo de «Convenciones de archivos de App Router» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Convenciones de archivos de App Router»?

Comprenda el directorio app/, los archivos page.tsx, layout.tsx, loading.tsx y error.tsx. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Convenciones de archivos de App Router»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Convenciones de archivos de App Router
  2. Componentes de servidor frente a componentes de cliente en Next.js
  3. Rutas dinámicas y grupos de rutas
  4. API de metadatos y SEO en App Router
← Volver a React Academy