logoNext.js Español
DocumentaciónBlogAprender
Introducción/Primeros pasos/Instalación

Instalación

Requisitos del sistema:

  • Node.js 18.17 o posterior.
  • Compatible con macOS, Windows (incluyendo WSL) y Linux.

Instalación automática

Recomendamos iniciar una nueva aplicación Next.js usando create-next-app, que configura todo automáticamente. Para crear un proyecto, ejecuta:

Terminal
npx create-next-app@latest

Durante la instalación, verás las siguientes preguntas:

Terminal
¿Cómo quieres llamar a tu proyecto? my-app
¿Deseas usar TypeScript? No / Sí
¿Deseas usar ESLint? No / Sí
¿Deseas usar Tailwind CSS? No / Sí
¿Deseas usar el directorio `src/`? No / Sí
¿Deseas usar App Router? (recomendado) No / Sí
¿Deseas personalizar el alias de importación por defecto (@/*)? No / Sí
¿Qué alias de importación deseas configurar? @/*

Después de las preguntas, create-next-app creará una carpeta con el nombre de tu proyecto e instalará las dependencias necesarias.

Si eres nuevo en Next.js, consulta la documentación sobre estructura del proyecto para obtener una visión general de todos los archivos y carpetas posibles en tu aplicación.

Nota importante:

  • Next.js ahora incluye configuración predeterminada para TypeScript, ESLint y Tailwind CSS.
  • Opcionalmente puedes usar un directorio src en la raíz de tu proyecto para separar el código de tu aplicación de los archivos de configuración.

Instalación manual

Para crear manualmente una nueva aplicación Next.js, instala los paquetes requeridos:

Terminal
npm install next@latest react@latest react-dom@latest

Abre tu archivo package.json y agrega los siguientes scripts:

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Estos scripts corresponden a las diferentes etapas del desarrollo de una aplicación:

  • dev: ejecuta next dev para iniciar Next.js en modo desarrollo.
  • build: ejecuta next build para construir la aplicación para producción.
  • start: ejecuta next start para iniciar un servidor de producción Next.js.
  • lint: ejecuta next lint para configurar ESLint integrado en Next.js.

Creación de directorios

Next.js usa enrutamiento basado en sistema de archivos, lo que significa que las rutas en tu aplicación se determinan por cómo estructuras tus archivos.

El directorio app

Para nuevas aplicaciones, recomendamos usar el App Router. Este enrutador te permite usar las últimas características de React y es una evolución del Pages Router basado en feedback de la comunidad.

Crea una carpeta app/, luego agrega un archivo layout.tsx y page.tsx. Estos se renderizarán cuando el usuario visite la raíz de tu aplicación (/).

Estructura de carpeta App

Crea un root layout dentro de app/layout.tsx con las etiquetas requeridas <html> y <body>:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Finalmente, crea una página inicial app/page.tsx con contenido básico:

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

Nota importante: Si olvidas crear layout.tsx, Next.js creará automáticamente este archivo al ejecutar el servidor de desarrollo con next dev.

Aprende más sobre usar App Router.

El directorio pages (opcional)

Si prefieres usar Pages Router en lugar de App Router, puedes crear un directorio pages/ en la raíz de tu proyecto.

Luego, agrega un archivo index.tsx dentro de tu carpeta pages. Esta será tu página de inicio (/):

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

A continuación, agrega un archivo _app.tsx dentro de pages/ para definir el diseño global. Aprende más sobre el archivo App personalizado.

import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Finalmente, agrega un archivo _document.tsx dentro de pages/ para controlar la respuesta inicial del servidor. Aprende más sobre el archivo Document personalizado.

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Aprende más sobre usar Pages Router.

Nota importante: Aunque puedes usar ambos enrutadores en el mismo proyecto, las rutas en app tendrán prioridad sobre pages. Recomendamos usar solo un enrutador en tu nuevo proyecto para evitar confusiones.

La carpeta public (opcional)

Crea una carpeta public para almacenar recursos estáticos como imágenes, fuentes, etc. Los archivos dentro del directorio public pueden ser referenciados por tu código desde la URL base (/).

Ejecutar el servidor de desarrollo

  1. Ejecuta npm run dev para iniciar el servidor de desarrollo.
  2. Visita http://localhost:3000 para ver tu aplicación.
  3. Edita el archivo app/page.tsx (o pages/index.tsx) y guárdalo para ver los cambios actualizados en tu navegador.

Primeros pasos

Aprende a crear aplicaciones web full-stack con Next.js.

Estructura del proyecto

Lista de convenciones para carpetas y archivos en un proyecto de Next.js