# Next.js 14 App Router: Guía completa Next.js 14 introduce cambios revolucionarios con el App Router, que redefine cómo construimos aplicaciones React modernas. En esta guía completa, exploraremos desde los conceptos básicos hasta las técnicas más avanzadas. ## ¿Qué es el App Router? El App Router es el nuevo sistema de enrutamiento de Next.js basado en React Server Components y el directorio `app/`. Ofrece: - **Server Components por defecto**: Mejor rendimiento y SEO - **Layouts anidados**: Organización más flexible de la UI - **Loading y Error boundaries**: Mejor experiencia de usuario - **Streaming**: Renderizado progresivo del contenido ## Estructura del proyecto ``` app/ ├── layout.tsx # Layout raíz ├── page.tsx # Página principal ├── loading.tsx # UI de carga global ├── error.tsx # UI de error global ├── not-found.tsx # Página 404 ├── global-error.tsx # Error boundary global ├── about/ │ └── page.tsx # /about ├── blog/ │ ├── layout.tsx # Layout del blog │ ├── page.tsx # /blog │ ├── loading.tsx # Loading del blog │ └── [slug]/ │ └── page.tsx # /blog/[slug] └── api/ └── users/ └── route.ts # API routes ``` ## Server vs Client Components ### Server Components (por defecto) Los Server Components se ejecutan en el servidor y ofrecen varios beneficios: ```tsx // app/blog/page.tsx - Server Component import { getPosts } from '@/lib/posts'; export default async function BlogPage() { // Puede hacer fetch de datos directamente const posts = await getPosts(); return (

Blog

{posts.map(post => (

{post.title}

{post.excerpt}

))}

); } ``` **Ventajas de Server Components:** - Acceso directo a bases de datos y APIs - Bundle más pequeño en el cliente - Mejor SEO - Carga inicial más rápida ### Client Components Usa `'use client'` cuando necesites interactividad: ```tsx // components/SearchForm.tsx - Client Component 'use client'; import { useState } from 'react'; export default function SearchForm() { const [query, setQuery] = useState(''); return ( ); } ``` ## Layouts anidados Los layouts permiten compartir UI entre múltiples páginas: ```tsx // app/layout.tsx - Layout raíz export default function RootLayout({ children, }: { children: React.ReactNode; }) { return (

{children}

); } // app/blog/layout.tsx - Layout del blog export default function BlogLayout({ children, }: { children: React.ReactNode; }) { return (

{children}

); } ``` ## Data Fetching ### Fetch en Server Components ```tsx // app/products/page.tsx async function getProducts() { const res = await fetch('https://api.example.com/products', { // Revalidar cada hora next: { revalidate: 3600 } }); if (!res.ok) { throw new Error('Failed to fetch products'); } return res.json(); } export default async function ProductsPage() { const products = await getProducts(); return (

Productos

{products.map(product => (

{product.name}

{product.price}

))}

); } ``` ### Parallel Data Fetching ```tsx // app/dashboard/page.tsx async function getUser() { const res = await fetch('/api/user'); return res.json(); } async function getPosts() { const res = await fetch('/api/posts'); return res.json(); } async function getAnalytics() { const res = await fetch('/api/analytics'); return res.json(); } export default async function Dashboard() { // Fetch en paralelo const [user, posts, analytics] = await Promise.all([ getUser(), getPosts(), getAnalytics() ]); return (

Dashboard de {user.name}

Posts: {posts.length}

Vistas: {analytics.views}

); } ``` ## Loading y Error Handling ### Loading UI ```tsx // app/blog/loading.tsx export default function Loading() { return (

); } ``` ### Error Boundaries ```tsx // app/blog/error.tsx 'use client'; import { useEffect } from 'react'; export default function Error({ error, reset, }: { error: Error & { digest?: string }; reset: () => void; }) { useEffect(() => { // Log del error console.error(error); }, [error]); return (

¡Algo salió mal!

{error.message}

); } ``` ## Streaming con Suspense ```tsx // app/dashboard/page.tsx import { Suspense } from 'react'; async function SlowComponent() { // Simular carga lenta await new Promise(resolve => setTimeout(resolve, 3000)); return

Contenido que carga lento

