Description:

I am trying to deploy my Next.js project to GitHub Pages using static export (output: 'export' in next.config.js). After deploying, when I navigate to my GitHub Pages URL (https://username.github.io/repo-name), I encounter a 404 error.

Steps Taken

1. Configuration in next.config.js:

module.exports = () => {
  const plugins = [withContentlayer, withBundleAnalyzer]
  return plugins.reduce((acc, next) => next(acc), {
    reactStrictMode: true,
    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
    eslint: {
      dirs: ['app', 'components', 'layouts', 'scripts'],
    },
    output: 'export',
    basePath: '/Blog', // replace with your own repository name
    assetPrefix: '/Blog/',
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'picsum.photos',
        },
      ],
    },
    webpack: (config, options) => {
      config.module.rules.push({
        test: /.svg$/,
        use: ['@svgr/webpack'],
      })

      return config
    },
  })
}

2. Deployment Commands in package.json:

"scripts": {
    "start": "next dev",
    "dev": "cross-env INIT_CWD=$PWD next dev",
    "build": "cross-env INIT_CWD=$PWD next build && cross-env NODE_OPTIONS='--experimental-json-modules' node ./scripts/postbuild.mjs",
    "deploy": "gh-pages -d out"
  },

3. Run npm run build to generate static files.
4. Run npm run deploy to deploy to GitHub Pages.

Rely

1. I am quite sure that my repository name is correct

2. But finally some script files get 404

3. the solution to solve this problem.