feat(cpa): warn on unsupported Next.js version (#7434)

Improves messaging if running an unsupported version of Next.js.

Closes #7430

Author: denolfe

packages/create-payload-app/src/lib/init-next.ts

@@ -240,25 +240,63 @@ async function installDeps(projectDir: string, packageManager: PackageManager, d
 export async function getNextAppDetails(projectDir: string): Promise<NextAppDetails> {
   const isSrcDir = fs.existsSync(path.resolve(projectDir, 'src'))
 
+  // Match next.config.js, next.config.ts, next.config.mjs, next.config.cjs
   const nextConfigPath: string | undefined = (
-    await globby('next.config.*(t|j)s', { absolute: true, cwd: projectDir })
+    await globby('next.config.(\\w)?(t|j)s', { absolute: true, cwd: projectDir })
   )?.[0]
 
   if (!nextConfigPath || nextConfigPath.length === 0) {
     return {
       hasTopLevelLayout: false,
       isSrcDir,
+      isSupportedNextVersion: false,
       nextConfigPath: undefined,
+      nextVersion: null,
     }
   }
 
   const packageObj = await fse.readJson(path.resolve(projectDir, 'package.json'))
+  // Check if Next.js version is new enough
+  let nextVersion = null
+  if (packageObj.dependencies?.next) {
+    nextVersion = packageObj.dependencies.next
+    // Match versions using regex matching groups
+    const versionMatch = /(?<major>\d+)/.exec(nextVersion)
+    if (!versionMatch) {
+      p.log.warn(`Could not determine Next.js version from ${nextVersion}`)
+      return {
+        hasTopLevelLayout: false,
+        isSrcDir,
+        isSupportedNextVersion: false,
+        nextConfigPath,
+        nextVersion,
+      }
+    }
+
+    const { major } = versionMatch.groups as { major: string }
+    const majorVersion = parseInt(major)
+    if (majorVersion < 15) {
+      return {
+        hasTopLevelLayout: false,
+        isSrcDir,
+        isSupportedNextVersion: false,
+        nextConfigPath,
+        nextVersion,
+      }
+    }
+  }
+
+  const isSupportedNextVersion = true
+
+  // Check if Payload already installed
   if (packageObj.dependencies?.payload) {
     return {
       hasTopLevelLayout: false,
       isPayloadInstalled: true,
       isSrcDir,
+      isSupportedNextVersion,
       nextConfigPath,
+      nextVersion,
     }
   }
 
@@ -281,7 +319,15 @@ export async function getNextAppDetails(projectDir: string): Promise<NextAppDeta
     ? fs.existsSync(path.resolve(nextAppDir, 'layout.tsx'))
     : false
 
-  return { hasTopLevelLayout, isSrcDir, nextAppDir, nextConfigPath, nextConfigType: configType }
+  return {
+    hasTopLevelLayout,
+    isSrcDir,
+    isSupportedNextVersion,
+    nextAppDir,
+    nextConfigPath,
+    nextConfigType: configType,
+    nextVersion,
+  }
 }
 
 function getProjectType(args: {

packages/create-payload-app/src/main.ts

@@ -85,7 +85,22 @@ export class Main {
 
       // Detect if inside Next.js project
       const nextAppDetails = await getNextAppDetails(process.cwd())
-      const { hasTopLevelLayout, isPayloadInstalled, nextAppDir, nextConfigPath } = nextAppDetails
+      const {
+        hasTopLevelLayout,
+        isPayloadInstalled,
+        isSupportedNextVersion,
+        nextAppDir,
+        nextConfigPath,
+        nextVersion,
+      } = nextAppDetails
+
+      if (nextConfigPath && !isSupportedNextVersion) {
+        p.log.warn(
+          `Next.js v${nextVersion} is unsupported. Next.js >= 15 is required to use Payload.`,
+        )
+        p.outro(feedbackOutro())
+        process.exit(0)
+      }
 
       // Upgrade Payload in existing project
       if (isPayloadInstalled && nextConfigPath) {

packages/create-payload-app/src/types.ts

@@ -70,9 +70,11 @@ export type NextAppDetails = {
   hasTopLevelLayout: boolean
   isPayloadInstalled?: boolean
   isSrcDir: boolean
+  isSupportedNextVersion: boolean
   nextAppDir?: string
   nextConfigPath?: string
   nextConfigType?: NextConfigType
+  nextVersion: null | string
 }
 
 export type NextConfigType = 'cjs' | 'esm' | 'ts'