En este artículo te mostraremos la manera de subir a tu hosting una aplicación creada en Next.js utilizando npm.
Crearemos desde cero una aplicación de pruebas y la subiremos al servidor.
Creación de app de pruebas en tu entorno local (tu PC)
Es necesario que tengas previamente instalado Node.js en tu PC el cual incluye el comando "npm".
- En tu PC de desarrollo, instala "npx" ejecutando el siguiente comando desde una consola (en Windows: CMD o PowerShell, en Linux o Mac: Terminal):
npm install -g npx
- Crea una aplicación de pruebas, ejecutando:
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/basics-final"
- Ingresa al directorio de la aplicación:
cd nextjs-blog
- Para probarla en tu PC, puedes ejecutar el siguiente comando que la compilará y creará un servidor local usando Node.js para pruebas:
npm run dev
- Revisa el output anterior y abre en tu explorador web en la URL indicada. En este ejemplo es http://localhost:3000 y verás el siguiente contenido en tu navegador:
Deploy en servidor web
Una vez que hayas creado tu aplicación en tu PC y estés listo para subirla al servidor, sigue estos pasos:
- En tu PC local ejecuta el siguiente comando dentro de la carpeta de tu aplicación. Esto compilará la aplicación para luego poder subirla al entorno en producción (tu hosting):
npm run build
Este comando se ejecuta siempre en el entorno de desarrollo local (tu PC) y puede que falle si lo ejecutas directamente en el servidor, ya que es posible que no tenga suficientes recursos tu cuenta para ello. - Ingresa a la carpeta de la aplicación (en tu PC) y crea un nuevo archivo llamado "server.js" con el siguiente contenido:
const path = require('path');
const nextPath = path.join(__dirname, 'node_modules', '.bin', 'next');
process.argv.length = 1;
process.argv.push(nextPath, 'start');
require(nextPath); - Selecciona todos los archivos y carpetas salvo "node_modules" y ".git", luego comprime su contenido en un archivo comprimido .ZIP:
- Crea una carpeta "nextjs-test" en el directorio web raíz de tu hosting (public_html). Puedes utilizar el Administrador de archivos de cPanel.
- Sube el archivo comprimido .ZIP dentro de esa carpeta creada. Una vez subido, dentro del administrador de archivos haz clic derecho sobre el archivo ZIP subido y haz clic en "Extract" para extraer el contenido. Debería verse así:
- Ve a "Setup Node.js App" en cPanel y crea una aplicación de Node.js
Completa con los datos de la aplicación y haz click en "Create":
- Node.js version: la última versión disponible en la lista
- Application mode: selecciona "Production"
- Application root: next-test
- Application URL: Selecciona el dominio donde estará tu app
- Application startup file: server.js - Luego de creada la App de Node.js en tu hosting, haz click en "Run NPM Install" para instalar sus dependencias.
Si el proceso de npm install fallara es posible que tu plan no cuente con los recursos suficientes para completar su ejecución. En este caso puedes hacer un upgrade a un plan con mayor cantidad de recursos. Sin embargo, una alternativa sería incluir la carpeta "node_modules" dentro del archivo .ZIP que creaste en el punto 3 para evitar tener que hacer este paso y conservar tu plan actual. - ¡Listo! Ahora ingresa a tu dominio y si todio salió bien verás tu aplicación de Next.js corriendo:
Recuerda que tu dominio debe estar registrado y delegado a tu hosting para que pueda ser accesible vía web.
Problemas comunes
Uso de Next.JS con rutas y HTTPS
Si puedes acceder correctamente a tu App de Next.JS con http:// pero tienes problemas para acceder vía https:// (y ya tienes el certificado SSL generado correctamente en cPanel), esto es debido a un problema reciente de Next.JS con un header http específico. Para solucionarlo, debes agregar el siguiente código en tu archivo .htaccess (de la carpeta web raíz de tu hosting):
RequestHeader unset X-FORWARDED-PROTO
Uso de Next.JS en subcarpeta
Si en lugar de publicar tu app de Next.JS en el dominio raíz de tu cuenta, lo hicieras en una subcarpeta (es decir, dominio.com/subcarpeta/ ), entonces debes tener en cuenta que las peticiones web llegarán a tu App incluyendo la subcarpeta en el request, por lo que Next.JS seguramente no asocie la ruta correcta y devuelva un error HTTP 404 (no encontrado).
Por ejemplo, si publicaste tu app en Next.JS en "/subcarpeta/api/datos", pero en tu App has programado la ruta como "/api/datos", a tu App llegará la petición con la ruta "/subcarpeta/api/datos", dando error por no reconocer la ruta de la petición.
Para solucionar esto, deberás crear un archivo en el la carpeta raíz de tu proyecto llamado "next.config.js", indicando el basePath con el siguiente contenido (reemplaza "subcarpeta" por el nombre real de la carpeta):
module.exports = {
basePath: '/subcarpeta',
}
Luego vuelve a compilar tu proyecto en tu PC y súbelo a tu hosting nuevamente.
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.