Instalación
Requisitos del sistema:
- Node.js 16.14 o superior.
- 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:
npx create-next-app@latestDurante la instalación, verás los siguientes prompts:
¿Cómo quieres llamar a tu proyecto? my-app
¿Quieres usar TypeScript? No / Sí
¿Quieres usar ESLint? No / Sí
¿Quieres usar Tailwind CSS? No / Sí
¿Quieres usar el directorio `src/`? No / Sí
¿Quieres usar App Router? (recomendado) No / Sí
¿Quieres personalizar el alias de importación por defecto (@/*)? No / Sí
¿Qué alias de importación quieres configurar? @/*Después de los prompts, create-next-app creará una carpeta con el nombre de tu proyecto e instalará las dependencias necesarias.
Dato útil:
- Next.js ahora incluye configuración para TypeScript, ESLint y Tailwind CSS por defecto.
- Opcionalmente puedes usar un directorio
srcen 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 aplicación Next.js, instala los paquetes requeridos:
npm install next@latest react@latest react-dom@latestAbre tu archivo package.json y añade los siguientes scripts:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}Estos scripts corresponden a diferentes etapas del desarrollo de una aplicación:
dev: ejecutanext devpara iniciar Next.js en modo desarrollo.build: ejecutanext buildpara construir la aplicación para producción.start: ejecutanext startpara iniciar un servidor de producción Next.js.lint: ejecutanext lintpara 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 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 añade un archivo layout.tsx y page.tsx. Estos se renderizarán cuando el usuario visite la raíz de tu aplicación (/).
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 principal app/page.tsx con contenido inicial:
export default function Page() {
return <h1>¡Hola, Next.js!</h1>
}export default function Page() {
return <h1>¡Hola, Next.js!</h1>
}Dato útil: Si olvidas crear
layout.tsx, Next.js creará automáticamente este archivo al ejecutar el servidor de desarrollo connext 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, añade un archivo index.tsx dentro de tu carpeta pages. Esta será tu página principal (/):
export default function Page() {
return <h1>¡Hola, Next.js!</h1>
}A continuación, añade 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, añade 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.
Dato útil: Aunque puedes usar ambos enrutadores en el mismo proyecto, las rutas en
apptendrán prioridad sobrepages. 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
- Ejecuta
npm run devpara iniciar el servidor de desarrollo. - Visita
http://localhost:3000para ver tu aplicación. - Edita el archivo
app/layout.tsx(opages/index.tsx) y guárdalo para ver los cambios en tu navegador.