; } function LoadingSkeleton() { return

; } export default function Dashboard() { return (

Dashboard

{/* Contenido que carga rápido */}

Contenido inmediato

{/* Contenido que se hace stream cuando esté listo */} }>

); } ``` ## Route Groups Organiza rutas sin afectar la URL: ``` app/ ├── (marketing)/ │ ├── layout.tsx │ ├── page.tsx │ └── about/ │ └── page.tsx ├── (shop)/ │ ├── layout.tsx │ ├── products/ │ └── cart/ └── (dashboard)/ ├── layout.tsx ├── analytics/ └── settings/ ``` ```tsx // app/(marketing)/layout.tsx export default function MarketingLayout({ children, }: { children: React.ReactNode; }) { return (

{children}

); } ``` ## Intercepting Routes Para modales y overlays: ``` app/ ├── @modal/ │ └── (.)photo/ │ └── [id]/ │ └── page.tsx ├── photo/ │ └── [id]/ │ └── page.tsx └── layout.tsx ``` ```tsx // app/layout.tsx export default function Layout({ children, modal, }: { children: React.ReactNode; modal: React.ReactNode; }) { return ( {children} {modal} ); } // app/@modal/(.)photo/[id]/page.tsx export default function PhotoModal({ params, }: { params: { id: string }; }) { return (

); } ``` ## API Routes ```tsx // app/api/posts/route.ts import { NextRequest, NextResponse } from 'next/server'; export async function GET(request: NextRequest) { const searchParams = request.nextUrl.searchParams; const query = searchParams.get('query'); // Lógica para obtener posts const posts = await getPosts(query); return NextResponse.json({ posts }); } export async function POST(request: NextRequest) { const body = await request.json(); // Validar y crear post const newPost = await createPost(body); return NextResponse.json(newPost, { status: 201 }); } // app/api/posts/[id]/route.ts export async function GET( request: NextRequest, { params }: { params: { id: string } } ) { const post = await getPost(params.id); if (!post) { return NextResponse.json( { error: 'Post not found' }, { status: 404 } ); } return NextResponse.json(post); } ``` ## Metadata API ```tsx // app/blog/[slug]/page.tsx import type { Metadata } from 'next'; interface Props { params: { slug: string }; } export async function generateMetadata({ params }: Props): Promise { const post = await getPost(params.slug); return { title: post.title, description: post.excerpt, openGraph: { title: post.title, description: post.excerpt, images: [post.coverImage], }, }; } export default async function BlogPost({ params }: Props) { const post = await getPost(params.slug); return (

{post.title}

); } ``` ## Mejores prácticas ### 1. Usa Server Components por defecto Solo añade `'use client'` cuando necesites interactividad del lado del cliente. ### 2. Optimiza el bundle ```tsx // Importación dinámica para Client Components pesados import dynamic from 'next/dynamic'; const HeavyChart = dynamic(() => import('./HeavyChart'), { loading: () =>

Cargando gráfico...

, ssr: false }); ``` ### 3. Maneja errores adecuadamente ```tsx // app/error.tsx 'use client'; export default function GlobalError({ error, reset, }: { error: Error; reset: () => void; }) { return (

¡Algo salió muy mal!

); } ``` ### 4. Usa TypeScript ```tsx // types/blog.ts export interface Post { id: string; title: string; content: string; publishedAt: Date; author: { name: string; avatar: string; }; } // app/blog/page.tsx export default async function BlogPage(): Promise { const posts: Post[] = await getPosts(); // ... } ``` ## Conclusión El App Router de Next.js 14 representa un gran salto hacia adelante en el desarrollo de aplicaciones React modernas. Con Server Components, layouts anidados, y mejor manejo de estados de carga y error, podemos crear aplicaciones más rápidas y con mejor experiencia de usuario. ### Recursos adicionales - [Documentación oficial de Next.js](https://nextjs.org/docs) - [React Server Components](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) - [Ejemplos en GitHub](https://github.com/vercel/next.js/tree/canary/examples) ¡Espero que esta guía te ayude a dominar el App Router de Next.js 14! ¿Qué característica te parece más interesante?

Artículos relacionados

Cómo crear componentes reutilizables en React

TypeScript en 2024: Nuevas características y mejores prácticas