Set App Hosting overrides for NextJS apps without a Next Config

packages/@apphosting/adapter-nextjs/e2e/config-override-test-cases.yaml

@@ -200,3 +200,4 @@ tests:
 
       module.exports = nextConfig;
     file: next.config.js
+  - name: without-a-next-config

packages/@apphosting/adapter-nextjs/e2e/config-override.spec.ts

@@ -30,7 +30,7 @@ const compiledFilesPath = posix.join(
 const requiredServerFilePath = posix.join(compiledFilesPath, "required-server-files.json");
 
 describe("next.config override", () => {
-  it("should have images optimization disabled", async function () {
+  it("should have image optimization disabled", async function () {
     if (
       scenario.includes("with-empty-config") ||
       scenario.includes("with-images-unoptimized-false") ||
@@ -53,7 +53,7 @@ describe("next.config override", () => {
   });
 
   it("should preserve other user set next configs", async function () {
-    if (scenario.includes("with-empty-config")) {
+    if (scenario.includes("with-empty-config") || scenario.includes("without-a-next-config")) {
       // eslint-disable-next-line @typescript-eslint/no-invalid-this
       this.skip();
     }

packages/@apphosting/adapter-nextjs/e2e/run-local.ts

@@ -53,10 +53,9 @@ const scenarios: Scenario[] = [
     tests: ["middleware.spec.ts"], // Only run middleware-specific tests
   },
   ...configOverrideTestScenarios.map(
-    (scenario: { name: string; config: string; file: string }) => ({
+    (scenario: { name: string; config?: string; file?: string }) => ({
       name: scenario.name,
       setup: async (cwd: string) => {
-        const configContent = scenario.config;
         const files = await fsExtra.readdir(cwd);
         const configFiles = files
           .filter((file) => file.startsWith("next.config."))
@@ -67,6 +66,12 @@ const scenarios: Scenario[] = [
           console.log(`Removed existing config file: ${file}`);
         }
 
+        // skip creating the test config if data is not provided
+        if (!scenario.config || !scenario.file) {
+          return;
+        }
+
+        const configContent = scenario.config;
         await fsExtra.writeFile(join(cwd, scenario.file), configContent);
         console.log(`Created ${scenario.file} file with ${scenario.name} config`);
       },

packages/@apphosting/adapter-nextjs/src/bin/build.ts

@@ -5,7 +5,6 @@ import {
   generateBuildOutput,
   validateOutputDirectory,
   getAdapterMetadata,
-  exists,
 } from "../utils.js";
 import { join } from "path";
 import { getBuildOptions, runBuild } from "@apphosting/common";
@@ -30,16 +29,14 @@ const originalConfig = await loadConfig(root, opts.projectDirectory);
  * load.
  *
  * If the app does not have a next.config.[js|mjs|ts] file in the first place,
- * then can skip config override.
+ * then one is created with the overrides.
  *
  * Note: loadConfig always returns a fileName (default: next.config.js) even if
  * one does not exist in the app's root: https://github.com/vercel/next.js/blob/23681508ca34b66a6ef55965c5eac57de20eb67f/packages/next/src/server/config.ts#L1115
  */
-const originalConfigPath = join(root, originalConfig.configFileName);
-if (await exists(originalConfigPath)) {
-  await overrideNextConfig(root, originalConfig.configFileName);
-  await validateNextConfigOverride(root, opts.projectDirectory, originalConfig.configFileName);
-}
+
+await overrideNextConfig(root, originalConfig.configFileName);
+await validateNextConfigOverride(root, opts.projectDirectory, originalConfig.configFileName);
 
 await runBuild();
 

packages/@apphosting/adapter-nextjs/src/overrides.spec.ts

@@ -172,20 +172,32 @@ describe("next config overrides", () => {
     ...config,
     images: {
       ...(config.images || {}),
-      ...(config.images?.unoptimized === undefined && config.images?.loader === undefined 
-          ? { unoptimized: true } 
+      ...(config.images?.unoptimized === undefined && config.images?.loader === undefined
+          ? { unoptimized: true }
           : {}),
     },
   });
 
-  const config = typeof originalConfig === 'function' 
+  const config = typeof originalConfig === 'function'
     ? async (...args) => {
         const resolvedConfig = await originalConfig(...args);
         return fahOptimizedConfig(resolvedConfig);
       }
     : fahOptimizedConfig(originalConfig);
   `;
 
+  const defaultNextConfig = `
+    // @ts-nocheck
+
+    /** @type {import('next').NextConfig} */
+    const nextConfig = {
+      images: {
+        unoptimized: true,
+      }
+    }
+
+    module.exports = nextConfig
+  `;
   beforeEach(() => {
     tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "test-overrides"));
   });
@@ -194,12 +206,12 @@ describe("next config overrides", () => {
     const { overrideNextConfig } = await importOverrides;
     const originalConfig = `
     // @ts-check
- 
+
     /** @type {import('next').NextConfig} */
     const nextConfig = {
       /* config options here */
     }
-    
+
     module.exports = nextConfig
     `;
 
@@ -213,7 +225,7 @@ describe("next config overrides", () => {
       normalizeWhitespace(`
       // @ts-nocheck
       const originalConfig = require('./next.config.original.js');
-      
+
       ${nextConfigOverrideBody}
 
       module.exports = config;
@@ -225,14 +237,14 @@ describe("next config overrides", () => {
     const { overrideNextConfig } = await importOverrides;
     const originalConfig = `
     // @ts-check
-    
+
     /**
      * @type {import('next').NextConfig}
      */
     const nextConfig = {
       /* config options here */
     }
-    
+
     export default nextConfig
     `;
 
@@ -257,7 +269,7 @@ describe("next config overrides", () => {
     const { overrideNextConfig } = await importOverrides;
     const originalConfig = `
     // @ts-check
-    
+
     export default (phase, { defaultConfig }) => {
       /**
        * @type {import('next').NextConfig}
@@ -280,7 +292,7 @@ describe("next config overrides", () => {
       import originalConfig from './next.config.original.mjs';
 
       ${nextConfigOverrideBody}
-      
+
       export default config;
       `),
     );
@@ -290,11 +302,11 @@ describe("next config overrides", () => {
     const { overrideNextConfig } = await importOverrides;
     const originalConfig = `
     import type { NextConfig } from 'next'
-    
+
     const nextConfig: NextConfig = {
       /* config options here */
     }
-    
+
     export default nextConfig
     `;
 
@@ -307,42 +319,37 @@ describe("next config overrides", () => {
       normalizeWhitespace(`
       // @ts-nocheck
       import originalConfig from './next.config.original';
-      
+
       ${nextConfigOverrideBody}
-      
+
       module.exports = config;
       `),
     );
   });
 
-  it("should not do anything if no next.config.* file exists", async () => {
+  it("should create a default next.config.js file if one does not exist yet", async () => {
     const { overrideNextConfig } = await importOverrides;
     await overrideNextConfig(tmpDir, "next.config.js");
-
-    // Assert that no next.config* files were created
-    const files = fs.readdirSync(tmpDir);
-    const nextConfigFiles = files.filter((file) => file.startsWith("next.config"));
-    assert.strictEqual(nextConfigFiles.length, 0, "No next.config files should exist");
+    const updatedConfig = fs.readFileSync(path.join(tmpDir, "next.config.js"), "utf-8");
+    assert.equal(normalizeWhitespace(updatedConfig), normalizeWhitespace(defaultNextConfig));
   });
 });
 
 describe("validateNextConfigOverride", () => {
   let tmpDir: string;
   let root: string;
   let projectRoot: string;
-  let originalConfigFileName: string;
-  let newConfigFileName: string;
-  let originalConfigPath: string;
-  let newConfigPath: string;
+  let configFileName: string;
+  let preservedConfigFileName: string;
+  let preservedConfigFilePath: string;
 
   beforeEach(() => {
     tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "test-next-config-override"));
     root = tmpDir;
     projectRoot = tmpDir;
-    originalConfigFileName = "next.config.js";
-    newConfigFileName = "next.config.original.js";
-    originalConfigPath = path.join(root, originalConfigFileName);
-    newConfigPath = path.join(root, newConfigFileName);
+    configFileName = "next.config.js";
+    preservedConfigFileName = "next.config.original.js";
+    preservedConfigFilePath = path.join(root, preservedConfigFileName);
 
     fs.mkdirSync(root, { recursive: true });
   });
@@ -351,25 +358,23 @@ describe("validateNextConfigOverride", () => {
     fs.rmSync(tmpDir, { recursive: true, force: true });
   });
 
-  it("should throw an error when new config file doesn't exist", async () => {
-    fs.writeFileSync(originalConfigPath, "module.exports = {}");
-
+  it("should throw an error if a next config file was not created because the user did not have one", async () => {
     const { validateNextConfigOverride } = await importOverrides;
 
     await assert.rejects(
-      async () => await validateNextConfigOverride(root, projectRoot, originalConfigFileName),
-      /New Next.js config file not found/,
+      async () => await validateNextConfigOverride(root, projectRoot, configFileName),
+      /Next.js config file not found/,
     );
   });
 
-  it("should throw an error when original config file doesn't exist", async () => {
-    fs.writeFileSync(newConfigPath, "module.exports = {}");
+  it("should throw an error when main config file doesn't exist", async () => {
+    fs.writeFileSync(preservedConfigFilePath, "module.exports = {}");
 
     const { validateNextConfigOverride } = await importOverrides;
 
     await assert.rejects(
-      async () => await validateNextConfigOverride(root, projectRoot, originalConfigFileName),
-      /Original Next.js config file not found/,
+      async () => await validateNextConfigOverride(root, projectRoot, configFileName),
+      /Next Config Override Failed: Next.js config file not found/,
     );
   });
 });

packages/@apphosting/adapter-nextjs/src/overrides.ts

@@ -10,26 +10,38 @@ import {
 import { join, extname } from "path";
 import { rename as renamePromise } from "fs/promises";
 
+const DEFAULT_NEXT_CONFIG_FILE = "next.config.js";
+
 /**
  * Overrides the user's Next Config file (next.config.[ts|js|mjs]) to add configs
  * optimized for Firebase App Hosting.
  */
 export async function overrideNextConfig(projectRoot: string, nextConfigFileName: string) {
   console.log(`Overriding Next Config to add configs optmized for Firebase App Hosting`);
-  // Check if the file exists in the current working directory
-  const configPath = join(projectRoot, nextConfigFileName);
-
-  if (!(await exists(configPath))) {
-    console.log(`No Next.js config file found at ${configPath}`);
+  const userNextConfigExists = await exists(join(projectRoot, nextConfigFileName));
+  if (!userNextConfigExists) {
+    console.log(`No Next config file found, creating one with Firebase App Hosting overrides`);
+    try {
+      await writeFile(join(projectRoot, DEFAULT_NEXT_CONFIG_FILE), defaultNextConfigForFAH());
+      console.log(
+        `Successfully created ${DEFAULT_NEXT_CONFIG_FILE} with Firebase App Hosting overrides`,
+      );
+    } catch (error) {
+      console.error(`Error creating ${DEFAULT_NEXT_CONFIG_FILE}: ${error}`);
+      throw error;
+    }
     return;
   }
 
+  // A Next Config already exists in the user's project, so it needs to be overriden
+
   // Determine the file extension
   const fileExtension = extname(nextConfigFileName);
   const originalConfigName = `next.config.original${fileExtension}`;
 
   // Rename the original config file
   try {
+    const configPath = join(projectRoot, nextConfigFileName);
     const originalPath = join(projectRoot, originalConfigName);
     await renamePromise(configPath, originalPath);
 
@@ -104,30 +116,47 @@ function getCustomNextConfig(importStatement: string, fileExtension: string) {
 }
 
 /**
- * This function is used to validate the state of an app after running the
+ * Returns the default Next Config file that is created in the user's project
+ * if one does not exist already. This config ensures the Next.Js app is optimized
+ * for Firebase App Hosting.
+ */
+function defaultNextConfigForFAH() {
+  return `
+    // @ts-nocheck
+
+    /** @type {import('next').NextConfig} */
+    const nextConfig = {
+      images: {
+        unoptimized: true,
+      }
+    }
+
+    module.exports = nextConfig
+  `;
+}
+
+/**
+ * This function is used to validate the state of an app after running
  * overrideNextConfig. It validates that:
- *  1. original next config is preserved
- *  2. a new next config is created
- *  3. new next config can be loaded by NextJs without any issues.
+ *  1. if user has a next config it is preserved in a next.config.original.[js|ts|mjs] file
+ *  2. a next config exists (should be created with FAH overrides
+ *     even if user did not create one)
+ *  3. next config can be loaded by NextJs without any issues.
  */
 export async function validateNextConfigOverride(
   root: string,
   projectRoot: string,
-  originalConfigFileName: string,
+  configFileName: string,
 ) {
-  const originalConfigExtension = extname(originalConfigFileName);
-  const newConfigFileName = `next.config.original${originalConfigExtension}`;
-  const newConfigFilePath = join(root, newConfigFileName);
-  if (!(await exists(newConfigFilePath))) {
-    throw new Error(
-      `Next Config Override Failed: New Next.js config file not found at ${newConfigFilePath}`,
-    );
-  }
+  const userNextConfigExists = await exists(join(root, configFileName));
+  const configFilePath = join(
+    root,
+    userNextConfigExists ? configFileName : DEFAULT_NEXT_CONFIG_FILE,
+  );
 
-  const originalNextConfigFilePath = join(root, originalConfigFileName);
-  if (!(await exists(originalNextConfigFilePath))) {
+  if (!(await exists(configFilePath))) {
     throw new Error(
-      `Next Config Override Failed: Original Next.js config file not found at ${originalNextConfigFilePath}`,
+      `Next Config Override Failed: Next.js config file not found at ${configFilePath}`,
     );
   }