How to deploy the Next.js App router application on GitHub Pages using PNPM?

deploy the nextjs app router demo application using pnpm, read full article.

installation

Clone the project

git clone https://github.com/officialrajdeepsingh/deploy-nextjs-app-router-github-pages.git

Change the folder

cd deploy-nextjs-app-router-github-pages

Install the node package

npm install
# or
pnpm install
# or
yarn install

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can edit the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Note

Remove the following code when you start your local development server. Then remove the output and images.unoptimized config in next.config.jsfile, when you deploy your site on the GitHub page.

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output:  process.env.NODE_ENV !== "production" ? undefined: "export", 
  images: {
    unoptimized: false,
    remotePatterns: [
      {
        hostname: "images.unsplash.com",
      },
    ],
  },
}

module.exports = nextConfig;