Sebastian Gomez

Feb 22, 2022

Updated: Jun 24, 2026

Comenzando con Next.js

¿Quieres aprender a comenzar con Next.js? ¡No busques más! En este post aprenderás dos formas diferentes de comenzar con este potente framework y cómo configurar los scripts necesarios en tu archivo package.json. ¡Vamos a sumergirnos!

La manera más fácil: usando create-next-app

Al igual que existe una herramienta de NPM para iniciar un proyecto con React (create-react-app), también existe una para Next.js: create-next-app. Ya no necesitas instalarla globalmente; lo recomendado es ejecutarla con npx, que siempre descarga la versión más reciente:

# Con npx (recomendado)
$ npx create-next-app@latest

# O con Yarn
$ yarn create next-app

Esto creará una aplicación de ejemplo (un boilerplate) con todas las dependencias requeridas y, en tu package.json, todos los scripts ya configurados listos para usarse.

Qué genera hoy `create-next-app` (Next.js 16): El asistente te preguntará y, por defecto, te configura el App Router (la carpeta app/), TypeScript, ESLint y Turbopack. Es decir, obtienes un proyecto bastante más completo y moderno que el mínimo que armaremos a mano en la siguiente sección.

La otra manera fácil: creando tu proyecto desde cero

Puedes crear la carpeta de tu proyecto e inicializarla como un proyecto vacío de npm:

$ npm init -y

Luego, instala las tres dependencias necesarias:

• React (por supuesto)
• React DOM (también por supuesto)
• Next.js (sí, Next es en realidad un paquete de npm)

# Con npm
$ npm install next react react-dom

# Con Yarn
$ yarn add next react react-dom

Lo siguiente es añadir los scripts necesarios a tu package.json:

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
}

¿Qué hacen estos comandos?

• dev: ejecuta Next.js en modo de desarrollo. (Ojo: el script debe ser next dev; el antiguo "dev": "next" ya no arranca el servidor de desarrollo.)
• build: crea una versión optimizada de producción de tu aplicación.
• start: inicia el servidor de producción.
• lint: ejecuta el linter de Next.js.

Para terminar este camino manual, crea un archivo app/page.tsx mínimo:

export default function Home() {
  return <h1>¡Hola, Next.js! </h1>;
}

Recuerda: Next.js es un framework full stack que necesita estar alojado en una plataforma (servidor) que soporte Node.js.

Conclusiones

En este post aprendimos dos formas diferentes de comenzar con Next.js:

• Usando create-next-app para generar un boilerplate con todas las dependencias requeridas (y los defaults modernos: App Router, TypeScript, ESLint, Turbopack).
• Creando nuestro propio proyecto desde cero e instalando las dependencias necesarias.

Ejercicios para practicar

1. Crea un nuevo proyecto de Next.js utilizando ambas formas mencionadas en este post.
2. Experimenta añadiendo páginas y componentes a tu aplicación Next.js (dentro de la carpeta app/).
3. Investiga cómo desplegar tu aplicación Next.js en un servidor de producción.

Resumen

• Aprendimos a crear un proyecto de Next.js utilizando create-next-app.
• Aprendimos cómo instalar y configurar las dependencias necesarias para un proyecto de Next.js desde cero.
• Configuramos los scripts necesarios en nuestro archivo package.json.

Eso es todo, espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente, o que simplemente te haya ayudado a entender cómo iniciar tu proyecto de Next.js.

Te dejo el enlace al siguiente post sobre Next.js: Enrutando páginas con Next.js.

Déjame un comentario si te sirvió, si quieres añadir alguna opinión o si tienes alguna duda. Y recuerda que si te gustó, también puedes compartirlo usando los links a las redes sociales aquí abajo.