Deploying a Next.js to Github pages

Next.js is a React framework that lets us build React web applications through a layer of automatic configuration abstraction. It pushes the React component paradigm towards a page based structure, and is great for static and, through automatic static optimization, dynamic websites.

Step 1: The Next.js project

Create a Next.js project by following the instructions in nextjs official page.

• Add this command to your package.json file:
  “export”: “next export”
• Change the next.config.js file to next.config.mjs, and replace everything inside with the following:
  /**@type {import(‘next’).NextConfig}
  */
  const nextConfig = {
  images: {
  loader: ‘akamai’,
  path: ”,
  },
  assetPrefix: ‘./’,
  };

export default nextConfig;

Step 2: GitHub Repository Setup

GitHub Pages is a great, free service that lets us publish static websites automatically and directly from our own repositories.

Add a new branch with any name you want. Then, go to your repository Settings, then Pages, then add the public branch as the source. Make sure the root folder is also selected, and then hit Save.

After this, your page will build, and GitHub will share the public URL that you will use to reach the site.

Step 3: GitHub Actions
Your website won’t show anything yet, because GitHub doesn’t know that your repository needs to be compiled. This can be handled automatically using GitHub actions, which has free continuous integration minutes we can leverage. We’re going to use a premade GitHub action from the marketplace that contains all the code needed to do this.

Create a workflows folder inside your .github folder, and inside this new folder create a .yml file. The name can be whatever you like.

Inside this file will be the commands that GitHub actions will run.

name: GitHub Pages deploy

on:
push:
branches: [main]

jobs:
build:
runs-on: ubuntu-latest

steps:
  - name: Checkout 🛎️
    uses: actions/checkout@v2.3.1
  - name: Use Node.js 16.x
    uses: actions/setup-node@v1
    with:
      node-version: '16.x'

  - name: Installing my packages
    run: npm ci

  - name: Build my App
    run: npm run build && npm run export && touch ./out/.nojekyll

  - name: Deploy 🚀
    uses: JamesIves/github-pages-deploy-action@v4.4.1
    with:
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      BRANCH: public # The branch the action will deploy to
      FOLDER: out # The folder the action will deploy to

Once you commit these files, the actions tab for your repository will show your action running. Actions are triggered automatically after any commits by default.

Once your action has finished building, you can navigate to the URL GitHub created for your repository. If everything worked, and the actions completed successfully, you’ll see a screen like this: