next.config.mjs

import * as fs from 'fs';
import bsconfig from './bsconfig.json' assert {type: 'json'};

import nextTranspileModule from 'next-transpile-modules'

const transpileModules = ["rescript"].concat(bsconfig["bs-dependencies"]);
const withTM = nextTranspileModule(transpileModules);

const isWebpack5 = true;

/**
 * @type {import('next').NextConfig}
 */
const config = {
  pageExtensions: ["jsx", "js", "mjs"],
  env: {
    ENV: process.env.NODE_ENV,
  },
  webpack: (config, options) => {
    const { isServer } = options;

    if (isWebpack5) {
      if (!isServer) {
        // We shim fs for things like the blog slugs component
        // where we need fs access in the server-side part
        config.resolve.fallback = {
          fs: false,
          path: false,
        };
      }

      // We need this additional rule to make sure that mjs files are
      // correctly detected within our src/ folder
      config.module.rules.push({
        test: /\.m?js$/,
        use: options.defaultLoaders.babel,
        exclude: /node_modules/,
        type: "javascript/auto",
        resolve: {
          fullySpecified: false,
        }
      });
    }
    return config
  },
  future: {
    webpack5: isWebpack5
  }
};

export default withTM(config);