chore(deps): update to next config to address build errors

web/.knip.json

@@ -11,14 +11,13 @@
 		"public/**",
 		"tests/**",
 		"i18n/index.js",
-		"i18next-parser.config.mjs",
+		"i18next-parser.config.mjs"
 	],
 	"ignoreDependencies": [
 		"@fontsource/inter",
 		"@fontsource/poppins",
 		"@next/bundle-analyzer",
 		"autoprefixer",
-		"webpack-deadcode-plugin",
 		"yaml",
 		"postcss-flexbugs-fixes",
 		"sharp",
@@ -33,9 +32,7 @@
 		"@storybook/addon-links",
 		"@storybook/addon-postcss",
 		"@storybook/addon-viewport",
-		"@storybook/builder-webpack5",
 		"@storybook/cli",
-		"@storybook/manager-webpack5",
 		"@storybook/mdx2-csf",
 		"@storybook/preset-scss",
 		"@mdx-js/react",
@@ -66,16 +63,13 @@
 		"less-loader",
 		"mdx-mermaid",
 		"mermaid",
-		"prettier",
 		"sass-loader",
 		"sb",
-		"storybook-addon-designs",
 		"storybook-addon-fetch-mock",
 		"storybook-preset-less",
 		"style-loader",
 		"ts-jest",
 		"stylelint-config-standard",
-		"stylelint-config-standard-scss",
 		"postcss",
 		"stylelint",
 		"@babel/core",

web/next.config.js

@@ -2,7 +2,7 @@ const withLess = require('next-with-less');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
-
+const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
 const runtimeCaching = require('next-pwa/cache');
 
 const withPWA = require('next-pwa')({
@@ -31,29 +31,8 @@ const withPWA = require('next-pwa')({
   disable: process.env.NODE_ENV === 'development',
 });
 
-module.exports = withPWA(
-  withBundleAnalyzer(
-    withLess({
-      productionBrowserSourceMaps: process.env.SOURCE_MAPS === 'true',
-      trailingSlash: true,
-      reactStrictMode: true,
-      images: {
-        unoptimized: true,
-      },
-      swcMinify: true,
-      output: 'export',
-      webpack(config) {
-        config.module.rules.push({
-          test: /\.svg$/i,
-          issuer: /\.[jt]sx?$/,
-          use: ['@svgr/webpack'],
-        });
-
-        return config;
-      },
-      async rewrites() {
-        return process.env.NODE_ENV === 'development'
-          ? [
+async function rewrites() {
+  return [
     {
       source: '/api/:path*',
       destination: 'http://localhost:8080/api/:path*', // Proxy to Backend to work around CORS.
@@ -78,10 +57,47 @@ module.exports = withPWA(
       source: '/customjavascript',
       destination: 'http://localhost:8080/customjavascript', // Proxy to Backend to work around CORS.
     },
-            ]
-          : null;
+  ];
+}
+
+module.exports = async phase => {
+  /**
+   * @type {import('next').NextConfig}
+   */
+  let nextConfig = withPWA(
+    withBundleAnalyzer(
+      withLess({
+        productionBrowserSourceMaps: process.env.SOURCE_MAPS === 'true',
+        trailingSlash: true,
+        reactStrictMode: true,
+        images: {
+          unoptimized: true,
+        },
+        swcMinify: true,
+        webpack(config) {
+          config.module.rules.push({
+            test: /\.svg$/i,
+            issuer: /\.[jt]sx?$/,
+            use: ['@svgr/webpack'],
+          });
+
+          return config;
         },
         pageExtensions: ['tsx'],
       }),
     ),
-);
+  );
+
+  if (phase === PHASE_DEVELOPMENT_SERVER) {
+    nextConfig = {
+      ...nextConfig,
+      rewrites,
+    };
+  } else {
+    nextConfig = {
+      ...nextConfig,
+      output: 'export',
+    };
+  }
+  return nextConfig;
+};