💬 Layouts y páginas dinámicas

13 - 💬 Layouts y páginas dinámicas en Next.js

Aprende cómo estructurar tu aplicación con layouts reutilizables y cómo crear rutas dinámicas usando corchetes. Veremos ejemplos prácticos con _app.js, getStaticPaths y getStaticProps.

---

🧱 ¿Qué es un layout?

Un layout es una estructura visual que se reutiliza en varias páginas. Por ejemplo: cabecera, menú lateral, pie de página, etc.

Puedes definir un layout global en _app.js o layouts por página.

// pages/_app.js
import Layout from '../components/Layout';

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}
      

Y el componente Layout podría verse así:

// components/Layout.js
export default function Layout({ children }) {
  return (
    <div>
      <header>🌐 Mi sitio Next.js</header>
      <main>{children}</main>
      <footer>© 2025 Todos los derechos reservados</footer>
    </div>
  );
}
      

✅ Ideal para: mantener consistencia visual en todas las páginas.

---

🔄 ¿Qué son las páginas dinámicas?

Las páginas dinámicas permiten crear rutas basadas en datos. Por ejemplo: /productos/1, /productos/2, etc.

Se crean usando corchetes en el nombre del archivo: [id].js

// pages/productos/[id].js
export async function getStaticPaths() {
  const res = await fetch('https://fakestoreapi.com/products');
  const productos = await res.json();

  const paths = productos.map(prod => ({
    params: { id: prod.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://fakestoreapi.com/products/${params.id}`);
  const producto = await res.json();

  return { props: { producto } };
}

export default function Producto({ producto }) {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-3">🛍️ {producto.title}</h1>
      <p>💲{producto.price}</p>
      <p>{producto.description}</p>
    </div>
  );
}
      

🧩 Resultado visual:

🛍️ Producto: Camiseta de algodón

💲Precio: 19.99

📄 Descripción: Camiseta suave y cómoda para uso diario.

Ruta dinámica generada con [id].js

💡 Ideal para: productos, perfiles de usuario, artículos de blog, etc.

---

💡 Consejo: puedes combinar layouts con páginas dinámicas para crear sitios robustos y bien estructurados. Usa getStaticPaths para generar rutas dinámicas en el build y getStaticProps para pasar los datos.

← Volver al índice