refactor: clean nextjs config generation (use JSON) (#631)

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);

helpers/types.ts

@@ -41,7 +41,6 @@ export interface InstallTemplateArgs {
   customApiPath?: string;
   openAiKey?: string;
   llamaCloudKey?: string;
-  forBackend?: string;
   model: string;
   embeddingModel: string;
   communityProjectPath?: string;

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,
+    );
   }
 
   /**

templates/types/streaming/nextjs/next.config.app.js

-/** @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;

templates/types/streaming/nextjs/next.config.json

+{
+  "experimental": {
+    "outputFileTracingIncludes": {
+      "/*": ["./cache/**/*"]
+    }
+  },
+  "webpack": {
+    "resolve": {
+      "alias": {
+        "sharp$": false,
+        "onnxruntime-node$": false
+      }
+    }
+  }
+}

templates/types/streaming/nextjs/next.config.mjs

+/** @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;

templates/types/streaming/nextjs/next.config.static.js

-/** @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;