🧭 Rutas dinámicas y pre-renderizado con Next.js

🧭 Rutas dinámicas y pre-renderizado

Aprende a crear rutas dinámicas para tus posts y cómo pre-renderizar las páginas para mejorar SEO y rendimiento.

---

📌 Índice de esta entrada:

1. 📂 Qué son las rutas dinámicas en Next.js
2. 📄 Creando rutas dinámicas para cada post
3. ⚡ Pre-renderizado con getStaticProps y getStaticPaths
4. 🔄 Probando las páginas pre-renderizadas

---

📂 Qué son las rutas dinámicas en Next.js

Las rutas dinámicas permiten generar páginas según un parámetro de URL. Por ejemplo, /posts/primer-post se genera automáticamente a partir del nombre del archivo.

Next.js usa carpetas entre corchetes [param] para definir rutas dinámicas:

app/posts/[slug]/page.tsx
    

📄 Creando rutas dinámicas para cada post

En app/posts/[slug]/page.tsx, usamos el parámetro slug para cargar el post correcto:

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

export default function Post({ params }: { params: { slug: string } }) {
  const postsDirectory = path.join(process.cwd(), 'app/posts');
  const filePath = path.join(postsDirectory, `${params.slug}.md`);
  const fileContents = fs.readFileSync(filePath, 'utf8');
  const { data, content } = matter(fileContents);

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">{data.title}</h1>
      <p className="text-gray-700">{content}</p>
    </div>
  );
}
    

⚡ Pre-renderizado con getStaticProps y getStaticPaths

Next.js permite **pre-renderizar** páginas en el momento de la compilación. Esto significa que tus posts estarán listos como HTML estático, mejorando velocidad y SEO.

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

export async function getStaticPaths() {
  const postsDirectory = path.join(process.cwd(), 'app/posts');
  const filenames = fs.readdirSync(postsDirectory);

  const paths = filenames.map(name => ({
    params: { slug: name.replace('.md', '') }
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const postsDirectory = path.join(process.cwd(), 'app/posts');
  const filePath = path.join(postsDirectory, `${params.slug}.md`);
  const fileContents = fs.readFileSync(filePath, 'utf8');
  const { data, content } = matter(fileContents);

  return { props: { data, content } };
}
    

Con esto, cada post se genera de manera estática y se sirve rápido al usuario.

🔄 Probando las páginas pre-renderizadas

Ejecuta el servidor de desarrollo:

npm run dev
    

Abre http://localhost:3000/posts/primer-post y verifica que tu post se cargue correctamente, ahora ya como página pre-renderizada.

---

💡 Consejo: Las rutas dinámicas y el pre-renderizado son la base de cualquier blog moderno en Next.js.

← Volver al índice