Domina Next.js: rutas dinámicas simplificadas

Trabajar con rutas dinámicas en Next.js puede ser confuso si no se aprovechan las herramientas nativas del framework.

El truco

ANTES (ineficiente):

// pages/product/[id].js
import { useRouter } from 'next/router';

const ProductPage = () => {
  const router = useRouter();
  const { id } = router.query;

  if (!id) return <p>Cargando...</p>;

  return <p>Producto ID: {id}</p>;
};

export default ProductPage;

DESPUÉS (eficiente):

// pages/product/[id].js
export async function getStaticPaths() {
  return {
    paths: [], // Define rutas estáticas aquí si las tienes
    fallback: true,
  };
}

export async function getStaticProps({ params }) {
  const { id } = params;
  // Aquí puedes obtener los datos necesarios para el producto
  return {
    props: { id },
  };
}

const ProductPage = ({ id }) => {
  if (!id) return <p>Cargando...</p>;

  return <p>Producto ID: {id}</p>;
};

export default ProductPage;

Utilizar getStaticPaths y getStaticProps en Next.js mejora significativamente el rendimiento al construir rutas dinámicas, generando páginas estáticas en el momento de la construcción y ofreciendo una navegación rápida. El uso de fallback: true permite que las rutas que no se generaron estáticamente se manejen de forma dinámica sin problemas.

Conclusión: Aprovechar las capacidades de generación estática de Next.js no solo mejora el rendimiento, sino que también proporciona una mejor experiencia de usuario.