📁 Estructura de carpetas y archivos del proyecto

03 - Estructura de carpetas y archivos del proyecto

Aprende cómo se organiza un proyecto de Next.js, qué función cumple cada carpeta y cómo se relacionan entre sí.

• Estructura básica del proyecto
• Carpetas y archivos clave
• Ejemplo visual
• Ejemplo práctico de archivo

---

Estructura básica del proyecto

Cuando creas un nuevo proyecto con create-next-app, se genera una estructura de carpetas optimizada para trabajar con la nueva arquitectura de App Router (introducida en Next.js 13).

Una estructura típica se ve así:

mi-proyecto/
 ├─ app/
 │   ├─ layout.js
 │   ├─ page.js
 │   ├─ globals.css
 │   └─ (otras rutas y componentes)
 ├─ public/
 │   └─ images/
 ├─ node_modules/
 ├─ package.json
 ├─ next.config.js
 └─ README.md
      

Cada parte cumple una función específica, que veremos a continuación 👇

Carpetas y archivos clave

• app/ → Es el corazón del proyecto. Aquí defines tus páginas, layouts y rutas.
• layout.js → Plantilla general que se comparte entre páginas (menú, header, footer, etc.).
• page.js → Archivo principal de cada ruta. Representa una página renderizable.
• globals.css → Archivo global de estilos.
• public/ → Carpeta donde guardas imágenes, íconos y otros recursos estáticos.
• package.json → Contiene las dependencias y scripts del proyecto.
• next.config.js → Configuración avanzada de Next.js (rutas, imágenes, etc.).

Ejemplo visual

Imagina que app/ es el “esqueleto” de tu sitio. Cada carpeta dentro de app/ representa una sección o página: por ejemplo, app/contacto/page.js sería tu página de contacto.

El archivo layout.js es como una “plantilla maestra”: define los elementos comunes (navbar, footer, estilos globales) que rodean a todas las páginas.

Ejemplo práctico (layout.js)

// Archivo: app/layout.js
import "./globals.css";

export const metadata = {
  title: "Mi Proyecto Next.js",
  description: "Ejemplo de estructura de carpetas y layout base",
};

export default function RootLayout({ children }) {
  return (
    
      
        

          
Mi Proyecto Next.js
        
        
{children}
        

          
© 2025 - Desarrollado con Next.js 🚀
        
      
    
  );
}
        

← Volver al índice