{"repo":"gregrickaby/nextjs-github-pages","free":true,"listed":false,"github":"https://github.com/gregrickaby/nextjs-github-pages","clone":"git clone https://github.com/gregrickaby/nextjs-github-pages.git","description":"🚀 Deploy a Next.js app to GitHub Pages via GitHub Actions","language":"TypeScript","stars":564,"topics":["nextjs","github-pages","github-actions","static-site","github"],"license":"MIT","category":"workflow-automation","readme_excerpt":"Next.js GitHub Pages Deploy Next.js to GitHub Pages with GitHub Actions. View the deployed app 🚀 ⚠️ Heads up! GitHub Pages is not a Node.js server. So dynamic logic that cannot be computed during the build process, are not supported! See all the unsupported features. --- Configure Next.js Next.js Config First, you need to configure Next.js to deploy static exports. This is required for GitHub Pages to work. 1. Open the next.config.ts file 2. Add the following: 3. Save the next.config.ts 4. Finally, place a .nojekyll file in the /public directory to disable GitHub Pages from trying to create a Jekyll website. Perfect! This is all you need to configure Next.js to deploy on GitHub Pages. Add base path to page.tsx Next, you will need to add the base path to images in page.tsx file. This is required for the images to appear on GitHub Pages. 1. Open app/page.tsx 2. Find the Image components 3. Add /nextjs-github-pages/ (or the slug of your GitHub repository) to the src prop: 4. Save the page.tsx file Learn more by reading the official documentation for basePath and images. --- Configure GitHub Repository Now that Next.js is configured, you need to set up your GitHub repository to deploy to GitHub Pages. Setup GitHub Action This is where the magic happens! This workflow file will automatically build and deploy the app when you push to the main branch. 1. Create .github/workflows/deploy.yml file 2. Paste the contents of 3. Save the deploy.yml file Enable GitHub Pages 1. Go to your r","default_branch":null,"files":null,"tree":[],"storefront":"/r/gregrickaby","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/gregrickaby/nextjs-github-pages/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}