🎨 Explorando la estructura del proyecto y los archivos principales
Aprende cómo está organizado tu proyecto Next.js recién creado: carpetas, archivos clave y su función dentro de la aplicación.
📌 Índice de esta entrada:
- 📁 Vista general del proyecto
- 🧱 Carpeta
app/— la base de tu aplicación - 🎨 Archivo
page.tsx— la página principal - 🧩 Archivo
layout.tsx— estructura global - 💅 Archivo
globals.css— estilos globales - 📂 Carpeta
public/— recursos estáticos - ⚙️ Archivos de configuración:
package.json,tsconfig.json,next.config.mjs
📁 Vista general del proyecto
Cuando creas un nuevo proyecto con create-next-app, Next.js genera automáticamente una estructura de archivos como esta:
mi-blog/
│
├── app/
│ ├── page.tsx
│ ├── layout.tsx
│ └── globals.css
│
├── public/
│ └── favicon.ico
│
├── package.json
├── tsconfig.json
├── next.config.mjs
└── README.md
A continuación, analizaremos cada parte y su propósito.
🧱 Carpeta app/
Esta es la carpeta más importante del proyecto. Contiene todas las páginas, componentes y layouts (estructuras base) de tu aplicación.
Dentro de app/, cada carpeta puede representar una ruta en tu sitio.
Por ejemplo:
app/
├── page.tsx → Página principal (ruta "/")
├── about/
│ └── page.tsx → Página secundaria (ruta "/about")
Esto significa que Next.js crea rutas automáticamente según la estructura de carpetas. No necesitas configurar nada manualmente.
🎨 Archivo page.tsx
Este archivo define el contenido principal de la página.
Cuando ejecutas npm run dev y visitas localhost:3000,
lo que ves en pantalla viene directamente de este archivo.
📄 Ejemplo básico:
export default function Home() {
return (
<main>
<h1>¡Bienvenido a mi blog con Next.js!</h1>
<p>Esta es la página principal generada por default.</p>
</main>
);
}
Puedes modificar este archivo para cambiar el contenido de la página principal.
🧩 Archivo layout.tsx
Este archivo define la estructura global que se aplicará a todas las páginas de tu aplicación. Normalmente contiene el encabezado, pie de página y las etiquetas HTML principales.
📄 Ejemplo de layout:
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="es">
<body>
<header>
<h1>Mi Blog con Next.js</h1>
</header>
{children}
<footer>
<p>© 2025 Mi Blog. Todos los derechos reservados.</p>
</footer>
</body>
</html>
);
}
💅 Archivo globals.css
Aquí definimos los estilos globales que se aplican a toda la aplicación. Next.js utiliza este archivo automáticamente, por lo que puedes añadir tus estilos o importar Tailwind CSS.
📄 Ejemplo:
body {
margin: 0;
font-family: system-ui, sans-serif;
background-color: #fafafa;
color: #333;
}
📂 Carpeta public/
Aquí puedes guardar imágenes, íconos o archivos que quieras que sean accesibles públicamente.
Por ejemplo, si agregas una imagen llamada foto.png, podrás acceder a ella desde:
http://localhost:3000/foto.png
⚙️ Archivos de configuración
package.json
Contiene la lista de dependencias, scripts y metadatos del proyecto.
{
"name": "mi-blog",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}
tsconfig.json
Archivo de configuración de TypeScript. Permite ajustar cómo se analiza y compila el código TypeScript.
next.config.mjs
Configuración avanzada del framework. Puedes definir redirecciones, imágenes externas, variables de entorno y más.
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias