Next.js y el Arte de Optimizar el SEO de tu Aplicación

Las aplicaciones Next.js pueden sufrir en SEO si no gestionamos bien las rutas.

El truco

// ANTES
// Solo renderizado estático, todas las rutas pre-generadas
export async function getStaticProps() {
  // Fetch data...
  return { props: { data } };
}

// DESPUÉS
// Implementando rutas dinámicas para mayor flexibilidad y SEO
import { useRouter } from 'next/router';

export async function getStaticPaths() {
  // Fetch posibles rutas dinámicas
  const paths = [{ params: { id: '1' } }, { params: { id: '2' } }];
  return { paths, fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
  // Fetch data específica para cada ruta
  const data = await fetchData(params.id);
  return { props: { data } };
}

Al implementar getStaticPaths y getStaticProps, optimizamos el SEO al pre-renderizar rutas específicas, mientras que rutas no anticipadas se gestionan con fallback. Esto asegura que las páginas están optimizadas para motores de búsqueda y se cargan rápidamente para los usuarios.

Aprovechando el poder de las rutas dinámicas en Next.js, mejoramos el rendimiento y el SEO de nuestra aplicación.