Instalación de Next.js y puesta en producción

01Qué es Next.js y quién debería usarlo

Next.js es un framework de aplicaciones web construido sobre React. Mientras que React solo dibuja componentes de interfaz, Next.js trae ya resueltas necesidades como el enrutamiento, la generación de páginas en el servidor, la salida de páginas estáticas, la optimización de imágenes y los endpoints de API.

Su mayor diferencia es que puede generar las páginas como HTML en el servidor. Los buscadores y las vistas previas de redes sociales ven el contenido directamente y la primera carga es más rápida. Por eso es más adecuado que las aplicaciones de una sola página para webs corporativas centradas en el contenido, catálogos y blogs.

Si solo desarrolla un panel de administración que requiere inicio de sesión, puede bastar una estructura más sencilla; para ese caso consulte nuestra guía de instalación de React con Vite.

02Requisitos previos

Next.js es exigente con las versiones de Node.js que admite y, en las nuevas versiones principales, deja de dar soporte a las versiones antiguas de Node. Por eso lo más fiable es instalar la última versión LTS desde nodejs.org.

• La última versión LTS de Node.js y npm (viene con Node); también se pueden usar pnpm, yarn o bun.
• Un editor de código; para instalarlo con las extensiones recomendadas, consulte el artículo de instalación de VS Code.
• Git y un repositorio remoto (GitHub, GitLab): los procesos de despliegue suelen alimentarse del repositorio.
• Si va a instalarlo en su propio servidor, un servidor Linux con acceso SSH.

03Instale y verifique Node.js

La instalación de Node.js presenta pequeñas diferencias según el sistema operativo; los comandos de Next.js, en cambio, son iguales en todas partes después de instalarlo.

Windows

Descargue el instalador LTS de nodejs.org o use winget; después vuelva a abrir el terminal.

winget install OpenJS.NodeJS.LTS
node -v

macOS

Puede instalarlo con el paquete oficial o con Homebrew.

brew install node
node -v

Linux

La versión de los repositorios de la distribución puede quedarse anticuada; es más seguro instalarlo con nvm.

nvm install --lts
nvm use --lts
node -v

04Crear el proyecto con create-next-app

El asistente de create next app es la herramienta oficial de inicio y instala de una vez todos los paquetes necesarios. Al ejecutar el comando, pregunta el nombre del proyecto y algunas opciones; si tiene dudas, aceptar los valores predeterminados recomendados es un buen comienzo.

npx create-next-app@latest benim-sitem
cd benim-sitem
npm run dev

05Entender la estructura del App Router

El App Router de Next.js genera el enrutamiento a partir de la estructura de carpetas. Cada carpeta dentro de la carpeta app es un segmento de la dirección; el archivo page.tsx de esa carpeta define la página y layout.tsx define la estructura común de esa sección.

En el App Router, los componentes son por defecto componentes de servidor: se ejecutan en el servidor, pueden obtener datos directamente y no envían JavaScript al navegador. Los componentes que necesitan interacción, como clics o estado de formularios, se convierten en componentes de cliente escribiendo la directiva use client al principio.

Metadatos para SEO

Cada página o archivo de layout puede definir el título, la descripción y las etiquetas Open Graph exportando un objeto metadata. En las páginas dinámicas se usa la función generateMetadata. Esta estructura facilita gestionar a nivel de página las etiquetas necesarias para un diseño web SEO.

06Build y variables de entorno

Antes de publicar, genere la compilación de producción con npm run build. La salida del build lista si cada página se genera de forma estática o dinámica; que una página que no esperaba salga como dinámica es una señal temprana de carga innecesaria en el servidor.

Las variables de entorno se guardan en el archivo .env.local. Solo las variables con el prefijo NEXT_PUBLIC_ se envían al navegador; la contraseña de la base de datos y las claves secretas de API deben quedarse sin prefijo y usarse solo en el código del servidor.

npm run build
npm run start

07Cómo generar cada página

La fuerza de Next.js está en poder elegir una estrategia de renderizado distinta para cada página. Una mala elección significa o bien un coste de servidor innecesario o bien contenido obsoleto; por eso, justo después de la instalación, clasifique sus páginas según su tipo.

Las páginas que cambian poco, como «Sobre nosotros», servicios y contacto, son ideales para la generación estática: se generan una vez durante la compilación y se sirven desde la CDN en menos de un segundo. Casi la totalidad de las páginas de una web corporativa pertenece a este grupo.

Para las páginas que se actualizan de vez en cuando, como el blog y los listados de productos, regenerar a intervalos (revalidate) es un buen equilibrio. En cambio, el panel de usuario, el carrito o las pantallas de reservas que muestran disponibilidad al instante deben generarse en el servidor en cada petición. Este último grupo es un escenario habitual en el software sectorial, como el de hoteles y agencias, y obliga a pensar a la vez el diseño de la base de datos, la caché y la autorización.

08Opciones de despliegue de Next.js

Para el despliegue de Next.js hay tres vías habituales. Cuál elegir depende del tráfico, del presupuesto, de la ubicación de los datos y de la experiencia de su equipo en la gestión de servidores.

• Vercel: la plataforma de la empresa que desarrolla Next.js. Conecta el repositorio y en cada envío se genera automáticamente la compilación y una dirección de vista previa.
• Su propio servidor Node.js: la aplicación que se ejecuta con npm run start se mantiene en marcha con un gestor de procesos como PM2, con Nginx por delante. Ofrece control total, pero la responsabilidad del mantenimiento es suya.
• Exportación estática: con el ajuste output: 'export' en el archivo next.config, la web se convierte en archivos HTML planos. Las funciones dinámicas que requieren componentes de servidor no funcionan en este modo.

Publicación con PM2 y Nginx

En un servidor basado en Ubuntu, después de instalar Node.js, descargue el proyecto del repositorio, compílelo e inícielo con PM2. El comando startup de PM2 le pide que ejecute con sudo la línea que imprime en pantalla; esa línea hace que la aplicación se inicie automáticamente cuando el servidor se reinicie.

git clone https://github.com/kullanici/benim-sitem.git
cd benim-sitem
npm ci
npm run build
sudo npm install -g pm2
pm2 start npm --name benim-sitem -- start
pm2 save
pm2 startup

server {
    listen 80;
    server_name ornek.com www.ornek.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

09Errores frecuentes y soluciones

La mayoría de los errores que aparecen en los proyectos Next.js se deben a incompatibilidades de versión o a mezclar código de servidor y de cliente. Para los problemas con la gestión de paquetes, también le ayudará la guía de comandos de npm.