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

demo website
https://github.com/officialrajdeepsingh/deploy-nextjs-app-router-github-pages

deploy-github-pages nextjs-github-page nextsjs

Last synced: 6 days ago
JSON representation

demo website

• Host: GitHub
• URL: https://github.com/officialrajdeepsingh/deploy-nextjs-app-router-github-pages
• Owner: officialrajdeepsingh
• Created: 2023-08-14T10:15:59.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-15T06:41:47.000Z (over 1 year ago)
• Last Synced: 2024-11-01T19:25:11.764Z (about 2 months ago)
• Topics: deploy-github-pages, nextjs-github-page, nextsjs
• Language: TypeScript
• Homepage: https://officialrajdeepsingh.github.io/deploy-nextjs-app-router-github-pages/
• Size: 81.1 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# 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](https://medium.com/frontendweb/how-to-deploy-the-next-js-app-router-application-on-github-pages-using-pnpm-54ac72424d80).

## installation

### Clone the project

```bash

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

```

### Change the folder 

```bash

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

```

### Install the node package

```bash

npm install

# or

pnpm install

# or

yarn install

```

First, run the development server:

```bash

npm run dev

# or

yarn dev

# or

pnpm dev

```

Open [http://localhost:3000](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.js`file, when you deploy your site on the GitHub page.

```javascript

// 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;

```