Guía paso a paso: crea tu proyecto con Next.js 16

Gabriel Gómez Gómez ·

Guía paso a paso: crea tu proyecto con Next.js 16

  • Cuando inicio un proyecto nuevo con Next.js 16, no solo pienso en levantar una aplicación rápido. También me interesa que el proyecto quede ordenado desde el principio, que sea fácil de mantener y que pueda crecer sin convertirse en una estructura difícil de entender.

  • Por eso sigo una metodología clara: crear el proyecto con una configuración limpia, usar src/, trabajar con App Router, mantener una estructura modular y dejar una base preparada para escalar.

  • Esta configuración me permite trabajar con componentes organizados, rutas claras, estilos controlados con CSS Modules y una arquitectura compatible con proyectos institucionales, portafolios, dashboards o aplicaciones conectadas a una API.

  • 1. Verifico mi versión de Node.js

  • Antes de crear el proyecto, reviso que mi entorno tenga una versión compatible de Node.js.

  • BASH
    node -v

  • Esto me permite confirmar que puedo trabajar sin problemas con las versiones actuales de Next.js y evitar errores desde la instalación.

  • 2. Creo el proyecto con create-next-app

  • Para crear el proyecto, uso el siguiente comando:

  • BASH
    npx create-next-app@latest nombre-del-proyecto

  • Ejemplo:

  • BASH
    npx create-next-app@latest mi-proyecto-next

  • Este comando inicia un asistente en terminal que me permite definir la configuración inicial del proyecto.

  • 3. Selecciono si quiero usar la configuración recomendada

  • Al iniciar el asistente, Next.js puede preguntar si quiero usar la configuración recomendada o personalizar el proyecto.

  • TXT
    What is your project named? mi-proyecto-next
Would you like to use the recommended Next.js defaults?
  Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, AGENTS.md
  No, reuse previous settings
  No, customize settings - Choose your own preferences

  • En mi caso, normalmente elijo personalizar la configuración, porque prefiero trabajar con JavaScript, CSS Modules y una estructura más controlada desde el inicio.

  • 4. Personalizo la configuración del proyecto

  • Cuando quiero un proyecto con JavaScript, App Router y una estructura limpia, suelo responder de esta forma:

  • TXT
    Would you like to use TypeScript? No
Which linter would you like to use? ESLint
Would you like to use React Compiler? No
Would you like to use Tailwind CSS? No
Would you like your code inside a `src/` directory? Yes
Would you like to use App Router? Yes
Would you like to customize the import alias? No

  • Uso esta configuración porque me permite trabajar de forma ordenada sin agregar herramientas que no necesito desde el inicio.

  • 5. Decido si incluyo AGENTS.md

  • En versiones recientes del asistente también puede aparecer una pregunta relacionada con AGENTS.md. Este archivo sirve como guía para asistentes de código o agentes de IA dentro del proyecto.

  • TXT
    Would you like to include AGENTS.md to guide coding agents to write up-to-date Next.js code? Yes / No

  • Si el proyecto lo voy a trabajar con apoyo de herramientas de IA o quiero dejar instrucciones internas para mantener consistencia, puedo seleccionar Yes. Si quiero una estructura más mínima, puedo seleccionar No.

  • Para proyectos personales, portafolios o pruebas rápidas, puedo omitirlo. Para proyectos más grandes o colaborativos, sí puede ser útil incluirlo.

  • 6. Configuración que normalmente recomiendo para mi flujo

  • Para mi forma de trabajar, una configuración base sólida sería la siguiente:

  • TXT
    TypeScript: No
Linter: ESLint
React Compiler: No
Tailwind CSS: No
src/ directory: Yes
App Router: Yes
Customize import alias: No
Import alias: @/*
AGENTS.md: Opcional

  • Con esto el proyecto queda preparado para trabajar con JavaScript, rutas modernas con App Router, imports limpios usando @/* y estilos separados mediante CSS Modules.

  • 7. Entro a la carpeta del proyecto

  • Después de crear el proyecto, entro a la carpeta generada:

  • BASH
    cd mi-proyecto-next

  • 8. Levanto el servidor de desarrollo

  • Para iniciar el proyecto en modo desarrollo, ejecuto:

  • BASH
    npm run dev

  • Después abro el navegador en:

  • TXT
    http://localhost:3000

  • 9. Reviso la estructura inicial

  • Al usar src/ y App Router, la estructura inicial del proyecto queda más ordenada. Una base común puede verse así:

  • TXT
    mi-proyecto-next/
├── public/
├── src/
│   └── app/
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.js
│       └── page.js
├── eslint.config.mjs
├── jsconfig.json
├── next.config.mjs
├── package.json
└── README.md

  • A partir de esta base puedo crear carpetas como components, shared, styles, utils o services, dependiendo del tamaño y objetivo del proyecto.

  • 10. Estructura recomendada para seguir creciendo

  • Para un proyecto de portafolio, landing page o aplicación institucional, normalmente puedo organizar el código de esta manera:

  • TXT
    src/
├── app/
│   ├── layout.js
│   ├── page.js
│   └── globals.css
├── components/
│   └── NombreComponente/
│       ├── NombreComponente.js
│       └── NombreComponente.module.css
├── shared/
│   ├── Navbar.js
│   └── Footer.js
├── data/
│   └── contenido.js
└── utils/
    └── helpers.js

  • Esta estructura me ayuda a separar componentes, datos, estilos y utilidades. Así evito que todo quede mezclado dentro de app/ y puedo mantener el proyecto más limpio conforme crece.

  • 11. Creo mis primeros componentes

  • Cuando agrego un componente nuevo, prefiero colocarlo dentro de una carpeta propia junto con su archivo CSS Module.

  • TXT
    components/
└── Hero/
    ├── Hero.js
    └── Hero.module.css

  • Esto me permite mantener cada componente aislado, fácil de mover, reutilizar o modificar sin afectar otras secciones del proyecto.

  • 12. Uso CSS Modules para mantener estilos controlados

  • Como no uso Tailwind en esta configuración, trabajo con CSS Modules para tener estilos encapsulados por componente.

  • JSX
    import styles from "./Hero.module.css";

export default function Hero() {
  return (
    <section className={styles.hero}>
      <h1>Mi proyecto en Next.js 16</h1>
    </section>
  );
}

  • Este enfoque evita conflictos de nombres entre clases y hace que el mantenimiento visual sea más claro.

  • Conclusión

  • Crear un proyecto con Next.js 16 es sencillo, pero hacerlo con una metodología clara desde el inicio ayuda a mantener el proyecto más ordenado, más fácil de escalar y más cómodo de mantener.

  • Mi flujo base es:

  • BASH
    npx create-next-app@latest mi-proyecto-next
cd mi-proyecto-next
npm run dev

  • A partir de ahí, puedo comenzar a construir el proyecto con una estructura limpia, componentes bien organizados, estilos controlados con CSS Modules y una base preparada para crecer conforme se agreguen nuevas páginas, secciones, datos y conexiones con APIs.