馃帹 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