Lección 03. Estructura de proyecto y archivos internos.
Una vez tenemos nuestro proyecto de Next.js creado, veamos su estructura interior.
Desplegar entorno de desarrollo._
Para el despliegue de nuestro entorno de desarrollo, podemos utilizar el comando:
nnpm run devNota: Permitiéndonos, visualizar en nuestro navegador el proyecto creado. Esto por medio de una URL proporcionada por el framework al desplegar el proyecto en su propio servidor local.
En su mayoría, la URL a devolver es:
Estructura interna de proyecto._
Dentro de nuestro proyecto, encontraremos una estructura interna similar a:
|- next/ → Carpeta opcional, depende del setup. A veces se usa para configuraciones especiales.
|- node_modules/ → Todas las dependencias del proyecto instaladas por npm.
|- public/ → Archivos estáticos accesibles públicamente (imágenes, iconos, etc).
|- src/ → Carpeta principal donde vive tu aplicación.
|- app/ → Rutas, páginas y layouts de tu app (usando el App Router de Next.js).
|- favicon.ico → Icono del sitio.
|- global.css → Estilos globales de tu app.
|- layout.tsx → Layout raíz compartido por todas las rutas/páginas.
|- page.tsx → Página principal ("/") del sitio.
|- .gitignore → Archivos y carpetas que Git debe ignorar (como node_modules, .env, etc).
|- eslint.config.mjs → Configuración de ESLint (linter de código para JavaScript/TypeScript).
|- next.env.d.ts → Define los tipos de variables de entorno para TypeScript.
|- next.config.ts → Configuración principal de Next.js (dominios permitidos, rutas, etc).
|- package-lock.json → Archivo generado por npm para fijar versiones exactas de dependencias.
|- package.json → Archivo que describe tu proyecto, scripts y dependencias.
|- postcss.config.mjs → Configuración para PostCSS (transformador de CSS).
|- README.md → Documentación inicial del proyecto.
|- tsconfig.json → Configuración de TypeScript (rutas, strict mode, etc).Archivos de renderizado de proyecto._
Entre todos los directorios y archivos del proyecto inicial existen 2 a resaltar, los cuales son:
layout.tsx.
page.tsx.
Nota: Si seleccionamos que nuestro proyecto NO utilice TypeScript, los archivos funcionaran con .jsx.
Estos son los archivos de la App; A continuación, se explican un poco mas a detalle:
layout.tsx._
// Importamos el tipo Metadata para definir los metadatos del sitio
import type { Metadata } from "next";
// Importamos dos fuentes desde Google Fonts usando el sistema de fuentes de Next.js
import { Geist, Geist_Mono } from "next/font/google";
// Importamos estilos globales CSS
import "./globals.css";
// Cargamos la fuente Geist (sans serif) y le asignamos una variable CSS
const geistSans = Geist({
variable: "--font-geist-sans", // Nombre de la variable CSS
subsets: ["latin"], // Subconjuntos de caracteres usados
});
// Cargamos la fuente Geist_Mono (monoespaciada) con su variable
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
// Definimos los metadatos del sitio (SEO, pestaña del navegador, etc.)
export const metadata: Metadata = {
title: "Create Next App", // Título de la página
description: "Generated by create next app", // Descripción de la página
};
// Layout raíz de toda la aplicación (envuelve todas las páginas)
export default function RootLayout({
children, // Recibe los componentes hijos (las páginas)
}: Readonly<{
children: React.ReactNode; // Tipado estricto en TypeScript
}>) {
return (
// Define el idioma del documento HTML
<html lang="en">
<body
// Aplicamos las variables de fuente como clases y usamos antialiasing para texto más suave
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
${"{children}"}
{/* Renderizamos el contenido de cada página aquí */}
</body>
</html>
);
}Este archivo actúa como el marco HTML base de toda tu App Next.js. Aquí puedes añadir también un <header>, <footer>, un proveedor de contexto, un <footer>, <ThemeProvider>, etc., si lo necesitas.
page.tsx._
// Importa el componente de imagen optimizada de Next.js
import Image from "next/image";
// Componente principal de la página (ruta '/')
export default function Home() {
return (
// Contenedor principal con Tailwind: grid de 3 filas y centrado vertical/horizontal
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
{/* Contenido principal de la página en la fila del medio */}
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
{/* Logo de Next.js */}
<Image
className="dark:invert" // Invierte colores si el modo oscuro está activo
src="/next.svg" // Ruta del archivo dentro de /public
alt="Next.js logo"
width={180}
height={38}
priority // Carga prioritaria (mejora el rendimiento)
/>
{/* Lista de pasos con fuente monoespaciada */}
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2 tracking-[-.01em]">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
src/app/page.tsx
</code>
.
</li>
<li className="tracking-[-.01em]">
Save and see your changes instantly.
</li>
</ol>
{/* Botones de acción: Deploy y Docs */}
<div className="flex gap-4 items-center flex-col sm:flex-row">
{/* Botón para desplegar en Vercel */}
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
{/* Botón para ver la documentación de Next.js */}
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
{/* Pie de página con enlaces */}
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
{/* Enlace a la sección Learn */}
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
{/* Enlace a plantillas de Vercel */}
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
{/* Enlace a la web oficial de Next.js */}
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
</div>
);
}Donde:
Muestra una página de bienvenida con instrucciones básicas.
Utiliza Image de Next.js para imágenes optimizadas.
Usa Tailwind CSS para estilos responsive y oscuros.
Incluye enlaces útiles para empezar con Next.js y desplegar la app en Vercel.