Nessa semana precisei realizar o deploy da nova versão do meu guia front end em português no Github Pages usando as Github Actions e, meu amigo, passei um certo sufoco pois o guia foi escrito em Next.js e tem alguns segredos para conseguirmos deixar tudo rodando da forma esperada. Por isso estou escrevendo esse post para a posteridade. Espero que as gerações futuras usufruam das descobertas dessa minha pequena conquista. 😄

Atualmente o guia é composto de uma página estática com diversos links, ou seja, é bem simples. Então o fluxo que imaginei foi:

Então escrevi um workflow para uma action de deploy e ele ficou assim:

Note que na minha Action acabei chamando apenas o comando yarn build pois no meu package.json o script de build está configurado para realizar tanto o build quanto o export do Next.js.

Simples, né?

Como no Github Pages os sites não ficam na raiz do domínio, o Next.js precisa de algumas configurações para conseguir gerar os arquivos com as referências corretas e, além disso, o Github Actions foi feito para trabalhar com projetos Jekyll por padrão e o Jekyll ignora arquivos e diretórios que iniciam com _ como a pasta /_next, que é onde ficam todos os arquivos gerados pela build do Next.js.

Ok, mas como resolver?

O primeiro passo é adicionar uma configuração para o Github saber que o deploy não é de uma aplicação Jekyll, para isso nós iremos adicionar um arquivo chamado .nojekyll no diretório /public. Dessa forma, quando o Next.js realizar o build de nossa aplicação ele adicionará esse arquivo na raiz do output da build.

Além disso, ao realizar o deploy de uma aplicação Next.js em um diretório que é diferente da raiz, é necessário configurar o basePath do projeto. Então, no meu caso precisei adicionar o valor guia-frontend a ele, que é o nome do meu repositório no Github.

Porém, o basePath não altera o caminho para os assets (arquivos css, js e imagens no nosso caso) da sua aplicação e é aí que entra o assetPrefix. Com ele nós conseguimos especificar um diretório ou domínio onde nossos assets estarão presentes.

No caso do Github Pages, ambos os valores serão o nome do seu repositório precedido de /.

Para finalizar, também adicionei uma condição para garantir que esses parâmetros só seriam aplicados a configuração do Next.js em produção. Assim, em ambiente de desenvolvimento os arquivos do projeto seriam servidos a partir da raiz, como normalmente acontece em projetos que utilizam o Next.js.

Voilá

E agora tudo funciona como o esperado. Tanto em produção quanto no ambiente de desenvolvimento local. Espero que esse artigo tenha ajudado alguém e qualquer dúvida ou sugestão estou a disposição em @444jeans.

Ps.: Vale ressaltar que tive problemas com arquivos referenciados pelos meus estilos css ao usar a função url(). O Next.js não estava adicionando o assetPrefix no caminho para esses arquivos devido a um bug ainda não resolvido, então tive que mudar a implementação.

Referências

• https://dev.to/jameswallis/deploying-a-next-js-app-to-github-pages-24pn
• https://medium.com/front-end-weekly/ci-cd-with-github-actions-to-deploy-on-github-pages-73e225f8f131

Voltar