Select a result to preview
A implantação de um aplicativo Next.js no GitHub Pages envolve a configuração do projeto Next.js para exportação estática e a configuração do GitHub Pages para servir os arquivos exportados.
Modificar next.config.js: Adicionar configuração output: 'export' isto diz ao Next.js para exportar para HTML, CSS e arquivos JavaScript.
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
// Optional: Configure basePath and assetPrefix se GitHub tem URL repositório nome,
// por exemplo, se sua URL é https://<username>.github.io/<repo-name>/
// basePath: '/<repo-name>',
// assetPrefix: '/<repo-name>/',
};
module.exports = nextConfig;
https://<username>.github.io/<repo-name>/), você precisará configurar a basePath e assetPrefix em next.config.js para garantir o correto asset loading.Executar comando: next.js gera arquivos estáticos no diretório de saída especificado (em next.config.js)
npm run build ou yarn build
Instalar o pacote ghpages
npm install gh-pages --save-dev
adicionar deploy scripts para o scripts.json:
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d out"
}
Executar o deploy script:
npm run deploy
Isto irá fazer o build do seu projeto e o push para o diretório de saída para a gh-pages branch em seu repositorio.
gh-pages branche salve..github/workflows/deploy.yml) em seu repositorio.out no GitHub Pages. GitHub mostra um modelo: template for Next.js deployments.name: Deploy Next.js to GitHub Pages
on:
push:
branches:
- main # Or your default branch
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '18' # Or your desired Node.js version
- name: Install dependencies
run: npm install
- name: Build Next.js app
run: npm run build
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./out # Or your custom output directory