Logo

dev-resources.site

for different kinds of informations.

Netlify Nextjs Deployment β€” Page Not Found Issue Solution

Published at
1/21/2023
Categories
netlify
nextjs
github
actions
Author
vishnu8742
Categories
4 categories in total
netlify
open
nextjs
open
github
open
actions
open
Author
10 person written this
vishnu8742
open
Netlify Nextjs Deployment β€” Page Not Found Issue Solution

Netlify Nextjs Deployment

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.
Github Actions
Click New workflow and then click set up new workflow yourself.
Create Workflow
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
Enter fullscreen mode Exit fullscreen mode

These are the build settings as we are deploying generated html files so no build setting are needed.
Create Workflow
One more change required in the next.config.js

Add target: 'serverless' in the exports.

module.exports = {
  reactStrictMode: true,
  target: 'serverless'
};
Enter fullscreen mode Exit fullscreen mode

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.

actions Article's
30 articles in total
Favicon
How to upload Markdown files to Dev.to from GitHub
Favicon
How to Configure GitHub Actions CI for Python Using Poetry on Multiple Versions
Favicon
Proposal: Standard Communication API Channels for AI Agents (AI Generated)
Favicon
Understanding GitHub Actions Working Directory
Favicon
Automating Mastodon Posts with GitHub Actions
Favicon
Getting Started with GitHub Actions: A Beginner's Guide to Automation
Favicon
Configure GitHub for Dev.to Publishing
Favicon
Getting Started with GitHub Actions: A Beginner's Guide to Automation
Favicon
Configure GitHub for Dev.to Publishing
Favicon
github action services: mysql, redis and elasticsearch
Favicon
Future-Proofing Your Auth0 Integration: Moving from Rules and Hooks to Actions
Favicon
6 GitHub Actions Every DevOps Team Needs
Favicon
GitHub Workflow and Automation: Streamlining Project Management πŸš€
Favicon
Server actions in Next.js
Favicon
Actions - React 19
Favicon
NextJs Server Actions: Why and How
Favicon
The truth about Mindset and how it can influence your actions positively
Favicon
Optimizing Parallel Jobs in a Github Workflow
Favicon
How to set preconfigured actions in the CloudBees platform
Favicon
Auto-deploy docker images to Docker Hub using GitHub actions
Favicon
Secure NextJS Server Actions Using Body Validation
Favicon
Github action to detect ip addresses
Favicon
Vegaration: Visualising continuous integration using Github actions and vega-lite
Favicon
GitHub Action for Commit Message Validation
Favicon
Query GitHub Repo Topics Using GraphQL
Favicon
Setup a Dynamic GitHub User Profile README
Favicon
How to publish React App (CRA) on Github Pages using Github Actions with Turborepo
Favicon
Guide: Automate the deployment of a virtual machine on AWS using Terraform and Github Actions
Favicon
Netlify Nextjs Deployment β€” Page Not Found Issue Solution
Favicon
Github Actions

Featured ones: