Next.js ha revolucionado el desarrollo de React con sus potentes funciones y su diseño intuitivo. Con el lanzamiento de Next.js 13, el nuevo App Router ha tomado protagonismo, ofreciendo a los desarrolladores una forma más flexible y potente de estructurar sus aplicaciones. En esta guía completa, profundizaremos en App Router, explorando sus características y mejores prácticas. Para ilustrar estos conceptos, usaremos un ejemplo del mundo real: un proyecto de generación de cartas de presentación.

Entendiendo el enrutador de aplicaciones

El App Router en Next.js 13 representa un cambio de paradigma en cómo abordamos el enrutamiento en las aplicaciones React. A diferencia del Pages Router anterior, el App Router utiliza un enfoque basado en un sistema de archivos que se alinea más estrechamente con la forma en que modelamos mentalmente la estructura de nuestra aplicación.

Beneficios clave del enrutador de aplicaciones:

1. Enrutamiento intuitivo basado en archivos: las rutas se definen mediante la estructura de archivos en el directorio de su aplicación.
2. Rendimiento mejorado: compatibilidad integrada con los componentes del servidor React.
3. Flexibilidad mejorada: implementación más sencilla de diseños, enrutamiento anidado y más.
4. Optimizaciones integradas: división automática de código y captación previa.

Primeros pasos con el enrutador de aplicaciones

Comencemos configurando un nuevo proyecto Next.js 13 con App Router. Abre tu terminal y ejecuta:

npx create-next-app@latest my-app
cd my-app

Cuando se te solicite, asegúrate de seleccionar "Sí" en "¿Quieres usar App Router?".

Enrutamiento básico con App Router

En App Router, cada carpeta representa un segmento de ruta. Creemos una estructura simple para nuestro generador de cartas de presentación:

app/
├── page.tsx
├── layout.tsx
├── cover-letter/
│   └── page.tsx
└── templates/
    └── page.tsx

Aquí, page.tsx en la carpeta raíz de la aplicación representa la página de inicio. Las carpetas de cartas de presentación y plantillas crean rutas para esas páginas respectivas.

En aplicación/página.tsx:

export default function Home() {
  return 
Welcome to the Cover Letter Generator
;
}

En app/cover-letter/page.tsx:

export default function CoverLetter() {
  return 
Create Your Cover Letter
;
}

Con esta estructura, puede navegar a / para la página de inicio y /cover-letter para la página de creación de la carta de presentación.

Diseños y rutas anidadas

Una de las características poderosas de App Router es la capacidad de crear diseños anidados. Agreguemos un diseño común para nuestra aplicación.

En aplicación/layout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
        {children}
      
    
  );
}

Este diseño se aplicará a todas las páginas de nuestra aplicación, proporcionando una estructura de navegación consistente.

Rutas dinámicas

Las rutas dinámicas son cruciales para las aplicaciones que generan contenido basado en parámetros. Implementemos una ruta dinámica para ver plantillas de cartas de presentación específicas.

Crear un nuevo archivo: app/templates/[id]/page.tsx:

export default function Template({ params }: { params: { id: string } }) {
  return 
Template {params.id}
;
}

Ahora, navegar a /templates/1 o /templates/formal mostrará este componente con la identificación respectiva.

Componentes del servidor y obtención de datos

Next.js 13 presenta los componentes del servidor React, lo que nos permite recuperar datos en el servidor. Implementemos esto en nuestro generador de cartas de presentación.

En app/cover-letter/page.tsx:

async function getTemplates() {
  // Simulate API call
  return [
    { id: 1, name: 'Professional' },
    { id: 2, name: 'Creative' },
    { id: 3, name: 'Academic' },
  ];
}

export default async function CoverLetter() {
  const templates = await getTemplates();

  return (
    

      
Create Your Cover Letter
      

        {templates.map(template => (
          
{template.name}
        ))}
      
    
  );
}

Este componente recupera datos en el servidor, mejorando el rendimiento y el SEO.

Vinculación y navegación

Para la navegación del lado del cliente, utilice el componente Enlace de Next.js. Actualiza tu aplicación/layout.tsx:

import Link from 'next/link';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
        {children}
      
    
  );
}

Aplicación en el mundo real: generador de cartas de presentación

Ahora que hemos cubierto los conceptos básicos, veamos cómo se aplican estos conceptos en un proyecto del mundo real. El proyecto Resumate-NextJS en GitHub es un excelente ejemplo de un generador de cartas de presentación creado con Next.js.

Conclusiones clave de este proyecto:

1. Enrutamiento estructurado: el proyecto utiliza una estructura de enrutamiento clara, separando las preocupaciones entre diferentes páginas y componentes.

2. Renderizado del lado del servidor: utiliza las capacidades SSR de Next.js para mejorar el rendimiento y el SEO.

3. Rutas API: implementa rutas API para la lógica del lado del servidor, lo que demuestra cómo manejar el envío de formularios y el procesamiento de datos.

4. Estilo: utiliza Tailwind CSS para un diseño de interfaz de usuario limpio y responsivo.

5. Administración de estado: implementa una API de contexto para administrar el estado de la aplicación en todos los componentes.

Conceptos avanzados

A medida que te sientas más cómodo con App Router, explora estos conceptos avanzados:

1. Rutas paralelas: renderiza varias páginas en el mismo diseño.
2. Interceptación de rutas: personaliza el comportamiento de enrutamiento para escenarios específicos.
3. Manejadores de ruta: cree puntos finales de API dentro de la estructura de App Router.
4. Middleware: agregue lógica personalizada del lado del servidor a sus rutas.

Mejores prácticas y consejos

1. Aproveche los componentes del servidor: utilícelos para obtener datos y realizar cálculos pesados.
2. Optimizar imágenes: utilice el componente de imagen Next.js para la optimización automática.
3. Implementar mejoras progresivas: asegúrese de que su aplicación funcione sin JavaScript para una mejor accesibilidad.
4. Utilice TypeScript: para mejorar la experiencia del desarrollador y la calidad del código.
5. Actualizaciones periódicas: mantenga actualizada su versión de Next.js para beneficiarse de las últimas funciones y optimizaciones.

Conclusión

El enrutador de aplicaciones Next.js 13 representa un importante paso adelante en el desarrollo de aplicaciones React. Al proporcionar un sistema de enrutamiento intuitivo basado en un sistema de archivos y aprovechar el poder de los componentes de React Server, permite a los desarrolladores crear aplicaciones web eficientes, escalables y fáciles de mantener.

Como se demostró con el ejemplo del generador de cartas de presentación, App Router simplifica el proceso de creación de aplicaciones web complejas y dinámicas. Ya sea que esté creando un sitio de cartera simple o una aplicación web compleja, dominar App Router mejorará significativamente su experiencia de desarrollo Next.js.

Recuerda, la mejor manera de aprender es haciendo. Clona el repositorio Resumate-NextJS, experimenta con el código e intenta implementar tus propias funciones utilizando App Router. ¡Feliz codificación!