Você deve publicar seu aplicativo Next.js nas páginas do GitHub

Recentemente, renovei minha versão de código aberto do 2048 Game e decidi migrá-lo para Next.js e React 18. O jogo existente foi publicado no GitHub Pages sem nenhum domínio personalizado. Eu estava pensando em implantar no Vercel, mas isso perderia o tráfego orgânico do Google, acumulado nos últimos 3 anos. Isso significa que precisei experimentar a implantação em GitHub Pages e hoje vou compartilhar o que aprendi.

Se quiser ver o resultado final antes de ler o artigo inteiro, você pode confira aqui .

Introdução rápida

Usarei dois recursos do GitHub – GitHub Actions e GitHub Pages. Se você ainda não ouviu falar deles, deixe-me explicar rapidamente:

As ações do GitHub são como pequenos fluxos de trabalho que podem realizar tarefas em seus projetos. É como ter um ajudante que faz automaticamente as coisas que você manda. Você pode usar Ações para executar testes, para verificações de qualidade ou para criar seu aplicativo. No meu caso, usei esses fluxos de trabalho para automatizar o pipeline de implantação.

O que são páginas do GitHub ? Pense neles como uma opção de hospedagem na web para desenvolvedores e projetos de código aberto. Você pode usar GitHub Pages para compartilhar seus portfólios, hospedar sites de seus projetos de código aberto ou apenas publicar seus projetos favoritos como o meu.

Agora vamos começar.

Passo 1 – Ative as páginas do GitHub para o seu repositório

Para publicar nossa aplicação Next.js, precisei ativar GitHub Pages para o repositório do projeto. Você pode encontrar na guia Configurações (1 na imagem abaixo), selecionar Páginas no menu do lado esquerdo (2) e encontrar o menu suspenso que nos permite especificar a fonte de implantação (3).

Agora você precisará alterar a fonte de implantação para GitHub Actions .

A partir de agora, seu projeto terá uma página dedicada. Você só precisa publicar conteúdo lá.

Etapa 2 – Configurar o processo de construção Next.js

Antes de implantar o aplicativo Next.js, é importante alterar a saída do build. Por padrão, Next.js usa Node.js para executar o aplicativo e isso é incompatível com GitHub Pages.

GitHub Pages foi projetado para hospedar arquivos estáticos, o que significa que podemos publicar apenas HTML, CSS, JavaScript (e outros arquivos estáticos) lá. Portanto, precisaremos habilitar a geração de páginas estáticas em Next.js.

Para fazer isso, você alterará o modo de saída para export dentro de next.config.js :

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

Agora, depois de executar next build , Next.js irá gerar uma pasta out contendo ativos estáticos para seu aplicativo. Nas próximas etapas, pegaremos esse diretório e o carregaremos nas páginas do GitHub.

Etapa 3 – Corrigir imagens ausentes

As páginas são publicadas em um subcaminho de um domínio e levam o nome do projeto como subcaminho. Confuso? Vamos dar uma olhada no URL do meu jogo 2048 como exemplo:

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

O Github criou um subdomínio dedicado para meu usuário chamado mateuszsokola (meu nome de usuário) . Mas o projeto é publicado no subcaminho, que no meu caso é /2048-in-react . Infelizmente, isso levará a problemas com imagens e estilos ausentes.

Por padrão, Next.js mapeia todos os ativos estáticos do domínio. Isso significa que o arquivo favicon.ico será resolvido para mateuszsokola.github.io/favicon.ico em vez de mateuszsokola.github.io/2048-in-react/favicon.icon .

Para corrigir isso, podemos configurar um prefixo de caminho adicionando basePath dentro do arquivo next.config.js :

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

No meu caso, é /2048-in-react já que meu projeto se chama 2048-in-react .
Lembre-se de incluir ( / ) no início do diretório do projeto.

Passo 4 – Criar ações no Github

Next.js está produzindo artefatos de implantação que podem ser publicados nas páginas do GitHub. Agora é hora de configurar o Github Actions para publicá-los. Decidi a implantação em duas ações distintas para promover a reutilização:

A ação setup-node configurará o Node.js e instalará todas as dependências. Ter uma ação autônoma para a configuração do Node.js me permitirá reutilizá-lo para outros pipelines. Por exemplo, tenho pipelines que executam linter de código e testes . Provavelmente você também deseja ter mais de uma ação.

A ação publish criará artefatos Next.js e os publicará nas páginas do GitHub sempre que mesclarmos o código no branch main .

Deixe-me começar explicando a ação setup-node . Aqui está o 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 : crie este arquivo no diretório .github/workflows/setup-node do seu projeto. Certifique-se de chamá-lo action.yml .

O que esse trecho faz?

1. Ele cria uma ação composite . A ação composite permite agrupar várias etapas do fluxo de trabalho em uma única ação. Se não estiver claro, você entenderá quando passarmos para a segunda ação.

2. Ele cria um novo ambiente de construção usando Node.js 20 e instala dependências do projeto.

Estas são as partes mais importantes da ação setup-node . Agora, vamos passar para a ação 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

Crie este arquivo no diretório .github/workflows do seu projeto. Você pode nomear o arquivo como quiser – chamei o meu publish.yml .

O que faz?

1. Esta ação é acionada cada vez que o novo código é enviado ou mesclado na ramificação main .

2. Ele usa a ação setup-node para configurar o ambiente. A ação composite que criei na ação anterior. Agora você sabe como incluir suas ações composite em outras ações.

3. A ação tem duas etapas: na primeira etapa está sendo construída a aplicação Next.js. Na segunda etapa, os artefatos da primeira etapa são carregados nas páginas do GitHub.

Esses são os aspectos mais importantes do pipeline de implantação. Ignorei as permissões e a configuração de simultaneidade, pois elas permanecem inalteradas para todas as implantações do GitHub Pages.

Agora, a ação está pronta para uso.

Comprometa-se e empurre

Depois de confirmar e enviar suas alterações para o branch main , o GitHub iniciará automaticamente a implantação nas páginas do GitHub.

Para inspecionar o processo, navegue até a guia Ações (1 na imagem abaixo) e selecione a ação publicar em páginas do github no menu do lado esquerdo (2) . Você verá todas as suas implantações na tela (elas são chamadas de fluxos de trabalho ).

Agora selecione o primeiro desses fluxos de trabalho e você verá uma implantação em dois estágios. Na fase de implantação , você pode encontrar um link para seu site nas páginas do GitHub.

Conclusão

As páginas do Github não são suficientes para hospedar sites com milhões de visualizações. Mas é a escolha perfeita para hospedar seu portfólio ou site para seu projeto de código aberto.

Existem muitas opções gratuitas para hospedar nossos sites como o Vercel, mas queria mostrar uma alternativa. GitHub Pages foi desenvolvido para desenvolvedores e acho que todo desenvolvedor deve estar familiarizado com ele.

Se este artigo ajudou você, compartilhe-o em suas redes sociais.

E onde você implanta seu aplicativo? É sempre Vercel?

Aprenda React 18 e Next.js

Você não se sente forte com React ou Next.js? Participe do meu curso online na Udemy! Vou ajudá-lo a começar a usar o React criando um jogo 2048 totalmente funcional. Acredito que criar jogos torna o aprendizado mais divertido e você terá algo legal para mostrar aos seus amigos.

👇👇👇👇

🧑‍🎓 Participe Curso React 18 e Next.js na Udemy – 80% OFF somente esta semana.