chore: extracts dependency checker from root layout (#9272)

Cleans up the Root Layout by extracting the dependency checker and
related code away from component logic.

packages/next/src/layouts/Root/checkDependencies.ts

@@ -0,0 +1,55 @@
+import { type CustomVersionParser, checkDependencies as payloadCheckDependencies } from 'payload'
+
+const customReactVersionParser: CustomVersionParser = (version) => {
+  const [mainVersion, ...preReleases] = version.split('-')
+
+  if (preReleases?.length === 3) {
+    // Needs different handling, as it's in a format like 19.0.0-rc-06d0b89e-20240801 format
+    const date = preReleases[2]
+
+    const parts = mainVersion.split('.').map(Number)
+    return { parts, preReleases: [date] }
+  }
+
+  const parts = mainVersion.split('.').map(Number)
+  return { parts, preReleases }
+}
+
+let checkedDependencies = false
+
+export const checkDependencies = async () => {
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    process.env.PAYLOAD_DISABLE_DEPENDENCY_CHECKER !== 'true' &&
+    !checkedDependencies
+  ) {
+    checkedDependencies = true
+
+    // First check if there are mismatching dependency versions of next / react packages
+    await payloadCheckDependencies({
+      dependencyGroups: [
+        {
+          name: 'react',
+          dependencies: ['react', 'react-dom'],
+          targetVersionDependency: 'react',
+        },
+      ],
+      dependencyVersions: {
+        next: {
+          required: false,
+          version: '>=15.0.0',
+        },
+        react: {
+          customVersionParser: customReactVersionParser,
+          required: false,
+          version: '>=19.0.0-rc-65a56d0e-20241020',
+        },
+        'react-dom': {
+          customVersionParser: customReactVersionParser,
+          required: false,
+          version: '>=19.0.0-rc-65a56d0e-20241020',
+        },
+      },
+    })
+  }
+}

packages/next/src/layouts/Root/index.tsx

@@ -1,11 +1,10 @@
 import type { AcceptedLanguages } from '@payloadcms/translations'
-import type { CustomVersionParser, ImportMap, SanitizedConfig, ServerFunctionClient } from 'payload'
+import type { ImportMap, SanitizedConfig, ServerFunctionClient } from 'payload'
 
 import { rtlLanguages } from '@payloadcms/translations'
 import { RootProvider } from '@payloadcms/ui'
-import '@payloadcms/ui/scss/app.scss'
 import { headers as getHeaders, cookies as nextCookies } from 'next/headers.js'
-import { checkDependencies, getPayload, parseCookies } from 'payload'
+import { getPayload, parseCookies } from 'payload'
 import React from 'react'
 
 import { getNavPrefs } from '../../elements/Nav/getNavPrefs.js'
@@ -13,30 +12,16 @@ import { getClientConfig } from '../../utilities/getClientConfig.js'
 import { getRequestLanguage } from '../../utilities/getRequestLanguage.js'
 import { getRequestTheme } from '../../utilities/getRequestTheme.js'
 import { initReq } from '../../utilities/initReq.js'
+import { checkDependencies } from './checkDependencies.js'
 import { NestProviders } from './NestProviders.js'
 
+import '@payloadcms/ui/scss/app.scss'
+
 export const metadata = {
   description: 'Generated by Next.js',
   title: 'Next.js',
 }
 
-const customReactVersionParser: CustomVersionParser = (version) => {
-  const [mainVersion, ...preReleases] = version.split('-')
-
-  if (preReleases?.length === 3) {
-    // Needs different handling, as it's in a format like 19.0.0-rc-06d0b89e-20240801 format
-    const date = preReleases[2]
-
-    const parts = mainVersion.split('.').map(Number)
-    return { parts, preReleases: [date] }
-  }
-
-  const parts = mainVersion.split('.').map(Number)
-  return { parts, preReleases }
-}
-
-let checkedDependencies = false
-
 export const RootLayout = async ({
   children,
   config: configPromise,
@@ -48,40 +33,7 @@ export const RootLayout = async ({
   readonly importMap: ImportMap
   readonly serverFunction: ServerFunctionClient
 }) => {
-  if (
-    process.env.NODE_ENV !== 'production' &&
-    process.env.PAYLOAD_DISABLE_DEPENDENCY_CHECKER !== 'true' &&
-    !checkedDependencies
-  ) {
-    // eslint-disable-next-line react-compiler/react-compiler
-    checkedDependencies = true
-    // First check if there are mismatching dependency versions of next / react packages
-    await checkDependencies({
-      dependencyGroups: [
-        {
-          name: 'react',
-          dependencies: ['react', 'react-dom'],
-          targetVersionDependency: 'react',
-        },
-      ],
-      dependencyVersions: {
-        next: {
-          required: false,
-          version: '>=15.0.0',
-        },
-        react: {
-          customVersionParser: customReactVersionParser,
-          required: false,
-          version: '>=19.0.0-rc-65a56d0e-20241020',
-        },
-        'react-dom': {
-          customVersionParser: customReactVersionParser,
-          required: false,
-          version: '>=19.0.0-rc-65a56d0e-20241020',
-        },
-      },
-    })
-  }
+  await checkDependencies()
 
   const config = await configPromise
 
@@ -102,7 +54,7 @@ export const RootLayout = async ({
 
   const payload = await getPayload({ config })
 
-  const { i18n, permissions, req, user } = await initReq(config)
+  const { i18n, permissions, user } = await initReq(config)
 
   const dir = (rtlLanguages as unknown as AcceptedLanguages[]).includes(languageCode)
     ? 'RTL'