Refactor app dir related flags

packages/next-plugin-storybook/preset.js

@@ -6,8 +6,8 @@ const getWebpackConfig = require('next/dist/build/webpack-config').default
 const CWD = process.cwd()
 
 async function webpackFinal(config) {
-  const pagesDir = findPagesDir(CWD)
   const nextConfig = await loadConfig(PHASE_PRODUCTION_BUILD, CWD)
+  const pagesDir = findPagesDir(CWD, !!nextConfig.experimental.appDir)
   const nextWebpackConfig = await getWebpackConfig(CWD, {
     pagesDir,
     entrypoints: {},

packages/next/build/entries.ts

@@ -164,7 +164,7 @@ export function getEdgeServerEntry(opts: {
   page: string
   pages: { [page: string]: string }
   middleware?: Partial<MiddlewareConfig>
-  pagesType?: 'app' | 'pages' | 'root'
+  pagesType: 'app' | 'pages' | 'root'
   appDirLoader?: string
 }) {
   if (isMiddlewareFile(opts.page)) {
@@ -526,13 +526,13 @@ export function finalizeEntrypoint({
   compilerType,
   value,
   isServerComponent,
-  appDir,
+  hasAppDir,
 }: {
   compilerType?: CompilerNameValues
   name: string
   value: ObjectValue<webpack.EntryObject>
   isServerComponent?: boolean
-  appDir?: boolean
+  hasAppDir?: boolean
 }): ObjectValue<webpack.EntryObject> {
   const entry =
     typeof value !== 'object' || Array.isArray(value)
@@ -575,7 +575,7 @@ export function finalizeEntrypoint({
     name !== CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH
   ) {
     // TODO-APP: this is a temporary fix. @shuding is going to change the handling of server components
-    if (appDir && entry.import.includes('flight')) {
+    if (hasAppDir && entry.import.includes('flight')) {
       return {
         dependOn: CLIENT_STATIC_FILES_RUNTIME_MAIN_APP,
         ...entry,

packages/next/build/index.ts

@@ -301,10 +301,8 @@ export default async function build(
       setGlobal('telemetry', telemetry)
 
       const publicDir = path.join(dir, 'public')
-      const { pages: pagesDir, appDir } = findPagesDir(
-        dir,
-        config.experimental.appDir
-      )
+      const hasAppDir = !!config.experimental.appDir
+      const { pagesDir, appDir } = findPagesDir(dir, hasAppDir)
 
       const hasPublicDir = await fileExists(publicDir)
 
@@ -396,7 +394,7 @@ export default async function build(
                   config.experimental.cpus,
                   config.experimental.workerThreads,
                   telemetry,
-                  !!config.experimental.appDir
+                  hasAppDir
                 )
               }),
         ])
@@ -1990,7 +1988,7 @@ export default async function build(
         combinedPages.length > 0 ||
         useStatic404 ||
         useDefaultStatic500 ||
-        config.experimental.appDir
+        hasAppDir
       ) {
         const staticGenerationSpan =
           nextBuildSpan.traceChild('static-generation')

packages/next/build/jest/jest.ts

@@ -64,14 +64,18 @@ export default function nextJest(options: { dir?: string } = {}) {
       let resolvedBaseUrl
       let isEsmProject = false
       let pagesDir: string | undefined
+      let hasServerComponents: boolean | undefined
 
       if (options.dir) {
         const resolvedDir = resolve(options.dir)
-        pagesDir = findPagesDir(resolvedDir).pages
         const packageConfig = loadClosestPackageJson(resolvedDir)
         isEsmProject = packageConfig.type === 'module'
 
         nextConfig = await getConfig(resolvedDir)
+        const hasAppDir = !!nextConfig.experimental.appDir
+        const findPagesDirResult = findPagesDir(resolvedDir, hasAppDir)
+        hasServerComponents = !!findPagesDirResult.appDir
+        pagesDir = findPagesDirResult.pagesDir
         setUpEnv(resolvedDir, nextConfig)
         // TODO: revisit when bug in SWC is fixed that strips `.css`
         const result = await loadJsConfig(resolvedDir, nextConfig)
@@ -134,6 +138,7 @@ export default function nextJest(options: { dir?: string } = {}) {
               nextConfig,
               jsConfig,
               resolvedBaseUrl,
+              hasServerComponents,
               isEsmProject,
               pagesDir,
             },

packages/next/build/swc/jest-transformer.js

@@ -48,6 +48,7 @@ module.exports = {
         jsConfig: inputOptions.jsConfig,
         resolvedBaseUrl: inputOptions.resolvedBaseUrl,
         pagesDir: inputOptions.pagesDir,
+        hasServerComponents: inputOptions.hasServerComponents,
         esm:
           isSupportEsm &&
           isEsm(Boolean(inputOptions.isEsmProject), filename, jestConfig),

packages/next/build/swc/options.js

@@ -34,6 +34,7 @@ function getBaseSWCOptions({
   swcCacheDir,
   isServerLayer,
   relativeFilePathFromRoot,
+  hasServerComponents,
 }) {
   const parserConfig = getParserOptions({ filename, jsConfig })
   const paths = jsConfig?.compilerOptions?.paths
@@ -119,7 +120,7 @@ function getBaseSWCOptions({
     modularizeImports: nextConfig?.experimental?.modularizeImports,
     relay: nextConfig?.compiler?.relay,
     emotion: getEmotionOptions(nextConfig, development),
-    serverComponents: nextConfig?.experimental?.appDir
+    serverComponents: hasServerComponents
       ? {
           isServer: !!isServerLayer,
         }
@@ -180,6 +181,7 @@ export function getJestSWCOptions({
   nextConfig,
   jsConfig,
   pagesDir,
+  hasServerComponents,
   // This is not passed yet as "paths" resolving needs a test first
   // resolvedBaseUrl,
 }) {
@@ -191,6 +193,7 @@ export function getJestSWCOptions({
     globalWindow: !isServer,
     nextConfig,
     jsConfig,
+    hasServerComponents,
     // resolvedBaseUrl,
   })
 
@@ -226,6 +229,7 @@ export function getLoaderSWCOptions({
   supportedBrowsers,
   swcCacheDir,
   relativeFilePathFromRoot,
+  hasServerComponents,
   // This is not passed yet as "paths" resolving is handled by webpack currently.
   // resolvedBaseUrl,
 }) {
@@ -240,6 +244,7 @@ export function getLoaderSWCOptions({
     swcCacheDir,
     isServerLayer,
     relativeFilePathFromRoot,
+    hasServerComponents,
   })
 
   const isNextDist = nextDistPath.test(filename)

packages/next/build/webpack-config.ts

@@ -33,9 +33,9 @@ import { execOnce } from '../shared/lib/utils'
 import { NextConfigComplete } from '../server/config-shared'
 import { finalizeEntrypoint } from './entries'
 import * as Log from './output/log'
-import { build as buildConfiguration } from './webpack/config'
+import { buildConfiguration } from './webpack/config'
 import MiddlewarePlugin, {
-  handleWebpackExtenalForEdgeRuntime,
+  handleWebpackExternalForEdgeRuntime,
 } from './webpack/plugins/middleware-plugin'
 import BuildManifestPlugin from './webpack/plugins/build-manifest-plugin'
 import { JsConfigPathsPlugin } from './webpack/plugins/jsconfig-paths-plugin'
@@ -563,6 +563,10 @@ export default async function getBaseWebpackConfig(
     rewrites.afterFiles.length > 0 ||
     rewrites.fallback.length > 0
 
+  const hasAppDir = !!config.experimental.appDir
+  const hasConcurrentFeatures = hasReactRoot
+  const hasServerComponents = hasAppDir
+
   // Only error in first one compiler (client) once
   if (isClient) {
     if (!hasReactRoot) {
@@ -571,16 +575,14 @@ export default async function getBaseWebpackConfig(
           '`experimental.runtime` requires React 18 to be installed.'
         )
       }
-      if (config.experimental.appDir) {
+      if (hasAppDir) {
         throw new Error(
           '`experimental.appDir` requires React 18 to be installed.'
         )
       }
     }
   }
 
-  const hasConcurrentFeatures = hasReactRoot
-  const hasServerComponents = !!config.experimental.appDir
   const disableOptimizedLoading = hasConcurrentFeatures
     ? true
     : config.experimental.disableOptimizedLoading
@@ -654,6 +656,7 @@ export default async function getBaseWebpackConfig(
         pagesDir,
         cwd: dir,
         development: dev,
+        hasServerComponents,
         hasReactRefresh: dev && isClient,
         hasJsxRuntime: true,
       },
@@ -682,6 +685,7 @@ export default async function getBaseWebpackConfig(
         isServer: isNodeServer || isEdgeServer,
         rootDir: dir,
         pagesDir,
+        hasServerComponents,
         hasReactRefresh: dev && isClient,
         fileReading: config.experimental.swcFileReading,
         nextConfig: config,
@@ -745,7 +749,7 @@ export default async function getBaseWebpackConfig(
               )
             )
             .replace(/\\/g, '/'),
-        ...(config.experimental.appDir
+        ...(hasAppDir
           ? {
               [CLIENT_STATIC_FILES_RUNTIME_MAIN_APP]: dev
                 ? [
@@ -1215,7 +1219,7 @@ export default async function getBaseWebpackConfig(
                       '{}',
                     'react-dom': '{}',
                   },
-                  handleWebpackExtenalForEdgeRuntime,
+                  handleWebpackExternalForEdgeRuntime,
                 ]
               : []),
           ]
@@ -1520,7 +1524,7 @@ export default async function getBaseWebpackConfig(
     },
     module: {
       rules: [
-        ...(config.experimental.appDir && !isClient && !isEdgeServer
+        ...(hasAppDir && !isClient && !isEdgeServer
           ? [
               {
                 issuerLayer: WEBPACK_LAYERS.server,
@@ -1827,7 +1831,7 @@ export default async function getBaseWebpackConfig(
             appDir: dir,
             esmExternals: config.experimental.esmExternals,
             outputFileTracingRoot: config.experimental.outputFileTracingRoot,
-            appDirEnabled: !!config.experimental.appDir,
+            appDirEnabled: hasAppDir,
           }
         ),
       // Moment.js is an extremely popular library that bundles large locale files
@@ -1872,7 +1876,7 @@ export default async function getBaseWebpackConfig(
           serverless: isLikeServerless,
           dev,
           isEdgeRuntime: isEdgeServer,
-          appDirEnabled: !!config.experimental.appDir,
+          appDirEnabled: hasAppDir,
         }),
       // MiddlewarePlugin should be after DefinePlugin so  NEXT_PUBLIC_*
       // replacement is done before its process.env.* handling
@@ -1888,7 +1892,7 @@ export default async function getBaseWebpackConfig(
           rewrites,
           isDevFallback,
           exportRuntime: hasConcurrentFeatures,
-          appDirEnabled: !!config.experimental.appDir,
+          appDirEnabled: hasAppDir,
         }),
       new ProfilingPlugin({ runWebpackSpan }),
       config.optimizeFonts &&
@@ -1919,9 +1923,7 @@ export default async function getBaseWebpackConfig(
             minimized: true,
           },
         }),
-      !!config.experimental.appDir &&
-        isClient &&
-        new AppBuildManifestPlugin({ dev }),
+      hasAppDir && isClient && new AppBuildManifestPlugin({ dev }),
       hasServerComponents &&
         (isClient
           ? new FlightManifestPlugin({
@@ -2200,6 +2202,7 @@ export default async function getBaseWebpackConfig(
     customAppFile: pagesDir
       ? new RegExp(escapeStringRegexp(path.join(pagesDir, `_app`)))
       : undefined,
+    hasAppDir,
     isDevelopment: dev,
     isServer: isNodeServer || isEdgeServer,
     isEdgeRuntime: isEdgeServer,
@@ -2588,7 +2591,7 @@ export default async function getBaseWebpackConfig(
           value: entry[name],
           compilerType,
           name,
-          appDir: config.experimental.appDir,
+          hasAppDir,
         })
       }
 

packages/next/build/webpack/config/blocks/css/index.ts

@@ -257,7 +257,7 @@ export const css = curry(async function css(
 
   // CSS Modules support must be enabled on the server and client so the class
   // names are available for SSR or Prerendering.
-  if (ctx.experimental.appDir && !ctx.isProduction) {
+  if (ctx.hasAppDir && !ctx.isProduction) {
     fns.push(
       loader({
         oneOf: [
@@ -373,7 +373,7 @@ export const css = curry(async function css(
     )
   }
 
-  if (!ctx.experimental.appDir) {
+  if (!ctx.hasAppDir) {
     // Throw an error for CSS Modules used outside their supported scope
     fns.push(
       loader({
@@ -393,7 +393,7 @@ export const css = curry(async function css(
   }
 
   if (ctx.isServer) {
-    if (ctx.experimental.appDir && !ctx.isProduction) {
+    if (ctx.hasAppDir && !ctx.isProduction) {
       fns.push(
         loader({
           oneOf: [
@@ -420,7 +420,7 @@ export const css = curry(async function css(
       )
     }
   } else {
-    if (ctx.experimental.appDir) {
+    if (ctx.hasAppDir) {
       fns.push(
         loader({
           oneOf: [
@@ -552,7 +552,7 @@ export const css = curry(async function css(
       oneOf: [
         markRemovable({
           test: [regexCssGlobal, regexSassGlobal],
-          issuer: ctx.experimental.appDir
+          issuer: ctx.hasAppDir
             ? {
                 // If it's inside the app dir, but not importing from a layout file,
                 // throw an error.
@@ -597,7 +597,7 @@ export const css = curry(async function css(
   }
 
   // Enable full mini-css-extract-plugin hmr for prod mode pages or app dir
-  if (ctx.isClient && (ctx.isProduction || ctx.experimental.appDir)) {
+  if (ctx.isClient && (ctx.isProduction || ctx.hasAppDir)) {
     // Extract CSS as CSS file(s) in the client-side production bundle.
     const MiniCssExtractPlugin =
       require('../../../plugins/mini-css-extract-plugin').default

packages/next/build/webpack/config/blocks/css/loaders/client.ts

@@ -1,16 +1,16 @@
 import type { webpack } from 'next/dist/compiled/webpack/webpack'
 
 export function getClientStyleLoader({
-  isAppDir,
+  hasAppDir,
   isDevelopment,
   assetPrefix,
 }: {
-  isAppDir: boolean
+  hasAppDir: boolean
   isDevelopment: boolean
   assetPrefix: string
 }): webpack.RuleSetUseItem {
   // Keep next-style-loader for development mode in `pages/`
-  if (isDevelopment && !isAppDir) {
+  if (isDevelopment && !hasAppDir) {
     return {
       loader: 'next-style-loader',
       options: {

packages/next/build/webpack/config/blocks/css/loaders/font-loader.ts

@@ -15,7 +15,7 @@ export function getFontLoader(
     // loader
     loaders.push(
       getClientStyleLoader({
-        isAppDir: !!ctx.experimental.appDir,
+        hasAppDir: ctx.hasAppDir,
         isDevelopment: ctx.isDevelopment,
         assetPrefix: ctx.assetPrefix,
       })

packages/next/build/webpack/config/blocks/css/loaders/global.ts

@@ -16,7 +16,7 @@ export function getGlobalCssLoader(
     // loader
     loaders.push(
       getClientStyleLoader({
-        isAppDir: !!ctx.experimental.appDir,
+        hasAppDir: ctx.hasAppDir,
         isDevelopment: ctx.isDevelopment,
         assetPrefix: ctx.assetPrefix,
       })

packages/next/build/webpack/config/blocks/css/loaders/modules.ts

@@ -16,7 +16,7 @@ export function getCssModuleLoader(
     // loader
     loaders.push(
       getClientStyleLoader({
-        isAppDir: !!ctx.experimental.appDir,
+        hasAppDir: ctx.hasAppDir,
         isDevelopment: ctx.isDevelopment,
         assetPrefix: ctx.assetPrefix,
       })