Netlify Nextjs Deployment — Page Not Found Issue Solution

Vishnu :) — Sat, 21 Jan 2023 09:53:08 +0000

Nextjs deployment to netlify was made easy by netlify through github repo. But the issue is it’s not working for all and many of the developers are seeking help on the issue page not found even though deployment was successful.

So I’ve made a work around for the issue. Its not a perfect solution but it works.

I have created two repos one is for nextjs code and other is for the build generated files.

I have created an action for the first repository where it builds & exports the code and pushed to second repository.

This second repository is connected to netlify and it serves the generated html files.

This action will be created from the first repository actions tab.

Click New workflow and then click set up new workflow yourself.

Add below code and commit.

name: Build & push to Another Repo
on:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]

    steps:
      - uses: actions/checkout@v1
        with:
          fetch-depth: 0
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm install, build
        run: |
          npm ci
          npm run build && npm run export
        env:
          CI: true
      - name: Publish
        uses: selenehyun/gh-push@master
        env:
          GITHUB_TOKEN: ${{ secrets.API_TOKEN_GITHUB }}
          COMMIT_FILES: out/*
          REPO_FULLNAME: userName/repoName
          BRANCH: main

These are the build settings as we are deploying generated html files so no build setting are needed.

One more change required in the next.config.js

Add target: 'serverless' in the exports.

module.exports = {
  reactStrictMode: true,
  target: 'serverless'
};

That’s it. Now when ever you push code to first repo it generates a build and pushes to second repo. And when ever second repo gets a push netlify starts the deploy job and that’s how it works. I know its not the perfect fix but as I said it works.

Forem: Vishnu :)

Netlify Nextjs Deployment — Page Not Found Issue Solution