diff --git a/create-app.ts b/create-app.ts
index 2f7db13a7f8c85a855efc045e3aa94006348ef29..f59a9e9a65dfe55c29a4741d6c3a28abfa38e72f 100644
--- a/create-app.ts
+++ b/create-app.ts
@@ -113,7 +113,7 @@ export async function createApp({
       path.join(root, "README.md"),
     );
   } else {
-    await installTemplate({ ...args, backend: true, forBackend: framework });
+    await installTemplate({ ...args, backend: true });
   }
 
   process.chdir(root);
diff --git a/helpers/types.ts b/helpers/types.ts
index 7422773731e9bcb79e6f153a4c4366274ecd1d3e..76be9af317babc463c508aec831e3df415df930f 100644
--- a/helpers/types.ts
+++ b/helpers/types.ts
@@ -41,7 +41,6 @@ export interface InstallTemplateArgs {
   customApiPath?: string;
   openAiKey?: string;
   llamaCloudKey?: string;
-  forBackend?: string;
   model: string;
   embeddingModel: string;
   communityProjectPath?: string;
diff --git a/helpers/typescript.ts b/helpers/typescript.ts
index bab6812f762dff286759f82d250ee9fd7a3bb00d..ae97c2e23f7a5dd7a8cf50ebd89448d6ed5cbb8e 100644
--- a/helpers/typescript.ts
+++ b/helpers/typescript.ts
@@ -61,10 +61,10 @@ export const installTSTemplate = async ({
   ui,
   eslint,
   customApiPath,
-  forBackend,
   vectorDb,
   postInstallAction,
-}: InstallTemplateArgs) => {
+  backend,
+}: InstallTemplateArgs & { backend: boolean }) => {
   console.log(bold(`Using ${packageManager}.`));
 
   /**
@@ -82,23 +82,20 @@ export const installTSTemplate = async ({
   });
 
   /**
-   * If the backend is next.js, rename next.config.app.js to next.config.js
-   * If not, rename next.config.static.js to next.config.js
+   * If next.js is not used as a backend, update next.config.js to use static site generation.
    */
-  if (framework == "nextjs" && forBackend === "nextjs") {
-    const nextConfigAppPath = path.join(root, "next.config.app.js");
-    const nextConfigPath = path.join(root, "next.config.js");
-    await fs.rename(nextConfigAppPath, nextConfigPath);
-    // delete next.config.static.js
-    const nextConfigStaticPath = path.join(root, "next.config.static.js");
-    await fs.rm(nextConfigStaticPath);
-  } else if (framework == "nextjs" && typeof forBackend === "undefined") {
-    const nextConfigStaticPath = path.join(root, "next.config.static.js");
-    const nextConfigPath = path.join(root, "next.config.js");
-    await fs.rename(nextConfigStaticPath, nextConfigPath);
-    // delete next.config.app.js
-    const nextConfigAppPath = path.join(root, "next.config.app.js");
-    await fs.rm(nextConfigAppPath);
+  if (framework === "nextjs" && !backend) {
+    // update next.config.json for static site generation
+    const nextConfigJsonFile = path.join(root, "next.config.json");
+    const nextConfigJson: any = JSON.parse(
+      await fs.readFile(nextConfigJsonFile, "utf8"),
+    );
+    nextConfigJson.output = "export";
+    nextConfigJson.images = { unoptimized: true };
+    await fs.writeFile(
+      nextConfigJsonFile,
+      JSON.stringify(nextConfigJson, null, 2) + os.EOL,
+    );
   }
 
   /**
diff --git a/templates/types/streaming/nextjs/next.config.app.js b/templates/types/streaming/nextjs/next.config.app.js
deleted file mode 100644
index 83b4de917a102cded1e6e3062f3085c221bc7502..0000000000000000000000000000000000000000
--- a/templates/types/streaming/nextjs/next.config.app.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  webpack: (config) => {
-    // See https://webpack.js.org/configuration/resolve/#resolvealias
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      sharp$: false,
-      "onnxruntime-node$": false,
-    };
-    return config;
-  },
-  experimental: {
-    outputFileTracingIncludes: {
-      "/*": ["./cache/**/*"],
-    },
-  },
-};
-
-module.exports = nextConfig;
diff --git a/templates/types/streaming/nextjs/next.config.json b/templates/types/streaming/nextjs/next.config.json
new file mode 100644
index 0000000000000000000000000000000000000000..64b603e1e7b39bc331911c2f83a5d6ff0798b9e1
--- /dev/null
+++ b/templates/types/streaming/nextjs/next.config.json
@@ -0,0 +1,15 @@
+{
+  "experimental": {
+    "outputFileTracingIncludes": {
+      "/*": ["./cache/**/*"]
+    }
+  },
+  "webpack": {
+    "resolve": {
+      "alias": {
+        "sharp$": false,
+        "onnxruntime-node$": false
+      }
+    }
+  }
+}
diff --git a/templates/types/streaming/nextjs/next.config.mjs b/templates/types/streaming/nextjs/next.config.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..f622453794ed50d2190ee348d19a91f861d19026
--- /dev/null
+++ b/templates/types/streaming/nextjs/next.config.mjs
@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+import fs from "fs";
+import _ from "lodash";
+
+const nextConfig = JSON.parse(fs.readFileSync("./next.config.json", "utf-8"));
+const webpackConfig = _.cloneDeep(nextConfig.webpack);
+
+// webpack config must be a function in NextJS, to use a JSON as config, we merge the settings from next.config.json
+nextConfig.webpack = (config) => {
+  return _.merge(config, webpackConfig);
+};
+
+export default nextConfig;
diff --git a/templates/types/streaming/nextjs/next.config.static.js b/templates/types/streaming/nextjs/next.config.static.js
deleted file mode 100644
index 92b89bde67598a113a9cdd74f048723093e07a77..0000000000000000000000000000000000000000
--- a/templates/types/streaming/nextjs/next.config.static.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  output: "export",
-  images: { unoptimized: true },
-  webpack: (config) => {
-    // See https://webpack.js.org/configuration/resolve/#resolvealias
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      sharp$: false,
-      "onnxruntime-node$": false,
-    };
-    return config;
-  },
-  experimental: {
-    outputFileTracingIncludes: {
-      "/*": ["./cache/**/*"],
-    },
-  },
-};
-
-module.exports = nextConfig;