JFdeSousa

C贸mo colocar una aplicaci贸n de Next.js en un hosting compartido?

31 de marzo de 2023

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.

鈫 Regresar al inicio