Next.js es un framework de React que permite crear aplicaciones web con renderizado del lado del servidor (SSR) y generación de páginas estáticas (SSG). Una vez que has construido tu aplicación de Next.js, necesitas colocarla en un servidor para que pueda ser accesible en línea. En este artículo, te mostraremos cómo colocar una aplicación de Next.js en un hosting compartido.
1. Compilar la aplicación
Antes de colocar tu aplicación de Next.js en un hosting compartido, necesitas compilarla. La compilación de tu aplicación convierte tu código fuente en un conjunto de archivos estáticos que pueden ser servidos en un servidor web.
Para compilar tu aplicación de Next.js, ejecuta el siguiente comando en la terminal:
npm run build
Este comando compilará tu aplicación de Next.js y creará una carpeta llamada build en el directorio raíz de tu proyecto.
2. Configurar el servidor web
Una vez que hayas compilado tu aplicación de Next.js, necesitas configurar el servidor web en tu hosting compartido. El servidor web es responsable de servir los archivos estáticos de tu aplicación a través de HTTP.
Para configurar el servidor web, necesitas crear un archivo .htaccess en la carpeta raíz de tu aplicación. Este archivo debe contener las siguientes líneas de código:
RewriteEngine On
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
Estas líneas de código dirigen todas las solicitudes HTTP a tu archivo index.html, que es el punto de entrada de tu aplicación de Next.js.
3. Subir los archivos al servidor
Una vez que hayas compilado tu aplicación de Next.js y configurado el servidor web, necesitas subir los archivos de tu aplicación al servidor. Para hacerlo, puedes utilizar un cliente FTP como FileZilla o Cyberduck.
Conecta tu cliente FTP al servidor web y navega hasta la carpeta raíz de tu aplicación. Sube los archivos de la carpeta build de tu aplicación al servidor web.
4. Configurar el archivo package.json
Por último, necesitas configurar el archivo package.json de tu aplicación de Next.js para que pueda ser ejecutada en el servidor web. Para hacerlo, agrega la siguiente línea de código al archivo package.json:
"start": "next start -p $PORT"
Esta línea de código especifica que tu aplicación debe ser ejecutada con el comando next start en el puerto que es especificado por el servidor web. Al agregar esta línea de código, asegúrate de guardar el archivo package.json y subirlo al servidor web junto con los demás archivos de tu aplicación.
Conclusión
Colocar una aplicación de Next.js en un hosting compartido puede parecer una tarea difícil, pero siguiendo estos pasos simples, puedes hacerlo de manera fácil y rápida. Recuerda compilar tu aplicación, configurar el servidor web, subir los archivos al servidor y configurar el archivo package.json. Con estos pasos, tu aplicación de Next.js estará en línea y lista para ser utilizada.