Debe publicar su aplicación Next.js en páginas de GitHub

Recientemente renové mi versión de código abierto de 2048 Game y decidí migrarla a Next.js y React 18. El juego existente se publicó en GitHub Pages sin ningún dominio personalizado. Estaba considerando implementar en Vercel, pero perdería el tráfico orgánico de Google que se acumuló durante los últimos 3 años. Significa que necesitaba experimentar con la implementación en páginas de GitHub y hoy compartiré lo que aprendí.

Si quieres ver el resultado final antes de leer el artículo completo, puedes compruébalo aquí .

Introducción rápida

Usaré dos funciones de GitHub: GitHub Actions y GitHub Pages. Si no has oído hablar de ellos, déjame explicarte rápidamente:

Las GitHub Actions son como pequeños flujos de trabajo que pueden realizar tareas en tus proyectos. Es como tener un ayudante que automáticamente hace las cosas que usted le dice que haga. Puede utilizar Acciones para ejecutar pruebas, realizar controles de calidad o crear su aplicación. En mi caso, utilicé estos flujos de trabajo para automatizar el proceso de implementación.

¿Qué son las páginas de GitHub ? Piense en ellos como una opción de alojamiento web para desarrolladores y proyectos de código abierto. Puedes usar GitHub Pages para compartir tus portafolios, alojar sitios web de tus proyectos de código abierto o simplemente publicar tus proyectos favoritos como el mío.

Ahora comencemos.

Paso 1: active las páginas de GitHub para su repositorio

Para publicar nuestra aplicación Next.js, necesitaba activar GitHub Pages para el repositorio del proyecto. Puede encontrarlo en la pestaña Configuración (1 en la imagen a continuación), luego seleccionar Páginas en el menú del lado izquierdo (2) y buscar el menú desplegable que nos permite especificar la Fuente de implementación (3).

Ahora deberá cambiar la fuente de implementación a GitHub Actions .

A partir de ahora, tu proyecto tiene una página dedicada. Sólo necesitas publicar contenido allí.

Paso 2: configurar el proceso de compilación de Next.js

Antes de implementar la aplicación Next.js, es importante cambiar el resultado de la compilación. De forma predeterminada, Next.js usa Node.js para ejecutar la aplicación y esto es incompatible con GitHub Pages.

GitHub Pages está diseñado para alojar archivos estáticos, lo que significa que solo podemos publicar HTML, CSS, JavaScript (y otros archivos estáticos) allí. Entonces necesitaremos habilitar la generación de páginas estáticas en Next.js.

Para hacerlo, cambiará el modo de salida para export dentro de next.config.js :

 /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", // <=== enables static exports reactStrictMode: true, }; module.exports = nextConfig;

Ahora, después de ejecutar next build , Next.js generará una carpeta out que contiene recursos estáticos para su aplicación. En los próximos pasos, tomaremos este directorio y lo cargaremos en GitHub Pages.

Paso 3: arreglar las imágenes que faltan

Las páginas se publican en una subruta de un dominio y toman el nombre del proyecto como subruta. ¿Confuso? Echemos un vistazo a una URL de mi juego 2048 como ejemplo:

 https://mateuszsokola.github.io/2048-in-react/

Github creó un subdominio dedicado para mi usuario llamado mateuszsokola (mi nombre de usuario) . Pero el proyecto se publica en la subruta, que en mi caso es /2048-in-react . Desafortunadamente, esto generará problemas con imágenes y estilos faltantes.

De forma predeterminada, Next.js asigna todos los activos estáticos del dominio. Esto significa que el archivo favicon.ico se resolverá en mateuszsokola.github.io/favicon.ico en lugar de mateuszsokola.github.io/2048-in-react/favicon.icon .

