Enable App Router for all applications (#49088)

Co-authored-by: Jimmy Lai <laijimmy0@gmail.com>
Co-authored-by: Shu Ding <g@shud.in>

packages/next/package.json

@@ -88,7 +88,8 @@
     "busboy": "1.6.0",
     "caniuse-lite": "^1.0.30001406",
     "postcss": "8.4.14",
-    "styled-jsx": "5.1.1"
+    "styled-jsx": "5.1.1",
+    "zod": "3.21.4"
   },
   "peerDependencies": {
     "@opentelemetry/api": "^1.1.0",
@@ -309,8 +310,7 @@
     "webpack": "5.74.0",
     "webpack-sources1": "npm:webpack-sources@1.4.3",
     "webpack-sources3": "npm:webpack-sources@3.2.3",
-    "ws": "8.2.3",
-    "zod": "3.21.4"
+    "ws": "8.2.3"
   },
   "resolutions": {
     "browserslist": "4.20.2",

packages/next/src/build/index.ts

@@ -335,7 +335,6 @@ export default async function build(
         dir,
         appDir,
         pagesDir,
-        isAppDirEnabled,
         runLint,
         shouldLint,
         ignoreESLint,

packages/next/src/build/type-check.ts

@@ -27,7 +27,7 @@ function verifyTypeScriptSetup(
   disableStaticImages: boolean,
   cacheDir: string | undefined,
   enableWorkerThreads: boolean | undefined,
-  isAppDirEnabled: boolean,
+  hasAppDir: boolean,
   hasPagesDir: boolean
 ) {
   const typeCheckWorker = new JestWorker(
@@ -53,7 +53,7 @@ function verifyTypeScriptSetup(
       tsconfigPath,
       disableStaticImages,
       cacheDir,
-      isAppDirEnabled,
+      hasAppDir,
       hasPagesDir,
     })
     .then((result) => {
@@ -67,7 +67,6 @@ export async function startTypeChecking({
   config,
   dir,
   ignoreESLint,
-  isAppDirEnabled,
   nextBuildSpan,
   pagesDir,
   runLint,
@@ -79,7 +78,6 @@ export async function startTypeChecking({
   config: NextConfigComplete
   dir: string
   ignoreESLint: boolean
-  isAppDirEnabled: boolean
   nextBuildSpan: Span
   pagesDir?: string
   runLint: boolean
@@ -135,7 +133,7 @@ export async function startTypeChecking({
           config.images.disableStaticImages,
           cacheDir,
           config.experimental.workerThreads,
-          isAppDirEnabled,
+          !!appDir,
           !!pagesDir
         ).then((resolved) => {
           const checkEnd = process.hrtime(typeCheckStart)
@@ -150,7 +148,7 @@ export async function startTypeChecking({
             config.eslint?.dirs,
             config.experimental.workerThreads,
             telemetry,
-            isAppDirEnabled && !!appDir
+            !!appDir
           )
         }),
     ])

packages/next/src/build/webpack-config.ts

@@ -1434,7 +1434,7 @@ export default async function getBaseWebpackConfig(
         config.transpilePackages,
         resolvedExternalPackageDirs
       ) ||
-      (isEsm && config.experimental.appDir)
+      (isEsm && isAppLayer)
 
     if (/node_modules[/\\].*\.[mc]?js$/.test(res)) {
       if (layer === WEBPACK_LAYERS.server) {

packages/next/src/build/webpack/plugins/next-types-plugin.ts

@@ -51,7 +51,7 @@ ${
     : `import type { ResolvingMetadata } from 'next/dist/lib/metadata/types/metadata-interface.js'`
 }
 
-type TEntry = typeof entry
+type TEntry = typeof import('${relativePath}.js')
 
 // Check that the entry is a valid entry
 checkFields<Diff<{

packages/next/src/cli/next-lint.ts

@@ -210,7 +210,7 @@ const nextLint: CliCommand = async (argv) => {
     typeCheckPreflight: false,
     tsconfigPath: nextConfig.typescript.tsconfigPath,
     disableStaticImages: nextConfig.images.disableStaticImages,
-    isAppDirEnabled: !!appDir,
+    hasAppDir: !!appDir,
     hasPagesDir: !!pagesDir,
   })
 

packages/next/src/lib/verifyTypeScriptSetup.ts

@@ -44,7 +44,7 @@ export async function verifyTypeScriptSetup({
   tsconfigPath,
   typeCheckPreflight,
   disableStaticImages,
-  isAppDirEnabled,
+  hasAppDir,
   hasPagesDir,
 }: {
   dir: string
@@ -54,7 +54,7 @@ export async function verifyTypeScriptSetup({
   intentDirs: string[]
   typeCheckPreflight: boolean
   disableStaticImages: boolean
-  isAppDirEnabled: boolean
+  hasAppDir: boolean
   hasPagesDir: boolean
 }): Promise<{ result?: TypeCheckResult; version: string | null }> {
   const resolvedTsConfigPath = path.join(dir, tsconfigPath)
@@ -122,7 +122,7 @@ export async function verifyTypeScriptSetup({
       ts,
       resolvedTsConfigPath,
       intent.firstTimeSetup,
-      isAppDirEnabled,
+      hasAppDir,
       distDir,
       hasPagesDir
     )
@@ -132,7 +132,7 @@ export async function verifyTypeScriptSetup({
       baseDir: dir,
       imageImportsEnabled: !disableStaticImages,
       hasPagesDir,
-      isAppDirEnabled,
+      isAppDirEnabled: hasAppDir,
     })
 
     let result
@@ -146,7 +146,7 @@ export async function verifyTypeScriptSetup({
         distDir,
         resolvedTsConfigPath,
         cacheDir,
-        isAppDirEnabled
+        hasAppDir
       )
     }
     return { result, version: ts.version }

packages/next/src/server/api-utils/node.ts

@@ -468,7 +468,7 @@ async function revalidate(
           `http://${
             context.hostname
           }:${ipcPort}?key=${ipcKey}&method=revalidate&args=${encodeURIComponent(
-            JSON.stringify([{ urlPath, revalidateHeaders }])
+            JSON.stringify([{ urlPath, revalidateHeaders, opts }])
           )}`,
           {
             method: 'GET',

packages/next/src/server/app-render/types.ts

@@ -6,7 +6,7 @@ import type {
 } from '../../build/webpack/plugins/flight-manifest-plugin'
 import type { NextFontManifest } from '../../build/webpack/plugins/next-font-manifest-plugin'
 
-import zod from 'next/dist/compiled/zod'
+import zod from 'zod'
 
 export type DynamicParamTypes = 'catchall' | 'optional-catchall' | 'dynamic'
 

packages/next/src/server/config-shared.ts

@@ -686,7 +686,7 @@ export const defaultConfig: NextConfig = {
     swcFileReading: true,
     craCompat: false,
     esmExternals: true,
-    appDir: false,
+    appDir: true,
     // default to 50MB limit
     isrMemoryCacheSize: 50 * 1024 * 1024,
     incrementalCacheHandlerPath: undefined,

packages/next/src/server/config.ts

@@ -45,11 +45,6 @@ const experimentalWarning = execOnce(
       `Experimental features are not covered by semver, and may cause unexpected or broken application behavior. ` +
         `Use at your own risk.`
     )
-    if (features.includes('appDir')) {
-      Log.info(
-        `Thank you for testing \`appDir\` please leave your feedback at https://nextjs.link/app-feedback`
-      )
-    }
 
     console.warn()
   }

packages/next/src/server/dev/next-dev-server.ts

@@ -880,7 +880,7 @@ export default class DevServer extends Server {
         typeCheckPreflight: false,
         tsconfigPath: this.nextConfig.typescript.tsconfigPath,
         disableStaticImages: this.nextConfig.images.disableStaticImages,
-        isAppDirEnabled: !!this.appDir,
+        hasAppDir: !!this.appDir,
         hasPagesDir: !!this.pagesDir,
       })
 

packages/next/taskfile.js

@@ -351,15 +351,6 @@ export async function compile_config_schema(task, opts) {
   await fs.rmdir(join(__dirname, 'dist/next-config-validate'))
 }
 
-// eslint-disable-next-line camelcase
-externals['zod'] = 'next/dist/compiled/zod'
-export async function ncc_zod(task, opts) {
-  await task
-    .source(relative(__dirname, require.resolve('zod')))
-    .ncc({ packageName: 'zod', externals })
-    .target('src/compiled/zod')
-}
-
 // eslint-disable-next-line camelcase
 externals['acorn'] = 'next/dist/compiled/acorn'
 export async function ncc_acorn(task, opts) {
@@ -2193,7 +2184,6 @@ export async function ncc(task, opts) {
         'ncc_node_shell_quote',
         'ncc_undici',
         'ncc_acorn',
-        'ncc_zod',
         'ncc_amphtml_validator',
         'ncc_arg',
         'ncc_async_retry',

packages/next/types/misc.d.ts

@@ -456,8 +456,3 @@ declare module 'next/dist/compiled/@opentelemetry/api' {
   import * as m from '@opentelemetry/api'
   export = m
 }
-
-declare module 'next/dist/compiled/zod' {
-  import m from 'zod'
-  export = m
-}

test/e2e/app-dir/app-static/app-static.test.ts

@@ -1877,14 +1877,6 @@ createNextDescribe(
       })
     })
 
-    if (!(global as any).isNextDeploy) {
-      it('should show a message to leave feedback for `appDir`', async () => {
-        expect(next.cliOutput).toContain(
-          `Thank you for testing \`appDir\` please leave your feedback at https://nextjs.link/app-feedback`
-        )
-      })
-    }
-
     it('should keep querystring on static page', async () => {
       const browser = await next.browser('/blog/tim?message=hello-world')
       const checkUrl = async () =>

test/e2e/disable-js-preload/test/index.test.js

@@ -0,0 +1,22 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import { createNextDescribe } from 'e2e-utils'
+
+createNextDescribe(
+  'disabled JS preloads',
+  {
+    files: join(__dirname, '..'),
+  },
+  ({ next }) => {
+    it('should render the page', async () => {
+      const html = await next.render('/')
+      expect(html).toMatch(/Hello World/)
+    })
+
+    it('should not have JS preload links', async () => {
+      const $ = await next.render$('/')
+      expect($('link[rel=preload]').length).toBe(0)
+    })
+  }
+)

test/e2e/optimized-loading/test/index.test.ts

@@ -0,0 +1,35 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import { createNextDescribe } from 'e2e-utils'
+
+createNextDescribe(
+  'Optimized loading',
+  {
+    files: join(__dirname, '../'),
+  },
+  ({ next }) => {
+    function runTests(url) {
+      describe('page ' + url, () => {
+        it(`should render the page ${url}`, async () => {
+          const html = await next.render(url)
+          expect(html).toMatch(/Hello World/)
+        })
+
+        it('should not have JS preload links', async () => {
+          const $ = await next.render$(url)
+          expect($('link[rel=preload]').length).toBe(0)
+        })
+
+        it('should load scripts with defer in head', async () => {
+          const $ = await next.render$(url)
+          expect($('script[async]').length).toBe(0)
+          expect($('head script[defer]').length).toBeGreaterThan(0)
+        })
+      })
+    }
+
+    runTests('/')
+    runTests('/page1')
+  }
+)

test/e2e/streaming-ssr/index.test.ts

@@ -17,15 +17,7 @@ describe('streaming SSR with custom next configs', () => {
 
   beforeAll(async () => {
     next = await createNext({
-      files: {
-        'app/page.js': `
-        export default function Page() {
-          return 'fake-app' /* this should not enable appDir */
-        }
-      `,
-        pages: new FileRef(join(__dirname, 'streaming-ssr/pages')),
-      },
-      nextConfig: require(join(__dirname, 'streaming-ssr/next.config.js')),
+      files: join(__dirname, 'streaming-ssr'),
       installCommand: 'npm install',
     })
   })

test/integration/app-tree/pages/_app.tsx

@@ -5,7 +5,7 @@ import { render } from 'react-dom'
 import App, { AppContext } from 'next/app'
 import { renderToString } from 'react-dom/server'
 
-export const DummyContext = createContext(null)
+export const DummyContext = createContext(null) as React.Context<string | null>
 
 export default class MyApp extends App<{ html: string }> {
   static async getInitialProps({ Component, AppTree, ctx }: AppContext) {
@@ -20,7 +20,7 @@ export default class MyApp extends App<{ html: string }> {
 
     if (typeof window !== 'undefined') {
       const el = document.createElement('div')
-      document.querySelector('body').appendChild(el)
+      document.querySelector('body')?.appendChild(el)
       render(toRender, el)
       html = el.innerHTML
       el.remove()

test/integration/app-tree/pages/hello.tsx

@@ -20,7 +20,7 @@ Page.getInitialProps = async ({ AppTree }) => {
 
   if (typeof window !== 'undefined') {
     const el = document.createElement('div')
-    document.querySelector('body').appendChild(el)
+    document.querySelector('body')?.appendChild(el)
     render(toRender, el)
     html = el.innerHTML
     el.remove()

test/integration/app-tree/tsconfig.json

@@ -13,8 +13,14 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
   "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"]
 }