📦 Importación y modularización de componentes

07 - Importación y modularización de componentes

Aprende cómo organizar, importar y reutilizar tus componentes en Next.js para mantener tu proyecto limpio, escalable y fácil de mantener.

• 📦 ¿Qué son los componentes?
• 📥 Importación y exportación
• 🧩 Modularización del proyecto
• 💻 Ejemplo completo

---

📦 ¿Qué son los componentes?

En Next.js y React, un componente es una pieza independiente y reutilizable de la interfaz. Por ejemplo, una tarjeta, un botón o un menú pueden ser componentes. Cada componente tiene su propio código, estructura y estilos, lo que facilita el mantenimiento.

Ejemplo visual:

🧩 Tarjeta de usuario

Un ejemplo de componente independiente.

---

📥 Importación y exportación

Para usar un componente en otra parte del proyecto, primero se exporta desde su archivo y luego se importa donde se necesite.

// components/Boton.js
export default function Boton() {
  return <button className="bg-blue-600 text-white px-4 py-2 rounded">Click Aquí</button>;
}

// app/page.js
import Boton from '../components/Boton';

export default function Home() {
  return (
    <main className="p-6 text-center">
      <h2 className="text-2xl font-bold mb-4">Página principal</h2>
      <Boton />
    </main>
  );
}
      

🎨 Resultado visual:

Explicación:

• export default function Boton(): exporta el componente para poder usarlo en otros archivos.
• import Boton from '../components/Boton': lo importa en la página principal.
• <Boton />: usa el componente como si fuera una etiqueta HTML.

---

🧩 Modularización del proyecto

La modularización consiste en dividir el proyecto en partes pequeñas y reutilizables. En lugar de tener todo el código en un solo archivo, cada componente cumple una función específica.

📁 Estructura recomendada:

/app
 ├── page.js
 ├── layout.js
/components
 ├── Boton.js
 ├── Header.js
 ├── Footer.js
      

Así, puedes importar los componentes en cualquier parte del proyecto sin repetir código.

Ejemplo visual de modularización:

Header

Contenido principal

Footer

---

💻 Ejemplo completo (proyecto modular)

Código modular

// components/Header.js
export default function Header() {
  return <header className="bg-blue-600 text-white p-4 text-center">Mi Sitio con Next.js</header>;
}

// components/Footer.js
export default function Footer() {
  return <footer className="bg-gray-200 text-center p-3 mt-4">© 2025 Todos los derechos reservados</footer>;
}

// app/page.js
import Header from '../components/Header';
import Footer from '../components/Footer';

export default function Home() {
  return (
    <main className="min-h-screen flex flex-col">
      <Header />
      <div className="flex-grow flex items-center justify-center">
        <h2 className="text-2xl font-bold text-blue-700">Bienvenido a Next.js</h2>
      </div>
      <Footer />
    </main>
  );
}
        

🧭 Resultado visual:

Header

Contenido principal

Footer

← Volver al índice