Para solucionar este problema, podemos configurar un prefijo de ruta agregando basePath dentro del archivo next.config.js :

 /** @type {import('next').NextConfig} */ const nextConfig = { basePath: "/2048-in-react", // <=== here it is output: "export", reactStrictMode: true, }; module.exports = nextConfig;

En mi caso es /2048-in-react ya que mi proyecto se llama 2048-in-react .
Recuerde incluir ( / ) al comienzo del directorio del proyecto.

Paso 4: crear acciones de Github

Next.js está produciendo artefactos de implementación que se pueden publicar en páginas de GitHub. Ahora es el momento de configurar Github Actions para publicarlas. Decidí la implementación en dos acciones separadas para promover la reutilización:

La acción setup-node configurará Node.js e instalará todas las dependencias. Tener una acción independiente para la configuración de Node.js me permitirá reutilizarla para otras canalizaciones. Por ejemplo, tengo tuberías que corren codificador y pruebas . Probablemente también quieras tener más de una acción.

La acción publish creará artefactos Next.js y los publicará en GitHub Pages cada vez que fusionemos código en la rama main .

Permítanme comenzar explicando la acción del setup-node . Aquí está el código:

 # File: .github/workflows/setup-node/action.yml name: setup-node description: "Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧" runs: using: "composite" steps: - name: Setup Node.js ⚙️ uses: actions/setup-node@v4 with: node-version: 20 - name: Cache dependencies ⚡ id: cache_dependencies uses: actions/cache@v3 with: path: node_modules key: node-modules-${{ hashFiles('package-lock.json') }} - name: Install dependencies 🔧 shell: bash if: steps.cache_dependencies.outputs.cache-hit != 'true' run: npm ci

Importante : cree este archivo en el directorio .github/workflows/setup-node de su proyecto. Asegúrate de llamarlo action.yml .

¿Qué hace este fragmento?

1. Crea una acción composite . La acción composite le permite agrupar varios pasos del flujo de trabajo en una sola acción. Si no está claro, lo entenderás una vez que entremos en la segunda acción.

2. Crea un nuevo entorno de compilación utilizando Node.js 20 e instala las dependencias del proyecto.

Estas son las partes más importantes de la acción del setup-node . Ahora, pasemos a la acción publish :

 # File: .github/workflows/publish.yml name: publish-to-github-pages on: push: branches: - main permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: build: runs-on: ubuntu-latest steps: - name: Checkout 🛎️ uses: actions/checkout@v4 - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧 uses: ./.github/workflows/setup-node - name: Setup Pages ⚙️ uses: actions/configure-pages@v4 with: static_site_generator: next - name: Build with Next.js 🏗️ run: npx next build - name: Upload artifact 📡 uses: actions/upload-pages-artifact@v3 with: path: ./out deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Publish to GitHub Pages 🚀 id: deployment uses: actions/deploy-pages@v4

Cree este archivo en el directorio .github/workflows de su proyecto. Puedes nombrar el archivo como quieras; yo llamé al mío publish.yml .

¿Que hace?

1. Esta acción se activa cada vez que el nuevo código se inserta o fusiona en la rama main .

2. Utiliza la acción setup-node para configurar el entorno. La acción composite que creé en la acción anterior. Ahora ya sabes cómo incluir tus acciones composite en otras acciones.

3. La acción tiene dos etapas: en la primera etapa, se está creando la aplicación Next.js. En la segunda etapa, los artefactos de la primera etapa se cargan en GitHub Pages.

Estos son los aspectos más importantes del proceso de implementación. Omití los permisos y la configuración de simultaneidad ya que permanecen sin cambios para todas las implementaciones de GitHub Pages.

Ahora, la acción está lista para usarse.

Comprometerse y presionar

Después de confirmar y enviar sus cambios a la rama main , GitHub activará automáticamente la implementación en GitHub Pages.

Para inspeccionar el proceso, navegue hasta la pestaña Acciones (1 en la imagen a continuación) y seleccione la acción publicar en páginas de github en el menú del lado izquierdo (2) . Verá todas sus implementaciones en la pantalla (se llaman flujos de trabajo ).

Ahora seleccione el primero de esos flujos de trabajo y verá una implementación de dos etapas. En la etapa de implementación , puede encontrar un enlace a su sitio web en GitHub Pages.

Conclusión

Github Pages no es suficiente para alojar sitios web con millones de visitas. Pero es una opción perfecta para alojar su portafolio o un sitio web para su proyecto de código abierto.

Existen muchas opciones gratuitas para alojar nuestros sitios web como Vercel, pero quería mostrarles una alternativa. GitHub Pages está diseñado para desarrolladores y creo que todos los desarrolladores deberían estar familiarizados con él.

Si este artículo te ayudó, compártelo en tus redes sociales.

¿Y dónde implementas tu aplicación? ¿Siempre es Vercel?

Aprenda React 18 y Next.js

¿No te sientes fuerte con React o Next.js? ¡Únete a mi curso en línea en Udemy! Te ayudaré a comenzar con React creando un Juego 2048 completamente funcional. Creo que crear juegos hace que el aprendizaje sea más divertido y tendrás algo interesante que mostrarles a tus amigos.

👇👇👇👇

🧑‍🎓 Únete Curso de React 18 y Next.js en Udemy – 80% de descuento solo esta semana.