Arquitectura de Componentes para Landing Page en Next.js

Contenido del curso

Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Next.js Avanzado

Autenticación y autorización

Inteligencia Artificial

Performance

Frontend Ops

Next.js es parte de tu nuevo stack

57
Next.js: Backend y Frontend con React Server Components
01:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:12

Arquitectura de Componentes para Landing Page en Next.js

Curso de Next.js 14

Clase 9 de 57

Clase 9 / 57

Recursos

¿Cómo crear una arquitectura profesional para una landing page?

El desarrollo de una landing page efectiva implica una buena organización y componentización del código, lo que permite un mantenimiento a largo plazo y una estructura clara. A continuación, te mostraré cómo estructurar tu proyecto utilizando componentes tanto compartidos como específicos de página.

¿Cuál es el proceso para organizar componentes compartidos?

El primer paso es identificar los componentes que serán compartidos entre diferentes layouts o utilizados en un sistema de diseño común, como botones o tarjetas. Estos componentes deben ser ubicados en una carpeta llamada shared. Por ejemplo, el componente Header es un componente compartido que se clasificará dentro de esta carpeta:

// En la carpeta shared
export const Header = () => {
   return (
      <header>
         {/* Contenido del header */}
      </header>
   );
};

// Proxy para exportar
export * from './Header';

¿Cómo organizar componentes específicos de la página?

Los componentes específicos de una página, como podría ser la landing page del home, se deben agrupar en una carpeta correspondiente al dominio dentro de components. Por ejemplo, para el home, podríamos tener una estructura como la siguiente con componentes Hero, MainProducts y Description:

Crear una carpeta home dentro de components.
Dentro de home, crear los componentes necesarios.

Ejemplo de componente Description:

// Dentro de la carpeta home
export const Description = () => {
   return (
      <section>
         Descripción del producto
      </section>
   );
};

// Proxy para exportar
export * from './Description';

¿Por qué emplear archivos proxy de exportación?

Utilizar un archivo index.ts como proxy para exportar componentes facilita las importaciones en otras partes del proyecto y mejora la legibilidad del código. Esto evita que las rutas de importación sean redundantes y permite cambios más sencillos:

// Archivo proxy: index.ts
export * from './Footer';

Cuando se realice la importación, se hace de manera simplificada:

// Importando el Footer
import { Footer } from '../components/shared';

Esta práctica también ayuda a que, si uno de nuestros componentes falla, el mensaje de error indique exactamente dónde está el error y cuál fue el componente que lo causó.

¿Cómo estructurar una página de manera limpia?

Es importante adoptar una metodología de bloques y componentes encapsulados, evitando código extenso en los layouts. A la larga, esta práctica facilita el mantenimiento y permite cambios o actualizaciones con menor riesgo de errores.

Por ejemplo, para la landing page:

import { Header, Footer } from '../components/shared';
import { Description } from '../components/home';

const HomePage = () => {
   return (
      <>
         <Header />
         {/* Otros componentes como Hero y MainProducts */}
         <Description />
         <Footer />
      </>
   );
};

export default HomePage;

Este enfoque similar a bloques de Lego para la organización del código no solo mantiene la estructura limpia, sino que también hace que el desarrollo sea más flexible y escalable.

Utilizar una arquitectura de componentes bien organizada es vital para el éxito del desarrollo web profesional. Te invito a que apliques estas prácticas para mejorar la calidad y mantenibilidad de tu código en tus proyectos. ¡Sigue adelante y continúa aprendiendo!