Páginas de entradas dinámicas ([slug])

Enrutamiento dinámico para entradas

Una lista de entradas no es útil si no se pueden leer. Utilizaremos las Rutas dinámicas de Next.js para generar automáticamente una página única para cada entrada de WordPress.

1. La estructura de directorios

Cree una carpeta anidada dentro de `app` utilizando corchetes:

app/blog/[slug]/page.tsx

La sintaxis `[slug]` indica a Next.js que esta parte de la URL es dinámica. Por ejemplo, `/blog/mi-primera-entrada` coincidirá con este archivo.

2. Recuperación de una entrada individual

En `app/blog/[slug]/page.tsx`, utilice el parámetro de la URL para recuperar los datos específicos:

import { getPostBySlug } from '@/lib/wordpress';
import { notFound } from 'next/navigation';

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);

  if (!post) notFound();

  return (
    <article className="container mx-auto py-12 px-4">
       <h1 className="text-5xl font-extrabold mb-8">{post.title.rendered}</h1>
       <div 
         className="prose lg:prose-xl"
         dangerouslySetInnerHTML={{ __html: post.content.rendered }} 
       />
    </article>
  );
}

3. Conceptos básicos

Parámetros de URL

Next.js pasa un objeto `params` a su componente de servidor que contiene el segmento dinámico. Pasamos `params.slug` directamente a nuestro gestor de API.

La clase `prose`

Dado que WordPress devuelve HTML puro, las clases estándar de Tailwind no se aplicarán a las etiquetas internas. Utilizamos el plugin Tailwind Typography (`prose`) para dar estilo automáticamente a encabezados, párrafos y listas sin necesidad de una intervención manual.