Next.js es una aplicación React gratuita, de código abierto y apta para producción que te proporciona bloques de construcción para crear aplicaciones web superrápidas y extremadamente fáciles de usar. Está creada por Vercel y permite crear aplicaciones web basadas en React con renderizado del lado del servidor y generar sitios web estáticos. Next.js puede gestionar todas las configuraciones necesarias para React y proporciona funciones adicionales y optimizaciones para tu aplicación.
Este tutorial te mostrará cómo instalar Next.js con Nginx como proxy inverso en Ubuntu 22.04.
Requisitos previos
- Un servidor que ejecute Ubuntu 22.04.
- Un nombre de dominio válido apuntando a la IP de tu servidor.
- Una contraseña de root configurada en el servidor.
Instalar Node.js
Antes de empezar, Node.js debe estar instalado en tu servidor. Primero, instala todas las dependencias necesarias utilizando el siguiente comando:
apt install curl gnupg2 wget -y
A continuación, añade el repositorio de Node.js con el siguiente comando:
curl -sL https://deb.nodesource.com/setup_18.x | bash -
Una vez añadido el repositorio, puedes instalar Node.js utilizando el siguiente comando:
apt install nodejs -y
Tras la instalación, verifica la versión de Node.js utilizando el siguiente comando:
node -v
Deberías ver la siguiente salida:
v18.12.1
También puedes verificar la versión de NPM utilizando el siguiente comando:
npm -v
Deberías ver la siguiente salida:
8.19.2
Crear una aplicación Next.js
Puedes utilizar la herramienta npx para crear una aplicación Next.js. npx es una herramienta CLI que facilita la instalación y gestión de dependencias alojadas en el registro npm.
Ejecuta el siguiente comando para crear una aplicación Next.js llamada nextapp:
npx create-next-app nextapp
Deberías obtener la siguiente salida:
Need to install the following packages: [email protected] Ok to proceed? (y) y ? Would you like to use TypeScript with this project? … No / Yes ? Would you like to use ESLint with this project? … No / Yes Creating a new Next.js app in /root/nextapp. Using npm. Installing dependencies: - react - react-dom - next - typescript - @types/react - @types/node - @types/react-dom - eslint - eslint-config-next added 237 packages, and audited 238 packages in 20s 78 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Initializing project with template: default Success! Created nextapp at /root/nextapp
Una vez que hayas terminado, puedes continuar con el siguiente paso.
Ejecutar una aplicación Next.js
Después de crear una aplicación Next.js, cambia el directorio a nextapp y ejecútala con el siguiente comando:
cd nextapp npm run dev
Obtendrás la siguiente salida:
> [email protected] dev > next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 event - compiled client and server successfully in 3.2s (154 modules) Attention: Next.js now collects completely anonymous telemetry regarding usage. This information is used to shape Next.js' roadmap and prioritize features. You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: https://nextjs.org/telemetry
Pulsa CTRL+C para detener la aplicación. A continuación, construye la aplicación con el siguiente comando:
npm run build
Obtendrás el siguiente resultado:
> [email protected] build > next build info - Linting and checking validity of types info - Creating an optimized production build info - Compiled successfully info - Collecting page data info - Generating static pages (3/3) info - Finalizing page optimization Route (pages) Size First Load JS ? ? / 4.83 kB 83.7 kB ? ? css/ae0e3e027412e072.css 707 B ? /_app 0 B 78.9 kB ? ? /404 212 B 79.1 kB ? λ /api/hello 0 B 78.9 kB + First Load JS shared by all 79.2 kB ? chunks/framework-0f397528c01bc177.js 45.7 kB ? chunks/main-5cebf592faf0463a.js 31.8 kB ? chunks/pages/_app-05f53d08443c56f6.js 402 B ? chunks/webpack-2369ea09e775031e.js 1.02 kB ? css/ab44ce7add5c3d11.css 247 B λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ? (Static) automatically rendered as static HTML (uses no initial props)
A continuación, inicia la aplicación Next.js utilizando el siguiente comando:
npm start
Deberías ver la siguiente salida:
> [email protected] start > next start ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Pulsa CTRL+C para detener la aplicación.
Gestionar la aplicación Next.js con PM2
PM2 es un gestor de procesos avanzado para aplicaciones Node.js de producción. Te permite mantener vivas las aplicaciones para siempre.
Para instalar el PM2, ejecuta el siguiente comando:
npm install pm2@latest -g
A continuación, inicia tu aplicación Next.js utilizando el PM2 ejecutando el siguiente comando:
pm2 start "npm start"
Obtendrás la siguiente salida:
[PM2] Starting /usr/bin/bash in fork_mode (1 instance) [PM2] Done. ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ? id ? name ? namespace ? version ? mode ? pid ? uptime ? ? ? status ? cpu ? mem ? user ? watching ? ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ? 0 ? npm start ? default ? N/A ? fork ? 1321 ? 0s ? 0 ? online ? 0% ? 24.5mb ? root ? disabled ? ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
En este punto, la aplicación Next.js está iniciada y escucha en el puerto 3000. Puedes comprobarlo con el siguiente comando:
ss -antpl | grep 3000
Verás la siguiente salida:
LISTEN 0 511 0.0.0.0:3000 0.0.0.0:* users:(("node",pid=1337,fd=18))
También puedes comprobar el estado de tu aplicación Next.js con el siguiente comando:
pm2 show "npm start"
Obtendrás la siguiente salida:
Describing process with id 0 - name npm start ??????????????????????????????????????????????????????????? ? status ? online ? ? name ? npm start ? ? namespace ? default ? ? version ? N/A ? ? restarts ? 0 ? ? uptime ? 59s ? ? script path ? /usr/bin/bash ? ? script args ? -c npm start ? ? error log path ? /root/.pm2/logs/npm-start-error.log ? ? out log path ? /root/.pm2/logs/npm-start-out.log ? ? pid path ? /root/.pm2/pids/npm-start-0.pid ? ? interpreter ? none ? ? interpreter args ? N/A ? ? script id ? 0 ? ? exec cwd ? /root/nextapp ? ? exec mode ? fork_mode ? ? node.js version ? N/A ? ? node env ? N/A ? ? watch & reload ? ? ? ? unstable restarts ? 0 ? ? created at ? 2022-11-12T13:30:39.734Z ? ??????????????????????????????????????????????????????????? Divergent env variables from local env Add your own code metrics: http://bit.ly/code-metrics Use `pm2 logs npm start [--lines 1000]` to display logs Use `pm2 env 0` to display environment variables Use `pm2 monit` to monitor CPU and Memory usage npm start
Una vez que hayas terminado, puedes proceder a instalar y configurar Nginx.
Configurar Nginx como proxy inverso para la aplicación Next.js
Es una buena idea instalar y configurar Nginx como proxy inverso para acceder a la aplicación Next.js.
Primero, instala el paquete Nginx con el siguiente comando:
apt install nginx -y
Una vez instalado Nginx, crea un archivo de configuración de host virtual Nginx:
nano /etc/nginx/conf.d/next.conf
Añade las siguientes configuraciones:
server {
server_name next.example.com;
location / {
# Reverse proxy for Next server
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
}
}
Guarda y cierra el archivo. A continuación, comprueba si el Nginx tiene algún error de configuración sintáctica:
nginx -t
Deberías ver la siguiente salida:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
A continuación, reinicia el servicio Nginx para aplicar los cambios:
systemctl restart nginx
También puedes comprobar el estado de Nginx con el siguiente comando:
systemctl status nginx
Deberías ver la siguiente salida:
? nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Sat 2022-11-12 13:35:46 UTC; 6s ago
Docs: man:nginx(8)
Process: 2023 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Process: 2024 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Main PID: 2025 (nginx)
Tasks: 3 (limit: 464122)
Memory: 3.3M
CGroup: /system.slice/nginx.service
??2025 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;"
??2026 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
??2027 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
Nov 12 13:35:46 ubuntu22041 systemd[1]: Starting A high performance web server and a reverse proxy server...
Nov 12 13:35:46 ubuntu22041 systemd[1]: Started A high performance web server and a reverse proxy server.
Una vez que hayas terminado, puedes continuar con el siguiente paso.
Accede a la aplicación web Next.js
Llegados a este punto, la aplicación Next.js está instalada y configurada con Nginx. Ahora puedes acceder a ella utilizando la URL http://next.example.com. Deberías ver la página web de Next.js en la siguiente pantalla:
Conclusión
Enhorabuena! has instalado correctamente la aplicación Next.js con Nginx en Ubuntu 22.04. Ahora puedes acelerar tu proceso de desarrollo utilizando el framework Next.js. No dudes en preguntarme si tienes alguna duda.