Next.JS webpack config change

next.config.js

module.exports = {
  reactStrictMode: true,
  webpack: (config, options) => {
    config.externals = [
      ({request,}, callback) => {
        // Allow Webpack to handle fastly:* namespaced module imports by treating
        // them as modules rather than try to process them as URLs
        if (/^fastly:.*$/.test(request)) {
          return callback(null, 'commonjs ' + request);
        }
        callback();
      }
    ];
    return config
  },
  async headers() {
    return [
      {
        source: '/foo',
        headers: [
          {
            key: 'x-custom-header',
            value: 'my custom header value',
          },
        ],
      },
    ]
  },
};

if (!process.env.NEXT_COMPUTE_JS) {
  // Apply MDX loader only at compile time
  const withMDX = require('@next/mdx')({
    extension: /\.mdx?$/,
    options: {
      remarkPlugins: [],
      rehypePlugins: [],
    },
  });
  module.exports = withMDX({
    ...module.exports,
    // Append the default value with md extensions
    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  });
}