unicorn-utterances/next.config.js

const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const withPlugins = require("next-compose-plugins");
const webpack = require("webpack");
const languagesObj = require("./content/data/languages.json");

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withPlugins([withBundleAnalyzer], {
  i18n: {
    locales: Object.keys(languagesObj),
    defaultLocale: "en",
    localeDetection: false,
  },
  webpack: (config) => {
    config.plugins.push(
      new CopyPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, "content/blog"),
            to: path.resolve(__dirname, "public/posts"),
            globOptions: {
              ignore: ["**/*.md"],
            },
          },
          {
            from: path.resolve(__dirname, "content/collections"),
            to: path.resolve(__dirname, "public/collections"),
            globOptions: {
              ignore: ["**/*.md"],
            },
          },
          {
            from: path.resolve(__dirname, "content/data"),
            to: path.resolve(__dirname, "public/unicorns"),
            globOptions: {
              ignore: ["**/*.md", "**/*.json"],
            },
          },
        ],
      })
    );

    /**
     * 🐲 HERE ARE DRAGONS!
     *
     * This is a bad bad idea. Well, it leads to much better bundle size (50+kb!)
     * but it does so by dynamically replacing a module only for client (not server)
     *
     * For more explaination of why we're using webpack to do this, see `useMarkdownRenderer`
     */
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(
        /rehype-parse$/,
        "rehype-dom-parse"
      )
    );

    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
          options: {
            svgoConfig: {
              plugins: [
                {
                  name: "preset-default",
                  params: {
                    overrides: {
                      removeViewBox: false,
                    },
                  },
                },
              ],
            },
          },
        },
      ],
    });

    config.experiments.topLevelAwait = true;

    return config;
  },
});