What steps should I follow to set up custom error pages for 404 and 500 errors on my Next.js application?

edit

Here are the steps to set up custom error pages for 404 and 500 errors on your Next.js application:

1. Create the pages for the custom error pages:
   • For 404 errors, create a file called 404.js in the pages directory.
   • For 500 errors, create a file called 500.js in the pages directory.

2. In each file, add the following code:

   function CustomErrorPage() {
    return (
      <div>
        {/* Add your custom error message and styles here */}
      </div>
    )
   }
   
   export default CustomErrorPage
   

3. In your Next.js configuration file (usually next.config.js), add the following code:

   module.exports = {
    // ...
    webpack: (config, { isServer }) => {
      if (isServer) {
        require('./scripts/generate-sitemap') // Your custom sitemap file
        const originalEntry = config.entry.bind(config)
        config.entry = () => originalEntry().then(entry => {
          entry['./scripts/generate-sitemap'] = './scripts/generate-sitemap.js'
          return entry
        })
      }
   
      return config
    },
    // ...
    eslint: {
      ignoreDuringBuilds: true,
    },
    serverRuntimeConfig: {
      // Will only be available on the server side
      mySecret: 'secretsauce',
      SECOND_SECRET: process.env.SECOND_SECRET, // Pass through env variables
    },
    publicRuntimeConfig: {
      // Will be available on both server and client
      staticFolder: '/public',
    },
    distDir: 'build',
    webpackDevMiddleware: (config) => {
      return config;
    },
   }
   

4. Add the following code to your next.config.js file so that Next.js knows to use the custom error pages:

   module.exports = {
    // ...
    exportTrailingSlash: true,
    async rewrites() {
      return [
        {
          source: '/404',
          destination: '/404',
        },
        {
          source: '/500',
          destination: '/500',
        },
      ]
    },
    async redirects() {
      return [
        {
          source: '/404',
          destination: '/404',
          permanent: true, // true means a 301 redirect
        },
        {
          source: '/500',
          destination: '/500',
          permanent: true,
        },
      ]
    },
    // ...
   }
   

5. Restart your server to see the changes take effect.

That's it! Now your Next.js application will show custom error pages for 404 and 500 errors.