next.config.js

/** @type {import("next").NextConfig} */
module.exports = {
  reactStrictMode: true,
  trailingSlash: true,
  // when building for github pages, set the following
  ...(process.env.NEXT_PUBLIC_GH_DEPLOY
    ? {
        basePath: "/element-frontend",
        assetPrefix: "/element-frontend", // ensures relative paths for assets
      }
    : {}),

  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },

  webpack(config) {
    // https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      oneOf: [
        // To import an svg as a url (to be used as an img src), add ?url to
        // the end of the import path.
        // Example: import sampleImgSrc from "sample.svg?url"
        {
          resourceQuery: /url/,
          type: "asset",
        },

        {
          loader: "@svgr/webpack",

          // important to prevent rendering broken SVGs
          options: {
            svgo: true,
            svgoConfig: {
              plugins: [{ removeViewBox: false }],
            },
          },
        },
      ],
    });

    return config;
  },
};