diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml
index 6f21476395e41..b80919c6c35bd 100644
--- a/.github/workflows/build_test_deploy.yml
+++ b/.github/workflows/build_test_deploy.yml
@@ -911,12 +911,13 @@ jobs:
   testDeployE2E:
     name: E2E (deploy)
     runs-on: ubuntu-latest
-    needs: [publishRelease]
+    needs: [publishRelease, build, build-native-test]
     env:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
       VERCEL_TEST_TOKEN: ${{ secrets.VERCEL_TEST_TOKEN }}
       VERCEL_TEST_TEAM: 'vtest314-next-e2e-tests'
+      NEXT_TEST_MODE: deploy
     steps:
       - name: Setup node
         uses: actions/setup-node@v3
@@ -930,13 +931,19 @@ jobs:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
 
+      - uses: actions/download-artifact@v3
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+        with:
+          name: next-swc-test-binary
+          path: packages/next-swc/native
+
       - run: npm i -g playwright-chromium@1.14.1 && npx playwright install-deps
         name: Install playwright dependencies
 
       - run: RESET_VC_PROJECT=true node scripts/reset-vercel-project.mjs
         name: Reset test project
 
-      - run: NEXT_TEST_MODE=deploy node run-tests.js --type e2e
+      - run: node run-tests.js --type e2e
         name: Run test/e2e (deploy)
 
       - name: Upload test trace
@@ -1411,7 +1418,7 @@ jobs:
     strategy:
       matrix:
         target: [web, nodejs]
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
     steps:
       - uses: actions/cache@v3
         id: restore-build
diff --git a/docs/basic-features/data-fetching/incremental-static-regeneration.md b/docs/basic-features/data-fetching/incremental-static-regeneration.md
index 85478a77556a4..ebc4cb73f18ba 100644
--- a/docs/basic-features/data-fetching/incremental-static-regeneration.md
+++ b/docs/basic-features/data-fetching/incremental-static-regeneration.md
@@ -139,7 +139,7 @@ $ next build
 $ next start
 ```
 
-Then, you are able to validate static pages are successfully revalidated.
+Then, you can confirm that static pages have successfully revalidated.
 
 ## Error handling and revalidation
 
diff --git a/errors/custom-document-image-import.md b/errors/custom-document-image-import.md
index 64ff9af1e8fb6..c8970f2b91b1e 100644
--- a/errors/custom-document-image-import.md
+++ b/errors/custom-document-image-import.md
@@ -14,8 +14,8 @@ If your image needs to be displayed on every page you can relocate it to your [`
 
 ```jsx
 //pages/_app.js
-import yourImage from "path/to/your/image"
-import Image from "next/image"
+import yourImage from 'path/to/your/image'
+import Image from 'next/image'
 
 function MyApp({ Component, pageProps }) {
   return (
@@ -23,6 +23,7 @@ function MyApp({ Component, pageProps }) {
       <Image src={yourImage} alt="your_image_description" />
       <Component {...pageProps} />
     </>
+  )
 }
 
 export default MyApp
diff --git a/errors/next-script-for-ga.md b/errors/next-script-for-ga.md
index 0785fcca17708..3df685bebcda9 100644
--- a/errors/next-script-for-ga.md
+++ b/errors/next-script-for-ga.md
@@ -15,7 +15,7 @@ import Script from 'next/script'
 
 function Home() {
   return (
-    <div class="container">
+    <div className="container">
       <!-- Global site tag (gtag.js) - Google Analytics -->
       <Script
         src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
@@ -46,7 +46,7 @@ import Script from 'next/script'
 
 function Home() {
   return (
-    <div class="container">
+    <div className="container">
       <Script id="google-analytics" strategy="afterInteractive">
         {`
           (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -72,7 +72,7 @@ import Script from 'next/script'
 
 function Home() {
   return (
-    <div class="container">
+    <div className="container">
       <Script id="google-analytics" strategy="afterInteractive">
         {`
           window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
diff --git a/examples/cms-kontent/components/avatar.js b/examples/cms-kontent/components/avatar.js
index 6777f50313593..68769e1fad2a9 100644
--- a/examples/cms-kontent/components/avatar.js
+++ b/examples/cms-kontent/components/avatar.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from '../components/image'
 
 export default function Avatar({ name, picture }) {
   return (
diff --git a/examples/cms-kontent/components/cover-image.js b/examples/cms-kontent/components/cover-image.js
index cf76be52975fd..648c0d9f729b6 100644
--- a/examples/cms-kontent/components/cover-image.js
+++ b/examples/cms-kontent/components/cover-image.js
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import Image from 'next/image'
+import Image from '../components/image'
 import Link from 'next/link'
 
 export default function CoverImage({ title, src, slug }) {
diff --git a/examples/cms-kontent/components/image.js b/examples/cms-kontent/components/image.js
new file mode 100644
index 0000000000000..60c4b11de7558
--- /dev/null
+++ b/examples/cms-kontent/components/image.js
@@ -0,0 +1,32 @@
+import NextImage from 'next/image'
+import { transformImageUrl } from '@kentico/kontent-delivery'
+
+const KONTENT_ASSET_HOSTNAME_REGEX = /.kc-usercontent.com$/
+
+const getLoader = (src) => {
+  return srcIsKontentAsset(src) ? kontentImageLoader : undefined
+}
+
+const srcIsKontentAsset = (src) => {
+  try {
+    const { hostname } = new URL(src)
+    return KONTENT_ASSET_HOSTNAME_REGEX.test(hostname)
+  } catch {
+    return false
+  }
+}
+
+const kontentImageLoader = ({ src, width, quality = 100 }) => {
+  return new transformImageUrl(src)
+    .withWidth(width)
+    .withQuality(quality)
+    .withCompression('lossless')
+    .withAutomaticFormat()
+    .getUrl()
+}
+
+export default function Image(props) {
+  const loader = getLoader(props.src)
+
+  return <NextImage {...props} loader={loader} />
+}
diff --git a/examples/cms-kontent/lib/api.js b/examples/cms-kontent/lib/api.js
index e764e982e9f43..42f75367e6e5d 100644
--- a/examples/cms-kontent/lib/api.js
+++ b/examples/cms-kontent/lib/api.js
@@ -16,31 +16,32 @@ const client = new DeliveryClient({
 
 function parseAuthor(author) {
   return {
-    name: author.name.value,
-    picture: author.picture.value[0].url,
+    name: author.elements.name.value,
+    picture: author.elements.picture.value[0].url,
   }
 }
 
 function parsePost(post) {
   return {
-    title: post.title.value,
-    slug: post.slug.value,
-    date: post.date.value.toISOString(),
-    content: post.content.value,
-    excerpt: post.excerpt.value,
-    coverImage: post.cover_image.value[0].url,
-    author: parseAuthor(post.author.value[0]),
+    title: post.elements.title.value,
+    slug: post.elements.slug.value,
+    date: post.elements.date.value,
+    content: post.elements.content.value,
+    excerpt: post.elements.excerpt.value,
+    coverImage: post.elements.cover_image.value[0].url,
+    author: parseAuthor(post.elements.author.linkedItems[0]),
   }
 }
 
 export async function getAllPostSlugs() {
-  const postsResponse = await client
+  return await client
     .items()
     .type('post')
     .elementsParameter(['slug'])
     .toPromise()
-
-  return postsResponse.items.map((post) => post.slug.value)
+    .then((response) =>
+      response.data.items.map((post) => post.elements.slug.value)
+    )
 }
 
 export async function getMorePostsForSlug(slug, preview) {
@@ -51,16 +52,14 @@ export async function getMorePostsForSlug(slug, preview) {
     })
     .type('post')
     .orderByDescending('elements.date')
-    .withParameter('elements.slug[neq]', slug)
+    .notEqualsFilter('elements.slug', slug)
     .limitParameter(2)
     .toPromise()
-    .then((res) => {
-      return res.items.map((post) => parsePost(post))
-    })
+    .then((response) => response.data.items.map((post) => parsePost(post)))
 }
 
 export async function getPostBySlug(slug, preview) {
-  const post = await client
+  return await client
     .items()
     .queryConfig({
       usePreviewMode: !!preview,
@@ -68,9 +67,7 @@ export async function getPostBySlug(slug, preview) {
     .type('post')
     .equalsFilter('elements.slug', slug)
     .toPromise()
-    .then((result) => result.getFirstItem())
-    .then((post) => parsePost(post))
-  return post
+    .then((response) => parsePost(response.data.items[0]))
 }
 
 export async function getAllPosts(preview) {
@@ -82,5 +79,5 @@ export async function getAllPosts(preview) {
     .type('post')
     .orderByDescending('elements.date')
     .toPromise()
-    .then((postsResponse) => postsResponse.items.map((post) => parsePost(post)))
+    .then((response) => response.data.items.map((post) => parsePost(post)))
 }
diff --git a/examples/cms-kontent/package.json b/examples/cms-kontent/package.json
index 26e8bde64b13c..81ccbfbfb88d3 100644
--- a/examples/cms-kontent/package.json
+++ b/examples/cms-kontent/package.json
@@ -6,20 +6,19 @@
     "start": "next start"
   },
   "dependencies": {
-    "@kentico/kontent-delivery": "^9.2.0",
+    "@kentico/kontent-delivery": "^11.13.0",
     "classnames": "2.3.1",
     "date-fns": "2.28.0",
     "gray-matter": "4.0.3",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "remark": "14.0.2",
-    "remark-html": "15.0.1",
-    "rxjs": "^6.6.2"
+    "remark-html": "15.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "10.4.2",
-    "postcss": "8.4.5",
+    "autoprefixer": "10.4.7",
+    "postcss": "8.4.14",
     "tailwindcss": "^3.0.15"
   }
 }
diff --git a/lerna.json b/lerna.json
index d3cfec77d644f..b6f902b811b18 100644
--- a/lerna.json
+++ b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.7-canary.11"
+  "version": "12.1.7-canary.16"
 }
diff --git a/package.json b/package.json
index ae528d966c706..36a2fa2ae9553 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,9 @@
     "dev2": "while true; do yarn --check-files && yarn dev; done",
     "test-types": "yarn tsc",
     "test-unit": "yarn jest test/unit/",
+    "test-dev": "cross-env NEXT_TEST_MODE=dev yarn testheadless",
+    "test-start": "cross-env NEXT_TEST_MODE=start yarn testheadless",
+    "test-deploy": "cross-env NEXT_TEST_MODE=deploy yarn testheadless",
     "testonly": "yarn jest --runInBand",
     "testheadless": "cross-env HEADLESS=true yarn testonly",
     "genstats": "cross-env LOCAL_STATS=true node .github/actions/next-stats-action/src/index.js",
diff --git a/packages/create-next-app/helpers/examples.ts b/packages/create-next-app/helpers/examples.ts
index 92292a088fb96..8ec1e30c41154 100644
--- a/packages/create-next-app/helpers/examples.ts
+++ b/packages/create-next-app/helpers/examples.ts
@@ -78,7 +78,7 @@ export function downloadAndExtractRepo(
     ),
     tar.extract(
       { cwd: root, strip: filePath ? filePath.split('/').length + 1 : 1 },
-      [`${name}-${branch}${filePath ? `/${filePath}` : ''}`]
+      [`${name}-${branch.replace(/\//g, '-')}${filePath ? `/${filePath}` : ''}`]
     )
   )
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
index 4958d2f2ab96a..408e6f8c8b280 100644
--- a/packages/create-next-app/package.json
+++ b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "keywords": [
     "react",
     "next",
@@ -33,7 +33,7 @@
     "@types/rimraf": "3.0.0",
     "@types/tar": "4.0.3",
     "@types/validate-npm-package-name": "3.0.0",
-    "@vercel/ncc": "0.33.1",
+    "@vercel/ncc": "0.33.4",
     "async-retry": "1.3.1",
     "chalk": "2.4.2",
     "commander": "2.20.0",
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index d398d0ba15a78..d13a7c39a0b35 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "12.1.7-canary.11",
+    "@next/eslint-plugin-next": "12.1.7-canary.16",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.21.0",
     "eslint-import-resolver-node": "^0.3.6",
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
index 2a49c73db15c1..32fa6a305114e 100644
--- a/packages/eslint-plugin-next/package.json
+++ b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",
diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
index 26bfc5691e222..7b93f1f47692d 100644
--- a/packages/next-bundle-analyzer/package.json
+++ b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",
diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
index 06f9b67d2a839..495534788331d 100644
--- a/packages/next-codemod/package.json
+++ b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",
diff --git a/packages/next-env/package.json b/packages/next-env/package.json
index 5f41ab974528d..a4d7c59e21d55 100644
--- a/packages/next-env/package.json
+++ b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "keywords": [
     "react",
     "next",
@@ -29,7 +29,7 @@
     "prepublish": "yarn release && yarn types"
   },
   "devDependencies": {
-    "@vercel/ncc": "0.33.1",
+    "@vercel/ncc": "0.33.4",
     "dotenv": "10.0.0",
     "dotenv-expand": "8.0.1"
   }
diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
index 7da17a516b11f..ab87d68162486 100644
--- a/packages/next-mdx/package.json
+++ b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index 694b89b381bca..d2420311a6205 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"
diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
index 9fac65549672b..e1d47056d1e50 100644
--- a/packages/next-polyfill-module/package.json
+++ b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",
diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
index 0eae9973f8469..e71ed467c23e8 100644
--- a/packages/next-polyfill-nomodule/package.json
+++ b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",
diff --git a/packages/next-swc/Cargo.lock b/packages/next-swc/Cargo.lock
index 79fac4bf0691c..6044184b55747 100644
--- a/packages/next-swc/Cargo.lock
+++ b/packages/next-swc/Cargo.lock
@@ -1879,9 +1879,9 @@ dependencies = [
 
 [[package]]
 name = "swc"
-version = "0.181.1"
+version = "0.181.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "624191cf55bb9927663c75c053818a7408639bc01a7dd7660f68d756009ea6e3"
+checksum = "b021e4bee528dec0d20068943028adf56023f1a558c04e30d37364dda7580a88"
 dependencies = [
  "ahash",
  "anyhow",
@@ -1986,9 +1986,9 @@ dependencies = [
 
 [[package]]
 name = "swc_common"
-version = "0.18.5"
+version = "0.18.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "269446a3916d32071ca4c1adb39761fd067bc352ba40e40fca11de881ece8007"
+checksum = "e4516bf4969a924bfd1801aed5c4b214687665898c14b7584d227827faff9d6c"
 dependencies = [
  "ahash",
  "ast_node",
@@ -2095,9 +2095,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_parser"
-version = "0.101.2"
+version = "0.101.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "10d358d2d301451cefddc231095c3f9431cf5bf0a2dad6833ce691d85d8e6b8f"
+checksum = "537f2c9faace3ab931d10793c228ee9f7d510c97a4cdbaeb9dff6c3e5897c0e4"
 dependencies = [
  "bitflags",
  "lexical",
@@ -2164,9 +2164,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_codegen"
-version = "0.108.1"
+version = "0.108.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b65810646567ad2a34af1d90a0f51eaca250d220a7b50370f2a2dba834a375b4"
+checksum = "4e4199b76335f78933b80621db130b58f711429986ed9917182b66cbb7c3778d"
 dependencies = [
  "bitflags",
  "memchr",
@@ -2231,9 +2231,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_loader"
-version = "0.30.1"
+version = "0.30.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0f7baaa5b99cdf49e830caf54b837891c5c38275ac94c31d555859be95f6479c"
+checksum = "917dcd19c429254113981e746e3f6b46446145c8e4d353a8727f92bc8fa307cc"
 dependencies = [
  "ahash",
  "anyhow",
@@ -2253,9 +2253,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_minifier"
-version = "0.114.10"
+version = "0.114.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9c43e526a9441730cb75e84f3420cbb6c19be4530e0147f7de0f3c52743d15c9"
+checksum = "c38c40604d06e1649c9f77d2df3c4a68b4f444e7448dc6a837c7ecf1be7e1a9d"
 dependencies = [
  "ahash",
  "arrayvec",
@@ -2286,9 +2286,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_parser"
-version = "0.104.0"
+version = "0.104.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "efb97dc6efc95313dedc5158055cc811da77395ef7b54be61948b5ad097a3671"
+checksum = "a5fea08aeb2eb1469928ac7ca2d208fe7816871787e4d93e34924495e724bb25"
 dependencies = [
  "either",
  "enum_kind",
@@ -2301,7 +2301,6 @@ dependencies = [
  "swc_ecma_ast",
  "tracing",
  "typed-arena",
- "unicode-id",
 ]
 
 [[package]]
@@ -2351,9 +2350,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_base"
-version = "0.85.0"
+version = "0.85.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8262876d5387887776f23c4894fbddff26e5f184edadf2375f3dc19fca2b42a4"
+checksum = "a1029b98240a2e87af924e5abe56b274110436670f12752c3978aae1fb6cb2ea"
 dependencies = [
  "better_scoped_tls",
  "once_cell",
@@ -2386,9 +2385,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_compat"
-version = "0.99.1"
+version = "0.99.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1144fe5347ef3bcb284bf66c94947ff58f6ac3bd7d468859d870e684af572181"
+checksum = "299b629eb4c48fcb27760f760a7edde1f533e5f38f20f6a9eddc07b8a94b4ae7"
 dependencies = [
  "ahash",
  "arrayvec",
@@ -2426,9 +2425,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_module"
-version = "0.112.2"
+version = "0.112.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6fc4ded6134ca3f31c918dd1b9772c3b2bdf2f8f83d782e4cf94c3e0016c4b41"
+checksum = "727fc776ddc1a564486f13602f50f3e68c242555f644fdaffbbeeef0a788b2b3"
 dependencies = [
  "Inflector",
  "ahash",
@@ -2541,9 +2540,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_typescript"
-version = "0.117.0"
+version = "0.117.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fa8f32954c5a7c6bdead39c8a8a1580127a1759f33ef8b87d00f754882e6090a"
+checksum = "96bf410ffcf91d85dc1f8f1bb969fa2637f9430a6917f2174ad76458c776cb89"
 dependencies = [
  "serde",
  "swc_atoms",
@@ -2557,9 +2556,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_utils"
-version = "0.85.0"
+version = "0.85.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dff9d469b284a48317a695a81346a9609d04ce3a31da4493aac508e0d48a4257"
+checksum = "031ac49cf598f00f048fecd87b3bda5e14b86f6ccd561ada7fce461e0a3ea8d1"
 dependencies = [
  "indexmap",
  "once_cell",
diff --git a/packages/next-swc/crates/core/Cargo.toml b/packages/next-swc/crates/core/Cargo.toml
index fb1015a245d76..421c5e9fc44bd 100644
--- a/packages/next-swc/crates/core/Cargo.toml
+++ b/packages/next-swc/crates/core/Cargo.toml
@@ -21,10 +21,10 @@ swc_emotion = {path="../emotion"}
 styled_components = {path="../styled_components"}
 styled_jsx = {path="../styled_jsx"}
 modularize_imports = {path="../modularize_imports"}
-swc = "0.181.0"
+swc = "0.181.2"
 swc_atoms = "0.2.11"
-swc_common = { version = "0.18.5", features = ["concurrent", "sourcemap"] }
-swc_ecma_loader = { version = "0.30.1", features = ["node", "lru"] }
+swc_common = { version = "0.18.7", features = ["concurrent", "sourcemap"] }
+swc_ecma_loader = { version = "0.30.2", features = ["node", "lru"] }
 swc_ecmascript = { version = "0.157.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
 swc_cached = "0.1.1"
 tracing = { version = "0.1.32", features = ["release_max_level_info"] }
diff --git a/packages/next-swc/crates/core/tests/fixture/react-remove-properties/default/simple/output.js b/packages/next-swc/crates/core/tests/fixture/react-remove-properties/default/simple/output.js
index 23ce3d6b98b39..253a472d54124 100644
--- a/packages/next-swc/crates/core/tests/fixture/react-remove-properties/default/simple/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/react-remove-properties/default/simple/output.js
@@ -3,8 +3,7 @@ export default function Home() {
 
     <div data-custom="2">
 
-      <h1 nested={()=><div >nested</div>
-    }>Hello World!</h1>
+      <h1 nested={()=><div >nested</div>}>Hello World!</h1>
 
     </div>
 
diff --git a/packages/next-swc/crates/emotion/Cargo.toml b/packages/next-swc/crates/emotion/Cargo.toml
index 687bd7ab4846b..c9963c3423209 100644
--- a/packages/next-swc/crates/emotion/Cargo.toml
+++ b/packages/next-swc/crates/emotion/Cargo.toml
@@ -19,7 +19,7 @@ regex = "1.5"
 serde = "1"
 sourcemap = "6.0.1"
 swc_atoms = "0.2.11"
-swc_common = { version = "0.18.5", features = ["concurrent", "sourcemap"] }
+swc_common = { version = "0.18.7", features = ["concurrent", "sourcemap"] }
 swc_ecmascript = { version = "0.157.0", features = ["codegen", "utils", "visit"] }
 swc_trace_macro = "0.1.1"
 tracing = { version = "0.1.32", features = ["release_max_level_info"] }
diff --git a/packages/next-swc/crates/napi/Cargo.toml b/packages/next-swc/crates/napi/Cargo.toml
index 4c286d9b10627..1daa1cdddda00 100644
--- a/packages/next-swc/crates/napi/Cargo.toml
+++ b/packages/next-swc/crates/napi/Cargo.toml
@@ -17,11 +17,11 @@ next-swc = {version = "0.0.0", path = "../core"}
 once_cell = "1.8.0"
 serde = "1"
 serde_json = "1"
-swc = "0.181.0"
+swc = "0.181.2"
 swc_atoms = "0.2.11"
 swc_bundler = { version = "0.147.0", features = ["concurrent"] }
-swc_common = { version = "0.18.5", features = ["concurrent", "sourcemap"] }
-swc_ecma_loader = { version = "0.30.1", features = ["node", "lru"] }
+swc_common = { version = "0.18.7", features = ["concurrent", "sourcemap"] }
+swc_ecma_loader = { version = "0.30.2", features = ["node", "lru"] }
 swc_ecmascript = { version = "0.157.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
 swc_node_base = "0.5.3"
 tracing = { version = "0.1.32", features = ["release_max_level_info"] }
diff --git a/packages/next-swc/crates/styled_components/Cargo.toml b/packages/next-swc/crates/styled_components/Cargo.toml
index 8e8661897cb83..7bb5099c0e9d1 100644
--- a/packages/next-swc/crates/styled_components/Cargo.toml
+++ b/packages/next-swc/crates/styled_components/Cargo.toml
@@ -16,7 +16,7 @@ once_cell = "1.10.0"
 regex = {version = "1.5.4", features = ["std", "perf"], default-features = false}
 serde = {version = "1.0.130", features = ["derive"]}
 swc_atoms = "0.2.11"
-swc_common = { version = "0.18.5", features = ["concurrent"] }
+swc_common = { version = "0.18.7", features = ["concurrent"] }
 swc_ecmascript = { version = "0.157.0", features = ["utils", "visit"] }
 tracing = "0.1.32"
 
diff --git a/packages/next-swc/crates/styled_components/tests/fixtures/transpile-css-prop-add-import/output.js b/packages/next-swc/crates/styled_components/tests/fixtures/transpile-css-prop-add-import/output.js
index 306f934694e8d..45627af788463 100644
--- a/packages/next-swc/crates/styled_components/tests/fixtures/transpile-css-prop-add-import/output.js
+++ b/packages/next-swc/crates/styled_components/tests/fixtures/transpile-css-prop-add-import/output.js
@@ -21,8 +21,7 @@ export default (()=><_StyledDiv >
 
     </Card>
 
-  </_StyledDiv>
-);
+  </_StyledDiv>);
 var _StyledDiv = _styled("div")`
       width: 35em;
     `;
diff --git a/packages/next-swc/crates/styled_components/tests/fixtures/transpile-css-prop-all-options-on/output.js b/packages/next-swc/crates/styled_components/tests/fixtures/transpile-css-prop-all-options-on/output.js
index 834ca36b3ec21..5ee1ee76739b3 100644
--- a/packages/next-swc/crates/styled_components/tests/fixtures/transpile-css-prop-all-options-on/output.js
+++ b/packages/next-swc/crates/styled_components/tests/fixtures/transpile-css-prop-all-options-on/output.js
@@ -18,72 +18,55 @@ const Thing2 = styled(Thing).withConfig({
 `;
 /*
  * Basic fixtures
- */ const StaticString = (p)=><_StyledP >A</_StyledP>
-;
+ */ const StaticString = (p)=><_StyledP >A</_StyledP>;
 const StaticTemplate = (p)=><_StyledP2 >
 
     A
 
-  </_StyledP2>
-;
-const ObjectProp = (p)=><_StyledP3 >A</_StyledP3>
-;
-const NoChildren = (p)=><_StyledP4 />
-;
+  </_StyledP2>;
+const ObjectProp = (p)=><_StyledP3 >A</_StyledP3>;
+const NoChildren = (p)=><_StyledP4 />;
 const CssHelperProp = (p)=><_StyledP5 >
 
     A
 
-  </_StyledP5>
-;
+  </_StyledP5>;
 /*
  * Dynamic prop
- */ const CustomComp = (p)=><_StyledParagraph >H</_StyledParagraph>
-;
-const DynamicProp = (p)=><_StyledP6 $_css={props.cssText}>H</_StyledP6>
-;
+ */ const CustomComp = (p)=><_StyledParagraph >H</_StyledParagraph>;
+const DynamicProp = (p)=><_StyledP6 $_css={props.cssText}>H</_StyledP6>;
 const LocalInterpolation = (p)=><_StyledP7 $_css2={props.bg}>
 
     H
 
-  </_StyledP7>
-;
+  </_StyledP7>;
 const FuncInterpolation = (p)=><_StyledP8 >
 
     H
 
-  </_StyledP8>
-;
+  </_StyledP8>;
 const radius = 10;
 const GlobalInterpolation = (p)=><_StyledP9 >
 
     H
 
-  </_StyledP9>
-;
+  </_StyledP9>;
 const LocalCssHelperProp = (p)=><_StyledP10 $_css3={p.color}>
 
     A
 
-  </_StyledP10>
-;
+  </_StyledP10>;
 const DynamicCssHelperProp = (p)=><_StyledP11 >
 
     A
 
-  </_StyledP11>
-;
-const CustomCompWithDot = (p)=><_StyledButtonGhost >H</_StyledButtonGhost>
-;
-const NestedCompWithDot = (p)=><_StyledButtonGhostNew >H</_StyledButtonGhostNew>
-;
-const CustomCompWithDotLowerCase = (p)=><_StyledButtonGhost2 >H</_StyledButtonGhost2>
-;
-const CustomElement = (p)=><_StyledButtonGhost3 >H</_StyledButtonGhost3>
-;
+  </_StyledP11>;
+const CustomCompWithDot = (p)=><_StyledButtonGhost >H</_StyledButtonGhost>;
+const NestedCompWithDot = (p)=><_StyledButtonGhostNew >H</_StyledButtonGhostNew>;
+const CustomCompWithDotLowerCase = (p)=><_StyledButtonGhost2 >H</_StyledButtonGhost2>;
+const CustomElement = (p)=><_StyledButtonGhost3 >H</_StyledButtonGhost3>;
 const globalVar = '"foo"';
-const getAfterValue = ()=>'"bar"'
-;
+const getAfterValue = ()=>'"bar"';
 const ObjectPropMixedInputs = (p)=>{
     const color = 'red';
     return <_StyledP12 $_css4={p.background} $_css5={color} $_css6={globalVar} $_css7={getAfterValue()}>
@@ -100,8 +83,7 @@ const SpreadObjectPropMixedInputs = (p)=>{
 
     </_StyledP13>;
 };
-/* styled component defined after function it's used in */ const EarlyUsageComponent = (p)=><_StyledThing />
-;
+/* styled component defined after function it's used in */ const EarlyUsageComponent = (p)=><_StyledThing />;
 const Thing3 = styled.div.withConfig({
     displayName: "code__Thing3",
     componentId: "sc-867225be-2"
@@ -112,34 +94,27 @@ var _StyledThing6 = _styled(Thing3)((p)=>({
         [p.$_css19]: {
             color: 'red'
         }
-    })
-);
+    }));
 var _StyledThing5 = _styled(Thing3)((p)=>({
         [p.$_css18]: {
             color: 'red'
         }
-    })
-);
+    }));
 var _StyledThing4 = _styled(Thing3)((p)=>({
         [p.$_css17]: {
             color: 'red'
         }
-    })
-);
+    }));
 var _StyledThing3 = _styled(Thing3)((p)=>({
         color: p.$_css16
-    })
-);
+    }));
 var _StyledThing = _styled(Thing3)`color: red;`;
-const EarlyUsageComponent2 = (p)=><_StyledThing2 />
-;
+const EarlyUsageComponent2 = (p)=><_StyledThing2 />;
 function Thing4(props) {
     return <div {...props}/>;
 }
-/* insert before usage for non-local scope styled HOC targets */ const ImportedComponentUsage = (p)=><_StyledSomeComponent />
-;
-const RequiredComponentUsage = (p)=><_StyledSomeOtherComponent />
-;
+/* insert before usage for non-local scope styled HOC targets */ const ImportedComponentUsage = (p)=><_StyledSomeComponent />;
+const RequiredComponentUsage = (p)=><_StyledSomeOtherComponent />;
 const ObjectInterpolation = (p)=>{
     const theme = useTheme();
     return <_StyledP14 $_css15={theme.colors.red}>
@@ -205,26 +180,21 @@ var _StyledP5 = _styled("p")`
       color: blue;
     `;
 var _StyledParagraph = _styled(Paragraph)`flex: 1`;
-var _StyledP6 = _styled("p")`${(p)=>p.$_css
-}`;
+var _StyledP6 = _styled("p")`${(p)=>p.$_css}`;
 var _StyledP7 = _styled("p")`
-      background: ${(p)=>p.$_css2
-};
+      background: ${(p)=>p.$_css2};
     `;
 var _StyledP8 = _styled("p")`
-      color: ${(props)=>props.theme.a
-};
+      color: ${(props)=>props.theme.a};
     `;
 var _StyledP9 = _styled("p")`
       border-radius: ${radius}px;
     `;
 var _StyledP10 = _styled("p")`
-      color: ${(p)=>p.$_css3
-};
+      color: ${(p)=>p.$_css3};
     `;
 var _StyledP11 = _styled("p")`
-      color: ${(props)=>props.theme.color
-};
+      color: ${(props)=>props.theme.color};
     `;
 var _StyledButtonGhost = _styled(Button.Ghost)`flex: 1`;
 var _StyledButtonGhostNew = _styled(Button.Ghost.New)`flex: 1`;
@@ -240,8 +210,7 @@ var _StyledP12 = _styled("p")((p)=>({
         '::after': {
             content: p.$_css7
         }
-    })
-);
+    }));
 var _StyledP13 = _styled("p")((p)=>({
         ...{
             '::before': {
@@ -267,14 +236,11 @@ var _StyledP13 = _styled("p")((p)=>({
         '::after': {
             content: p.$_css14
         }
-    })
-);
+    }));
 var _StyledP14 = _styled("p")((p)=>({
         color: p.$_css15
-    })
-);
+    }));
 var _StyledDiv = _styled("div")((p)=>({
         ...p.$_css20,
         ...p.$_css21
-    })
-);
+    }));
diff --git a/packages/next-swc/crates/styled_components/tests/fixtures/transpile-css-prop/output.js b/packages/next-swc/crates/styled_components/tests/fixtures/transpile-css-prop/output.js
index ff7f8b98adeb9..5020bdebd3038 100644
--- a/packages/next-swc/crates/styled_components/tests/fixtures/transpile-css-prop/output.js
+++ b/packages/next-swc/crates/styled_components/tests/fixtures/transpile-css-prop/output.js
@@ -1,71 +1,54 @@
 import _styled from "styled-components";
 /*
  * Basic fixtures
- */ const StaticString = (p)=><_StyledP >A</_StyledP>
-;
+ */ const StaticString = (p)=><_StyledP >A</_StyledP>;
 const StaticTemplate = (p)=><_StyledP2 >
 
     A
 
-  </_StyledP2>
-;
-const ObjectProp = (p)=><_StyledP3 >A</_StyledP3>
-;
-const NoChildren = (p)=><_StyledP4 />
-;
+  </_StyledP2>;
+const ObjectProp = (p)=><_StyledP3 >A</_StyledP3>;
+const NoChildren = (p)=><_StyledP4 />;
 const CssHelperProp = (p)=><_StyledP5 >
 
     A
 
-  </_StyledP5>
-;
+  </_StyledP5>;
 /*
  * Dynamic prop
- */ const CustomComp = (p)=><_StyledParagraph >H</_StyledParagraph>
-;
-const DynamicProp = (p)=><_StyledP6 $_css={props.cssText}>H</_StyledP6>
-;
+ */ const CustomComp = (p)=><_StyledParagraph >H</_StyledParagraph>;
+const DynamicProp = (p)=><_StyledP6 $_css={props.cssText}>H</_StyledP6>;
 const LocalInterpolation = (p)=><_StyledP7 $_css2={props.bg}>
 
     H
 
-  </_StyledP7>
-;
+  </_StyledP7>;
 const FuncInterpolation = (p)=><_StyledP8 >
 
     H
 
-  </_StyledP8>
-;
+  </_StyledP8>;
 const radius = 10;
 const GlobalInterpolation = (p)=><_StyledP9 >
 
     H
 
-  </_StyledP9>
-;
+  </_StyledP9>;
 const LocalCssHelperProp = (p)=><_StyledP10 $_css3={p.color}>
 
     A
 
-  </_StyledP10>
-;
+  </_StyledP10>;
 const DynamicCssHelperProp = (p)=><_StyledP11 >
 
     A
 
-  </_StyledP11>
-;
-const CustomCompWithDot = (p)=><_StyledButtonGhost >H</_StyledButtonGhost>
-;
-const NestedCompWithDot = (p)=><_StyledButtonGhostNew >H</_StyledButtonGhostNew>
-;
-const CustomCompWithDotLowerCase = (p)=><_StyledButtonGhost2 >H</_StyledButtonGhost2>
-;
-const CustomElement = (p)=><_StyledButtonGhost3 >H</_StyledButtonGhost3>
-;
-/* styled component defined after function it's used in */ const EarlyUsageComponent = (p)=><_StyledThing />
-;
+  </_StyledP11>;
+const CustomCompWithDot = (p)=><_StyledButtonGhost >H</_StyledButtonGhost>;
+const NestedCompWithDot = (p)=><_StyledButtonGhostNew >H</_StyledButtonGhostNew>;
+const CustomCompWithDotLowerCase = (p)=><_StyledButtonGhost2 >H</_StyledButtonGhost2>;
+const CustomElement = (p)=><_StyledButtonGhost3 >H</_StyledButtonGhost3>;
+/* styled component defined after function it's used in */ const EarlyUsageComponent = (p)=><_StyledThing />;
 const Thing3 = styled.div`
   color: blue;
 `;
@@ -73,24 +56,20 @@ var _StyledThing5 = _styled(Thing3)((p)=>({
         [p.$_css8]: {
             color: 'red'
         }
-    })
-);
+    }));
 var _StyledThing4 = _styled(Thing3)((p)=>({
         [p.$_css7]: {
             color: 'red'
         }
-    })
-);
+    }));
 var _StyledThing3 = _styled(Thing3)((p)=>({
         [p.$_css6]: {
             color: 'red'
         }
-    })
-);
+    }));
 var _StyledThing2 = _styled(Thing3)((p)=>({
         color: p.$_css5
-    })
-);
+    }));
 var _StyledThing = _styled(Thing3)`color: red;`;
 const ObjectInterpolation = (p)=>{
     const theme = useTheme();
@@ -162,26 +141,21 @@ var _StyledP5 = _styled("p")`
       color: blue;
     `;
 var _StyledParagraph = _styled(Paragraph)`flex: 1`;
-var _StyledP6 = _styled("p")`${(p)=>p.$_css
-}`;
+var _StyledP6 = _styled("p")`${(p)=>p.$_css}`;
 var _StyledP7 = _styled("p")`
-      background: ${(p)=>p.$_css2
-};
+      background: ${(p)=>p.$_css2};
     `;
 var _StyledP8 = _styled("p")`
-      color: ${(props)=>props.theme.a
-};
+      color: ${(props)=>props.theme.a};
     `;
 var _StyledP9 = _styled("p")`
       border-radius: ${radius}px;
     `;
 var _StyledP10 = _styled("p")`
-      color: ${(p)=>p.$_css3
-};
+      color: ${(p)=>p.$_css3};
     `;
 var _StyledP11 = _styled("p")`
-      color: ${(props)=>props.theme.color
-};
+      color: ${(props)=>props.theme.color};
     `;
 var _StyledButtonGhost = _styled(Button.Ghost)`flex: 1`;
 var _StyledButtonGhostNew = _styled(Button.Ghost.New)`flex: 1`;
@@ -189,8 +163,7 @@ var _StyledButtonGhost2 = _styled(button.ghost)`flex: 1`;
 var _StyledButtonGhost3 = _styled("button-ghost")`flex: 1`;
 var _StyledP12 = _styled("p")((p)=>({
         color: p.$_css4
-    })
-);
+    }));
 var _StyledP13 = _styled("p")((p)=>({
         background: p.$_css9,
         color: p.$_css10,
@@ -201,10 +174,8 @@ var _StyledP13 = _styled("p")((p)=>({
         '::after': {
             content: p.$_css12
         }
-    })
-);
+    }));
 var _StyledDiv = _styled("div")((p)=>({
         ...p.$_css13,
         ...p.$_css14
-    })
-);
+    }));
diff --git a/packages/next-swc/crates/styled_jsx/Cargo.toml b/packages/next-swc/crates/styled_jsx/Cargo.toml
index 7842438f9feda..ed1fe805d0018 100644
--- a/packages/next-swc/crates/styled_jsx/Cargo.toml
+++ b/packages/next-swc/crates/styled_jsx/Cargo.toml
@@ -11,7 +11,7 @@ version = "0.4.0"
 
 [dependencies]
 easy-error = "1.0.0"
-swc_common = { version = "0.18.5", features = ["concurrent", "sourcemap"] }
+swc_common = { version = "0.18.7", features = ["concurrent", "sourcemap"] }
 swc_css = "0.105.0"
 swc_css_prefixer = "0.101.0"
 swc_ecmascript = { version = "0.157.0", features = ["parser", "minifier", "utils", "visit"] }
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js
index 5ef4866a9a440..908b640b076a4 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/no-child/output.js
@@ -5,5 +5,4 @@ export default (()=><div >
 
     </style>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js
index ca1c30d74d6ea..c7b8f47dbdc6e 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/two-children/output.js
@@ -9,5 +9,4 @@ export default (()=><div >
 
     </style>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js
index 6668556d8a3a8..975160bce5f5e 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-child-type/output.js
@@ -7,5 +7,4 @@ export default (()=><div >
 
     </style>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js
index 0379efb0c2aab..b0b23eb582801 100644
--- a/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/errors/wrong-jsx-expression-type/output.js
@@ -7,5 +7,4 @@ export default (()=><div >
 
     </style>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/absent/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/absent/output.js
index 629521ff72be6..244ca2a7511a8 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/absent/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/absent/output.js
@@ -4,5 +4,4 @@ const a = ()=><div >
 
     <style >{'woot'}</style>
 
-  </div>
-;
+  </div>;
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js
index 5550f73723ae8..383e7458f3980 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/attribute-generation-modes/output.js
@@ -10,8 +10,7 @@ export const Test1 = ()=><div className={`jsx-${styles2.__hash} jsx-${styles.__h
 
     <_JSXStyle id={styles2.__hash}>{styles2}</_JSXStyle>
 
-  </div>
-;
+  </div>;
 // external and static
 export const Test2 = ()=><div className={"jsx-81a68341e430a972 " + `jsx-${styles.__hash}`}>
 
@@ -21,8 +20,7 @@ export const Test2 = ()=><div className={"jsx-81a68341e430a972 " + `jsx-${styles
 
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
 
-  </div>
-;
+  </div>;
 // external and dynamic
 export const Test3 = ({ color  })=><div className={`jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([
         [
@@ -48,8 +46,7 @@ export const Test3 = ({ color  })=><div className={`jsx-${styles.__hash}` + " "
 
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
 
-  </div>
-;
+  </div>;
 // external, static and dynamic
 export const Test4 = ({ color  })=><div className={`jsx-${styles.__hash}` + " jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
         [
@@ -77,8 +74,7 @@ export const Test4 = ({ color  })=><div className={`jsx-${styles.__hash}` + " js
 
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
 
-  </div>
-;
+  </div>;
 // static only
 export const Test5 = ()=><div className={"jsx-df0159ebd3f9fb6f"}>
 
@@ -88,8 +84,7 @@ export const Test5 = ()=><div className={"jsx-df0159ebd3f9fb6f"}>
 
     <_JSXStyle id={"81a68341e430a972"}>{"p.jsx-df0159ebd3f9fb6f{color:red}"}</_JSXStyle>
 
-  </div>
-;
+  </div>;
 // static and dynamic
 export const Test6 = ({ color  })=><div className={"jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
         [
@@ -115,8 +110,7 @@ export const Test6 = ({ color  })=><div className={"jsx-ceba8c9ce34e3d0c " + _JS
         color
     ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
 
-  </div>
-;
+  </div>;
 // dynamic only
 export const Test7 = ({ color  })=><div className={_JSXStyle.dynamic([
         [
@@ -140,8 +134,7 @@ export const Test7 = ({ color  })=><div className={_JSXStyle.dynamic([
         color
     ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
 
-  </div>
-;
+  </div>;
 // dynamic with scoped compound variable
 export const Test8 = ({ color  })=>{
     if (color) {
@@ -210,8 +203,7 @@ export const Test10 = ()=><div className={"jsx-cbdf2f44af4108bd"}>
 
     <_JSXStyle id={"cbdf2f44af4108bd"}>{`p.jsx-cbdf2f44af4108bd{color:${foo}}`}</_JSXStyle>
 
-  </div>
-;
+  </div>;
 // dynamic with complex scope
 export const Test11 = ({ color  })=>{
     const items = Array.from({
@@ -231,7 +223,6 @@ export const Test11 = ({ color  })=>{
 
       Item #{i + 1}
 
-    </li>
-    );
+    </li>);
     return <ul className="items">{items}</ul>;
 };
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js
index 77098ec8a7702..57bdc6ef95ffc 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/component-attribute/output.js
@@ -7,5 +7,4 @@ const Test = ()=><div className={"jsx-a9535d7d5f32c3c4"}>
 
     <_JSXStyle id={"a9535d7d5f32c3c4"}>{"span.jsx-a9535d7d5f32c3c4{color:red}"}</_JSXStyle>
 
-  </div>
-;
+  </div>;
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js
index 73b25981ed86d..fc2f4023befe4 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/css-tag-same-file/output.js
@@ -5,8 +5,7 @@ export default (({ children  })=><div className={`jsx-${styles.__hash}`}>
 
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
 
-  </div>
-);
+  </div>);
 const styles = new String("p.jsx-556239d258b6d66a{color:red}");
 styles.__hash = "556239d258b6d66a";
 class Test extends React.Component {
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js
index 61334b95eaaad..104f22dcfa3cf 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/different-jsx-ids/output.js
@@ -7,21 +7,18 @@ const A = ()=><div className={"jsx-498d4e86e548e679"}>
 
     <_JSXStyle id={"498d4e86e548e679"}>{`p.jsx-498d4e86e548e679{color:${color}}`}</_JSXStyle>
 
-  </div>
-;
+  </div>;
 const B = ()=><div className={"jsx-d051a1c8140076ed"}>
 
     <p className={"jsx-d051a1c8140076ed"}>test</p>
 
     <_JSXStyle id={"d051a1c8140076ed"}>{`p.jsx-d051a1c8140076ed{color:${otherColor}}`}</_JSXStyle>
 
-  </div>
-;
+  </div>;
 export default (()=><div >
 
     <A />
 
     <B />
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js
index efc5a1439eccf..0d71635b5fd1c 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/expressions/output.js
@@ -1,6 +1,5 @@
 import _JSXStyle from "next/dist/shared/lib/styled-jsx";
-const darken = (c)=>c
-;
+const darken = (c)=>c;
 const color = 'red';
 const otherColor = 'green';
 const mediumScreen = '680px';
@@ -89,5 +88,4 @@ export default (({ display  })=><div className={"jsx-ee922fe7eac00c5e " + _JSXSt
 
     {}
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js
index 036bcef38bba5..a6c0b12c07c3b 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-global/output.js
@@ -15,5 +15,4 @@ export default (()=><div >
 
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js
index da059a4a93003..be5dba099e6f0 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet-multi-line/output.js
@@ -6,5 +6,4 @@ export default (()=><div className={`jsx-${styles.__hash}`}>
 
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js
index 31d814c057282..fe6a2446a84da 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/external-stylesheet/output.js
@@ -18,8 +18,7 @@ export default (()=><div className={"jsx-bee92b62eadf8a14 " + `jsx-${styles.__ha
 
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
 
-  </div>
-);
+  </div>);
 export const Test = ()=><div className={"jsx-bee92b62eadf8a14 " + `jsx-${styles3.__hash}`}>
 
     <p className={"jsx-bee92b62eadf8a14 " + `jsx-${styles3.__hash}` + " " + "foo"}>test</p>
@@ -32,5 +31,4 @@ export const Test = ()=><div className={"jsx-bee92b62eadf8a14 " + `jsx-${styles3
 
     <_JSXStyle id={"bee92b62eadf8a14"}>{"p.jsx-bee92b62eadf8a14{color:red}div.jsx-bee92b62eadf8a14{color:green}"}</_JSXStyle>
 
-  </div>
-;
+  </div>;
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js
index 86d35ee312008..863dd81a92c44 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/fragment/output.js
@@ -30,8 +30,7 @@ export default (()=><>
 
     <_JSXStyle id={"6dd5f97e085c0297"}>{"p.jsx-6dd5f97e085c0297{color:cyan}.foo.jsx-6dd5f97e085c0297{font-size:18px;color:hotpink}#head.jsx-6dd5f97e085c0297{text-decoration:underline}"}</_JSXStyle>
 
-  </>
-);
+  </>);
 function Component1() {
     return <>
 
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js
index 4c98bb6fceca3..8073e4ec4e883 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/global-child-selector/output.js
@@ -5,5 +5,4 @@ const Test = ()=><div className={"jsx-5a206f122d1cb32e"}>
 
     <_JSXStyle id={"5a206f122d1cb32e"}>{"div.jsx-5a206f122d1cb32e>span{color:red}"}</_JSXStyle>
 
-  </div>
-;
+  </div>;
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js
index fa99edaadc139..fda52288d0a2f 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/global/output.js
@@ -3,7 +3,5 @@ const Test = ()=><div className={"jsx-d47d6adadf14e957"}>
 
     <_JSXStyle id={"d47d6adadf14e957"}>{"body{color:red}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;-moz-animation:foo 1s ease-out;-o-animation:foo 1s ease-out;animation:foo 1s ease-out}div a{display:none}[data-test]>div{color:red}"}</_JSXStyle>
 
-  </div>
-;
-const Test2 = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p{color:red}"}</_JSXStyle>
-;
+  </div>;
+const Test2 = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p{color:red}"}</_JSXStyle>;
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js
index 8b4b1da9cb122..016b2b7ca4799 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/issue-30480/output.js
@@ -12,5 +12,4 @@ export default (({ breakPoint  })=><div className={_JSXStyle.dynamic([
         breakPoint
     ]}>{`@media(${breakPoint}){}`}</_JSXStyle>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js
index 099d576c14d7d..d29cb9bac0da0 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/mixed-global-scoped/output.js
@@ -1,6 +1,5 @@
 import _JSXStyle from "next/dist/shared/lib/styled-jsx";
-const Test = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p{color:red}"}</_JSXStyle>
-;
+const Test = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p{color:red}"}</_JSXStyle>;
 export default (()=><div className={"jsx-3822e6e1fb9fa41a"}>
 
     <p className={"jsx-3822e6e1fb9fa41a"}>test</p>
@@ -9,5 +8,4 @@ export default (()=><div className={"jsx-3822e6e1fb9fa41a"}>
 
     <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-3822e6e1fb9fa41a{color:red}"}</_JSXStyle>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js
index 6144be88e9bb3..9537d3a60e509 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/multiple-jsx/output.js
@@ -10,18 +10,15 @@ const Test1 = ()=><div className={"jsx-a9535d7d5f32c3c4"}>
 
     <_JSXStyle id={"a9535d7d5f32c3c4"}>{"span.jsx-a9535d7d5f32c3c4{color:red}"}</_JSXStyle>
 
-  </div>
-;
-const Test2 = ()=><span >test</span>
-;
+  </div>;
+const Test2 = ()=><span >test</span>;
 const Test3 = ()=><div className={"jsx-a9535d7d5f32c3c4"}>
 
     <span className={"jsx-a9535d7d5f32c3c4"}>test</span>
 
     <_JSXStyle id={"a9535d7d5f32c3c4"}>{"span.jsx-a9535d7d5f32c3c4{color:red}"}</_JSXStyle>
 
-  </div>
-;
+  </div>;
 export default class {
     render() {
         return <div className={"jsx-b2b86d63f35d25ee"}>
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js
index 115ae06e9d6d5..852200c7f31cf 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/non-styled-jsx-style/output.js
@@ -9,5 +9,4 @@ export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-94239b6d6b42c9b5{color:red}"}</_JSXStyle>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js
index b59c13c4e6c6f..c5276ef55d291 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/one-off-global-selectors/output.js
@@ -5,5 +5,4 @@ export default (()=><div className={"jsx-c7c3a8e231c9215a"}>
 
     <_JSXStyle id={"c7c3a8e231c9215a"}>{".container.jsx-c7c3a8e231c9215a>*{color:red}"}</_JSXStyle>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js
index 44a3d86342ddd..1ad586b9797ac 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/stateless/output.js
@@ -9,5 +9,4 @@ export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-94239b6d6b42c9b5{color:red}"}</_JSXStyle>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js
index 5bc5bdc8292fc..81e7e38adca84 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-complex-selector/output.js
@@ -5,5 +5,4 @@ export default (()=><div className={"jsx-713499aa363d6373"}>
 
     <_JSXStyle id={"713499aa363d6373"}>{"p.jsx-713499aa363d6373 a.jsx-713499aa363d6373 span.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373 span{background:blue}p.jsx-713499aa363d6373 a[title=\"'w ' '  t'\"].jsx-713499aa363d6373{margin:auto}p.jsx-713499aa363d6373 span:not(.test){color:green}p.jsx-713499aa363d6373,h1.jsx-713499aa363d6373{color:blue;-webkit-animation:hahaha 3s ease forwards infinite;-moz-animation:hahaha 3s ease forwards infinite;-o-animation:hahaha 3s ease forwards infinite;animation:hahaha 3s ease forwards infinite;-webkit-animation-name:hahaha;-moz-animation-name:hahaha;-o-animation-name:hahaha;animation-name:hahaha;-webkit-animation-delay:100ms;-moz-animation-delay:100ms;-o-animation-delay:100ms;animation-delay:100ms}p.jsx-713499aa363d6373{-webkit-animation:hahaha 1s,hehehe 2s;-moz-animation:hahaha 1s,hehehe 2s;-o-animation:hahaha 1s,hehehe 2s;animation:hahaha 1s,hehehe 2s}p.jsx-713499aa363d6373:hover{color:red}p.jsx-713499aa363d6373::before{color:red}.jsx-713499aa363d6373:hover{color:red}.jsx-713499aa363d6373::before{color:red}.jsx-713499aa363d6373:hover p.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373+a.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373~a.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373>a.jsx-713499aa363d6373{color:red}@-webkit-keyframes hahaha{from{top:0}to{top:100}}@-moz-keyframes hahaha{from{top:0}to{top:100}}@-o-keyframes hahaha{from{top:0}to{top:100}}@keyframes hahaha{from{top:0}to{top:100}}@-webkit-keyframes hehehe{from{left:0}to{left:100}}@-moz-keyframes hehehe{from{left:0}to{left:100}}@-o-keyframes hehehe{from{left:0}to{left:100}}@keyframes hehehe{from{left:0}to{left:100}}@media(min-width:500px){.test.jsx-713499aa363d6373{color:red}}.test.jsx-713499aa363d6373{display:block}.inline-flex.jsx-713499aa363d6373{display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex}.flex.jsx-713499aa363d6373{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.test.jsx-713499aa363d6373{-webkit-box-shadow:0 0 10px black,inset 0 0 5px black;-moz-box-shadow:0 0 10px black,inset 0 0 5px black;box-shadow:0 0 10px black,inset 0 0 5px black}.test[title=\",\"].jsx-713499aa363d6373{display:inline-block}.test.is-status.jsx-713499aa363d6373 .test.jsx-713499aa363d6373{color:red}.a-selector.jsx-713499aa363d6373:hover,.a-selector.jsx-713499aa363d6373:focus{outline:none}"}</_JSXStyle>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js
index 66557bebd1120..c852fdc8ab45b 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-global/output.js
@@ -5,5 +5,4 @@ export default (()=><div className={"jsx-53fd644ab080300c"}>
 
     <_JSXStyle id={"53fd644ab080300c"}>{'html.jsx-53fd644ab080300c{background-image:-webkit-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:-moz-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:-o-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:linear-gradient(0deg,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg)}p{color:blue}p{color:blue}p,a.jsx-53fd644ab080300c{color:blue}.foo+a{color:red}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}'}</_JSXStyle>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js
index d9d24c43e9ba8..be2e15a483cf3 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-media-query/output.js
@@ -5,5 +5,4 @@ export default (()=><div className={"jsx-1f7963ae04c6466a"}>
 
     <_JSXStyle id={"1f7963ae04c6466a"}>{'@media(min-width:1px)and (max-width:768px){[class*="grid__col--"].jsx-1f7963ae04c6466a{margin-top:12px;margin-bottom:12px}}@media(max-width:64em){.test.jsx-1f7963ae04c6466a{margin-bottom:1em}@supports(-moz-appearance:none)and (display:contents){.test.jsx-1f7963ae04c6466a{margin-bottom:2rem}}}'}</_JSXStyle>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js
index 3d05546af5c1e..d1a391c65347f 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-normal/output.js
@@ -5,5 +5,4 @@ export default (()=><div className={"jsx-1a19bb4817c105dd"}>
 
     <_JSXStyle id={"1a19bb4817c105dd"}>{'p.jsx-1a19bb4817c105dd{color:red}p.jsx-1a19bb4817c105dd{color:red}*.jsx-1a19bb4817c105dd{color:blue}[href="woot"].jsx-1a19bb4817c105dd{color:red}'}</_JSXStyle>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js
index 8f2a32915cc9d..7f4b47ebf64f9 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css-nth-1/output.js
@@ -5,5 +5,4 @@ export default (()=><div className={"jsx-938ca197692ef624"}>
 
       <_JSXStyle id={"938ca197692ef624"}>{"li.jsx-938ca197692ef624:nth-child(2){color:lime}"}</_JSXStyle>
 
-    </div>
-);
+    </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js
index 9929646da9ee6..458a364376b4a 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/transform-css/output.js
@@ -5,5 +5,4 @@ export default (()=><div className={"jsx-768337a97aceabd1"}>
 
     <_JSXStyle id={"768337a97aceabd1"}>{'html.jsx-768337a97aceabd1{background-image:-webkit-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:-moz-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:-o-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:linear-gradient(0deg,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg)}p{color:blue}p{color:blue}p,a.jsx-768337a97aceabd1{color:blue}.foo+a{color:red}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}p.jsx-768337a97aceabd1{color:red}p.jsx-768337a97aceabd1{color:red}*.jsx-768337a97aceabd1{color:blue}[href="woot"].jsx-768337a97aceabd1{color:red}p.jsx-768337a97aceabd1 a.jsx-768337a97aceabd1 span.jsx-768337a97aceabd1{color:red}p.jsx-768337a97aceabd1 span{background:blue}p.jsx-768337a97aceabd1 a[title="\'w \' \'  t\'"].jsx-768337a97aceabd1{margin:auto}p.jsx-768337a97aceabd1 span:not(.test){color:green}p.jsx-768337a97aceabd1,h1.jsx-768337a97aceabd1{color:blue;-webkit-animation:hahaha 3s ease forwards infinite;-moz-animation:hahaha 3s ease forwards infinite;-o-animation:hahaha 3s ease forwards infinite;animation:hahaha 3s ease forwards infinite;-webkit-animation-name:hahaha;-moz-animation-name:hahaha;-o-animation-name:hahaha;animation-name:hahaha;-webkit-animation-delay:100ms;-moz-animation-delay:100ms;-o-animation-delay:100ms;animation-delay:100ms}p.jsx-768337a97aceabd1{-webkit-animation:hahaha 1s,hehehe 2s;-moz-animation:hahaha 1s,hehehe 2s;-o-animation:hahaha 1s,hehehe 2s;animation:hahaha 1s,hehehe 2s}p.jsx-768337a97aceabd1:hover{color:red}p.jsx-768337a97aceabd1::before{color:red}.jsx-768337a97aceabd1:hover{color:red}.jsx-768337a97aceabd1::before{color:red}.jsx-768337a97aceabd1:hover p.jsx-768337a97aceabd1{color:red}p.jsx-768337a97aceabd1+a.jsx-768337a97aceabd1{color:red}p.jsx-768337a97aceabd1~a.jsx-768337a97aceabd1{color:red}p.jsx-768337a97aceabd1>a.jsx-768337a97aceabd1{color:red}@-webkit-keyframes hahaha{from{top:0}to{top:100}}@-moz-keyframes hahaha{from{top:0}to{top:100}}@-o-keyframes hahaha{from{top:0}to{top:100}}@keyframes hahaha{from{top:0}to{top:100}}@-webkit-keyframes hehehe{from{left:0}to{left:100}}@-moz-keyframes hehehe{from{left:0}to{left:100}}@-o-keyframes hehehe{from{left:0}to{left:100}}@keyframes hehehe{from{left:0}to{left:100}}@media(min-width:500px){.test.jsx-768337a97aceabd1{color:red}}.test.jsx-768337a97aceabd1{display:block}.inline-flex.jsx-768337a97aceabd1{display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex}.flex.jsx-768337a97aceabd1{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.test.jsx-768337a97aceabd1{-webkit-box-shadow:0 0 10px black,inset 0 0 5px black;-moz-box-shadow:0 0 10px black,inset 0 0 5px black;box-shadow:0 0 10px black,inset 0 0 5px black}.test[title=","].jsx-768337a97aceabd1{display:inline-block}.test.is-status.jsx-768337a97aceabd1 .test.jsx-768337a97aceabd1{color:red}.a-selector.jsx-768337a97aceabd1:hover,.a-selector.jsx-768337a97aceabd1:focus{outline:none}@media(min-width:1px)and (max-width:768px){[class*="grid__col--"].jsx-768337a97aceabd1{margin-top:12px;margin-bottom:12px}}@media(max-width:64em){.test.jsx-768337a97aceabd1{margin-bottom:1em}@supports(-moz-appearance:none)and (display:contents){.test.jsx-768337a97aceabd1{margin-bottom:2rem}}}'}</_JSXStyle>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js b/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js
index 44a3d86342ddd..1ad586b9797ac 100644
--- a/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js
+++ b/packages/next-swc/crates/styled_jsx/tests/fixture/whitespace/output.js
@@ -9,5 +9,4 @@ export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
 
     <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-94239b6d6b42c9b5{color:red}"}</_JSXStyle>
 
-  </div>
-);
+  </div>);
diff --git a/packages/next-swc/crates/wasm/Cargo.toml b/packages/next-swc/crates/wasm/Cargo.toml
index 7fcc9057540b3..924b06d53b142 100644
--- a/packages/next-swc/crates/wasm/Cargo.toml
+++ b/packages/next-swc/crates/wasm/Cargo.toml
@@ -16,8 +16,8 @@ parking_lot_core = "=0.8.0"
 path-clean = "0.1"
 serde = {version = "1", features = ["derive"]}
 serde_json = "1"
-swc = "0.181.0"
-swc_common = { version = "0.18.5", features = ["concurrent", "sourcemap"] }
+swc = "0.181.2"
+swc_common = { version = "0.18.7", features = ["concurrent", "sourcemap"] }
 swc_ecmascript = { version = "0.157.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
 tracing = { version = "0.1.32", features = ["release_max_level_off"] }
 wasm-bindgen = {version = "0.2", features = ["serde-serialize"]}
diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
index bcc17313e4139..3e2e0bf46f14b 100644
--- a/packages/next-swc/package.json
+++ b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native",
diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
index f6f7bec71a5e8..01a3f9e5c2268 100644
--- a/packages/next/build/entries.ts
+++ b/packages/next/build/entries.ts
@@ -16,7 +16,7 @@ import {
   MIDDLEWARE_FILENAME,
   PAGES_DIR_ALIAS,
   ROOT_DIR_ALIAS,
-  VIEWS_DIR_ALIAS,
+  APP_DIR_ALIAS,
 } from '../lib/constants'
 import {
   CLIENT_STATIC_FILES_RUNTIME_AMP,
@@ -60,7 +60,7 @@ export function createPagesMapping({
   isDev: boolean
   pageExtensions: string[]
   pagePaths: string[]
-  pagesType: 'pages' | 'root' | 'views'
+  pagesType: 'pages' | 'root' | 'app'
 }): { [page: string]: string } {
   const previousPages: { [key: string]: string } = {}
   const pages = pagePaths.reduce<{ [key: string]: string }>(
@@ -95,8 +95,8 @@ export function createPagesMapping({
         join(
           pagesType === 'pages'
             ? PAGES_DIR_ALIAS
-            : pagesType === 'views'
-            ? VIEWS_DIR_ALIAS
+            : pagesType === 'app'
+            ? APP_DIR_ALIAS
             : ROOT_DIR_ALIAS,
           pagePath
         )
@@ -140,8 +140,8 @@ interface CreateEntrypointsParams {
   rootDir: string
   rootPaths?: Record<string, string>
   target: 'server' | 'serverless' | 'experimental-serverless-trace'
-  viewsDir?: string
-  viewPaths?: Record<string, string>
+  appDir?: string
+  appPaths?: Record<string, string>
   pageExtensions: string[]
 }
 
@@ -186,14 +186,14 @@ export function getEdgeServerEntry(opts: {
   }
 }
 
-export function getViewsEntry(opts: {
+export function getAppEntry(opts: {
   name: string
   pagePath: string
-  viewsDir: string
+  appDir: string
   pageExtensions: string[]
 }) {
   return {
-    import: `next-view-loader?${stringify(opts)}!`,
+    import: `next-app-loader?${stringify(opts)}!`,
     layer: 'sc_server',
   }
 }
@@ -269,8 +269,8 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
     rootDir,
     rootPaths,
     target,
-    viewsDir,
-    viewPaths,
+    appDir,
+    appPaths,
     pageExtensions,
   } = params
   const edgeServer: webpack5.EntryObject = {}
@@ -278,15 +278,15 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
   const client: webpack5.EntryObject = {}
 
   const getEntryHandler =
-    (mappings: Record<string, string>, pagesType: 'views' | 'pages' | 'root') =>
+    (mappings: Record<string, string>, pagesType: 'app' | 'pages' | 'root') =>
     async (page: string) => {
       const bundleFile = normalizePagePath(page)
       const clientBundlePath = posix.join('pages', bundleFile)
       const serverBundlePath =
         pagesType === 'pages'
           ? posix.join('pages', bundleFile)
-          : pagesType === 'views'
-          ? posix.join('views', bundleFile)
+          : pagesType === 'app'
+          ? posix.join('app', bundleFile)
           : bundleFile.slice(1)
       const absolutePagePath = mappings[page]
 
@@ -296,8 +296,8 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
           return absolutePagePath.replace(PAGES_DIR_ALIAS, pagesDir)
         }
 
-        if (absolutePagePath.startsWith(VIEWS_DIR_ALIAS) && viewsDir) {
-          return absolutePagePath.replace(VIEWS_DIR_ALIAS, viewsDir)
+        if (absolutePagePath.startsWith(APP_DIR_ALIAS) && appDir) {
+          return absolutePagePath.replace(APP_DIR_ALIAS, appDir)
         }
 
         if (absolutePagePath.startsWith(ROOT_DIR_ALIAS)) {
@@ -344,11 +344,11 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
           }
         },
         onServer: () => {
-          if (pagesType === 'views' && viewsDir) {
-            server[serverBundlePath] = getViewsEntry({
+          if (pagesType === 'app' && appDir) {
+            server[serverBundlePath] = getAppEntry({
               name: serverBundlePath,
               pagePath: mappings[page],
-              viewsDir,
+              appDir,
               pageExtensions,
             })
           } else if (isTargetLikeServerless(target)) {
@@ -381,9 +381,9 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
       })
     }
 
-  if (viewsDir && viewPaths) {
-    const entryHandler = getEntryHandler(viewPaths, 'views')
-    await Promise.all(Object.keys(viewPaths).map(entryHandler))
+  if (appDir && appPaths) {
+    const entryHandler = getEntryHandler(appPaths, 'app')
+    await Promise.all(Object.keys(appPaths).map(entryHandler))
   }
   if (rootPaths) {
     await Promise.all(
diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
index 9bef90004e65f..444ab05e95229 100644
--- a/packages/next/build/index.ts
+++ b/packages/next/build/index.ts
@@ -108,7 +108,7 @@ import { MiddlewareManifest } from './webpack/plugins/middleware-plugin'
 import { recursiveCopy } from '../lib/recursive-copy'
 import { recursiveReadDir } from '../lib/recursive-readdir'
 import { lockfilePatchPromise, teardownTraceSubscriber } from './swc'
-import { injectedClientEntries } from './webpack/plugins/flight-manifest-plugin'
+import { injectedClientEntries } from './webpack/plugins/client-entry-plugin'
 import { getNamedRouteRegex } from '../shared/lib/router/utils/route-regex'
 import { flatReaddir } from '../lib/flat-readdir'
 import { RemotePattern } from '../shared/lib/image-config'
@@ -206,9 +206,9 @@ export default async function build(
       setGlobal('telemetry', telemetry)
 
       const publicDir = path.join(dir, 'public')
-      const { pages: pagesDir, views: viewsDir } = findPagesDir(
+      const { pages: pagesDir, appDir } = findPagesDir(
         dir,
-        config.experimental.viewsDir
+        config.experimental.appDir
       )
 
       const hasPublicDir = await fileExists(publicDir)
@@ -271,9 +271,10 @@ export default async function build(
         nextBuildSpan.traceChild('verify-typescript-setup').traceAsyncFn(() =>
           verifyTypeScriptSetup(
             dir,
-            [pagesDir, viewsDir].filter(Boolean) as string[],
+            [pagesDir, appDir].filter(Boolean) as string[],
             !ignoreTypeScriptErrors,
-            config,
+            config.typescript.tsconfigPath,
+            config.images.disableStaticImages,
             cacheDir,
             config.experimental.cpus,
             config.experimental.workerThreads
@@ -333,14 +334,14 @@ export default async function build(
           )
         )
 
-      let viewPaths: string[] | undefined
+      let appPaths: string[] | undefined
 
-      if (viewsDir) {
-        viewPaths = await nextBuildSpan
-          .traceChild('collect-view-paths')
+      if (appDir) {
+        appPaths = await nextBuildSpan
+          .traceChild('collect-app-paths')
           .traceAsyncFn(() =>
             recursiveReadDir(
-              viewsDir,
+              appDir,
               new RegExp(`page\\.(?:${config.pageExtensions.join('|')})$`)
             )
           )
@@ -377,17 +378,17 @@ export default async function build(
           })
         )
 
-      let mappedViewPaths: { [page: string]: string } | undefined
+      let mappedappPaths: { [page: string]: string } | undefined
 
-      if (viewPaths && viewsDir) {
-        mappedViewPaths = nextBuildSpan
-          .traceChild('create-views-mapping')
+      if (appPaths && appDir) {
+        mappedappPaths = nextBuildSpan
+          .traceChild('create-app-mapping')
           .traceFn(() =>
             createPagesMapping({
-              pagePaths: viewPaths!,
+              pagePaths: appPaths!,
               hasServerComponents,
               isDev: false,
-              pagesType: 'views',
+              pagesType: 'app',
               pageExtensions: config.pageExtensions,
             })
           )
@@ -418,8 +419,8 @@ export default async function build(
             target,
             rootDir: dir,
             rootPaths: mappedRootPaths,
-            viewsDir,
-            viewPaths: mappedViewPaths,
+            appDir,
+            appPaths: mappedappPaths,
             pageExtensions: config.pageExtensions,
           })
         )
@@ -719,7 +720,7 @@ export default async function build(
           rewrites,
           runWebpackSpan,
           target,
-          viewsDir,
+          appDir,
         }
 
         const configs = await runWebpackSpan
@@ -2361,7 +2362,8 @@ function verifyTypeScriptSetup(
   dir: string,
   intentDirs: string[],
   typeCheckPreflight: boolean,
-  config: NextConfigComplete,
+  tsconfigPath: string,
+  disableStaticImages: boolean,
   cacheDir: string | undefined,
   numWorkers: number | undefined,
   enableWorkerThreads: boolean | undefined
@@ -2384,7 +2386,8 @@ function verifyTypeScriptSetup(
       dir,
       intentDirs,
       typeCheckPreflight,
-      config,
+      tsconfigPath,
+      disableStaticImages,
       cacheDir
     )
     .then((result) => {
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 8a3e6331955ee..9a7a68ae719e0 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -11,7 +11,7 @@ import {
   NEXT_PROJECT_ROOT_DIST_CLIENT,
   PAGES_DIR_ALIAS,
   ROOT_DIR_ALIAS,
-  VIEWS_DIR_ALIAS,
+  APP_DIR_ALIAS,
 } from '../lib/constants'
 import { fileExists } from '../lib/file-exists'
 import { CustomRoutes } from '../lib/load-custom-routes.js'
@@ -46,6 +46,7 @@ import { WellKnownErrorsPlugin } from './webpack/plugins/wellknown-errors-plugin
 import { regexLikeCss } from './webpack/config/blocks/css'
 import { CopyFilePlugin } from './webpack/plugins/copy-file-plugin'
 import { FlightManifestPlugin } from './webpack/plugins/flight-manifest-plugin'
+import { ClientEntryPlugin } from './webpack/plugins/client-entry-plugin'
 import {
   Feature,
   SWC_TARGET_TRIPLE,
@@ -332,7 +333,7 @@ export default async function getBaseWebpackConfig(
     rewrites,
     runWebpackSpan,
     target = 'server',
-    viewsDir,
+    appDir,
   }: {
     buildId: string
     config: NextConfigComplete
@@ -346,7 +347,7 @@ export default async function getBaseWebpackConfig(
     rewrites: CustomRoutes['rewrites']
     runWebpackSpan: Span
     target?: string
-    viewsDir?: string
+    appDir?: string
   }
 ): Promise<webpack.Configuration> {
   const isClient = compilerType === 'client'
@@ -568,14 +569,14 @@ export default async function getBaseWebpackConfig(
               )
             )
             .replace(/\\/g, '/'),
-        ...(config.experimental.viewsDir
+        ...(config.experimental.appDir
           ? {
               [CLIENT_STATIC_FILES_RUNTIME_MAIN_ROOT]:
                 `./` +
                 path
                   .relative(
                     dir,
-                    path.join(NEXT_PROJECT_ROOT_DIST_CLIENT, 'views-next.js')
+                    path.join(NEXT_PROJECT_ROOT_DIST_CLIENT, 'app-next.js')
                   )
                   .replace(/\\/g, '/'),
             }
@@ -660,9 +661,9 @@ export default async function getBaseWebpackConfig(
       ...customRootAliases,
 
       [PAGES_DIR_ALIAS]: pagesDir,
-      ...(viewsDir
+      ...(appDir
         ? {
-            [VIEWS_DIR_ALIAS]: viewsDir,
+            [APP_DIR_ALIAS]: appDir,
           }
         : {}),
       [ROOT_DIR_ALIAS]: dir,
@@ -1182,7 +1183,7 @@ export default async function getBaseWebpackConfig(
             ? `[name].js`
             : `../[name].js`
           : `static/chunks/${isDevFallback ? 'fallback/' : ''}[name]${
-              dev ? '' : '-[contenthash]'
+              dev ? '' : appDir ? '-[chunkhash]' : '-[contenthash]'
             }.js`,
       library: isClient || isEdgeServer ? '_N_E' : undefined,
       libraryTarget: isClient || isEdgeServer ? 'assign' : 'commonjs2',
@@ -1220,7 +1221,7 @@ export default async function getBaseWebpackConfig(
         'next-middleware-loader',
         'next-middleware-ssr-loader',
         'next-middleware-wasm-loader',
-        'next-view-loader',
+        'next-app-loader',
       ].reduce((alias, loader) => {
         // using multiple aliases to replace `resolveLoader.modules`
         alias[loader] = path.join(__dirname, 'webpack', 'loaders', loader)
@@ -1601,7 +1602,7 @@ export default async function getBaseWebpackConfig(
           serverless: isLikeServerless,
           dev,
           isEdgeRuntime: isEdgeServer,
-          rootEnabled: !!config.experimental.viewsDir,
+          appDirEnabled: !!config.experimental.appDir,
         }),
       // MiddlewarePlugin should be after DefinePlugin so  NEXT_PUBLIC_*
       // replacement is done before its process.env.* handling
@@ -1612,7 +1613,7 @@ export default async function getBaseWebpackConfig(
           rewrites,
           isDevFallback,
           exportRuntime: hasConcurrentFeatures,
-          rootEnabled: !!config.experimental.viewsDir,
+          appDirEnabled: !!config.experimental.appDir,
         }),
       new ProfilingPlugin({ runWebpackSpan }),
       config.optimizeFonts &&
@@ -1641,12 +1642,16 @@ export default async function getBaseWebpackConfig(
           },
         }),
       hasServerComponents &&
-        !isClient &&
-        new FlightManifestPlugin({
-          dev,
-          pageExtensions: rawPageExtensions,
-          isEdgeServer,
-        }),
+        (isClient
+          ? new FlightManifestPlugin({
+              dev,
+              appDir: !!config.experimental.appDir,
+              pageExtensions: rawPageExtensions,
+            })
+          : new ClientEntryPlugin({
+              dev,
+              isEdgeServer,
+            })),
       !dev &&
         isClient &&
         new TelemetryPlugin(
diff --git a/packages/next/build/webpack/loaders/next-view-loader.ts b/packages/next/build/webpack/loaders/next-app-loader.ts
similarity index 75%
rename from packages/next/build/webpack/loaders/next-view-loader.ts
rename to packages/next/build/webpack/loaders/next-app-loader.ts
index 481b35b2bc379..3d21024d84a33 100644
--- a/packages/next/build/webpack/loaders/next-view-loader.ts
+++ b/packages/next/build/webpack/loaders/next-app-loader.ts
@@ -4,9 +4,9 @@ import { NODE_RESOLVE_OPTIONS } from '../../webpack-config'
 import { getModuleBuildInfo } from './get-module-build-info'
 
 function pathToUrlPath(pathname: string) {
-  let urlPath = pathname.replace(/^private-next-views-dir/, '')
+  let urlPath = pathname.replace(/^private-next-app-dir/, '')
 
-  // For `views/layout.js`
+  // For `app/layout.js`
   if (urlPath === '') {
     urlPath = '/'
   }
@@ -36,17 +36,17 @@ async function resolveLayoutPathsByPage({
     let resolvedLayoutPath = await resolve(layoutPath)
     let urlPath = pathToUrlPath(pathWithoutSlashLayout)
 
-    // if we are in a new root views/(root) and a custom root layout was
-    // not provided or a root layout views/layout is not present, we use
+    // if we are in a new root app/(root) and a custom root layout was
+    // not provided or a root layout app/layout is not present, we use
     // a default root layout to provide the html/body tags
     const isCustomRootLayout = isNewRootLayout && i === 2
 
     if ((isCustomRootLayout || i === 1) && !resolvedLayoutPath) {
-      resolvedLayoutPath = await resolve('next/dist/lib/views-layout')
+      resolvedLayoutPath = await resolve('next/dist/lib/app-layout')
     }
     layoutPaths.set(urlPath, resolvedLayoutPath)
 
-    // if we're in a new root layout don't add the top-level view/layout
+    // if we're in a new root layout don't add the top-level app/layout
     if (isCustomRootLayout) {
       break
     }
@@ -54,19 +54,18 @@ async function resolveLayoutPathsByPage({
   return layoutPaths
 }
 
-const nextViewLoader: webpack.LoaderDefinitionFunction<{
+const nextAppLoader: webpack.LoaderDefinitionFunction<{
   name: string
   pagePath: string
-  viewsDir: string
+  appDir: string
   pageExtensions: string[]
-}> = async function nextViewLoader() {
-  const { name, viewsDir, pagePath, pageExtensions } = this.getOptions() || {}
+}> = async function nextAppLoader() {
+  const { name, appDir, pagePath, pageExtensions } = this.getOptions() || {}
 
   const buildInfo = getModuleBuildInfo((this as any)._module)
   buildInfo.route = {
-    page: name.replace(/^views/, ''),
-    absolutePagePath:
-      viewsDir + pagePath.replace(/^private-next-views-dir/, ''),
+    page: name.replace(/^app/, ''),
+    absolutePagePath: appDir + pagePath.replace(/^private-next-app-dir/, ''),
   }
 
   const extensions = pageExtensions.map((extension) => `.${extension}`)
@@ -99,9 +98,7 @@ const nextViewLoader: webpack.LoaderDefinitionFunction<{
       componentsCode.push(codeLine)
     } else {
       for (const ext of extensions) {
-        this.addMissingDependency(
-          path.join(viewsDir, layoutPath, `layout${ext}`)
-        )
+        this.addMissingDependency(path.join(appDir, layoutPath, `layout${ext}`))
       }
     }
   }
@@ -120,9 +117,9 @@ const nextViewLoader: webpack.LoaderDefinitionFunction<{
         ${componentsCode.join(',\n')}
     };
 
-    export const __next_view_webpack_require__ = __webpack_require__
+    export const __next_app_webpack_require__ = __webpack_require__
   `
   return result
 }
 
-export default nextViewLoader
+export default nextAppLoader
diff --git a/packages/next/build/webpack/plugins/build-manifest-plugin.ts b/packages/next/build/webpack/plugins/build-manifest-plugin.ts
index 7d02aeb08d566..2357bc33edaf1 100644
--- a/packages/next/build/webpack/plugins/build-manifest-plugin.ts
+++ b/packages/next/build/webpack/plugins/build-manifest-plugin.ts
@@ -96,14 +96,14 @@ export default class BuildManifestPlugin {
   private rewrites: CustomRoutes['rewrites']
   private isDevFallback: boolean
   private exportRuntime: boolean
-  private rootEnabled: boolean
+  private appDirEnabled: boolean
 
   constructor(options: {
     buildId: string
     rewrites: CustomRoutes['rewrites']
     isDevFallback?: boolean
     exportRuntime?: boolean
-    rootEnabled: boolean
+    appDirEnabled: boolean
   }) {
     this.buildId = options.buildId
     this.isDevFallback = !!options.isDevFallback
@@ -112,7 +112,7 @@ export default class BuildManifestPlugin {
       afterFiles: [],
       fallback: [],
     }
-    this.rootEnabled = options.rootEnabled
+    this.appDirEnabled = options.appDirEnabled
     this.rewrites.beforeFiles = options.rewrites.beforeFiles.map(processRoute)
     this.rewrites.afterFiles = options.rewrites.afterFiles.map(processRoute)
     this.rewrites.fallback = options.rewrites.fallback.map(processRoute)
@@ -152,7 +152,7 @@ export default class BuildManifestPlugin {
         getEntrypointFiles(entrypoints.get(CLIENT_STATIC_FILES_RUNTIME_MAIN))
       )
 
-      if (this.rootEnabled) {
+      if (this.appDirEnabled) {
         assetMap.rootMainFiles = [
           ...new Set(
             getEntrypointFiles(
@@ -193,7 +193,7 @@ export default class BuildManifestPlugin {
         CLIENT_STATIC_FILES_RUNTIME_MAIN,
         CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH,
         CLIENT_STATIC_FILES_RUNTIME_AMP,
-        ...(this.rootEnabled ? [CLIENT_STATIC_FILES_RUNTIME_MAIN_ROOT] : []),
+        ...(this.appDirEnabled ? [CLIENT_STATIC_FILES_RUNTIME_MAIN_ROOT] : []),
       ])
 
       for (const entrypoint of compilation.entrypoints.values()) {
diff --git a/packages/next/build/webpack/plugins/client-entry-plugin.ts b/packages/next/build/webpack/plugins/client-entry-plugin.ts
new file mode 100644
index 0000000000000..2cff965cc9549
--- /dev/null
+++ b/packages/next/build/webpack/plugins/client-entry-plugin.ts
@@ -0,0 +1,192 @@
+import { stringify } from 'querystring'
+import { webpack } from 'next/dist/compiled/webpack/webpack'
+import {
+  EDGE_RUNTIME_WEBPACK,
+  NEXT_CLIENT_SSR_ENTRY_SUFFIX,
+} from '../../../shared/lib/constants'
+import { clientComponentRegex } from '../loaders/utils'
+import { normalizePagePath } from '../../../shared/lib/page-path/normalize-page-path'
+import { denormalizePagePath } from '../../../shared/lib/page-path/denormalize-page-path'
+import {
+  getInvalidator,
+  entries,
+} from '../../../server/dev/on-demand-entry-handler'
+import { getPageStaticInfo } from '../../analysis/get-page-static-info'
+
+type Options = {
+  dev: boolean
+  isEdgeServer: boolean
+}
+
+const PLUGIN_NAME = 'ClientEntryPlugin'
+
+export const injectedClientEntries = new Map()
+
+export class ClientEntryPlugin {
+  dev: boolean = false
+  isEdgeServer: boolean
+
+  constructor(options: Options) {
+    if (typeof options.dev === 'boolean') {
+      this.dev = options.dev
+    }
+    this.isEdgeServer = options.isEdgeServer
+  }
+
+  apply(compiler: any) {
+    compiler.hooks.compilation.tap(
+      PLUGIN_NAME,
+      (compilation: any, { normalModuleFactory }: any) => {
+        compilation.dependencyFactories.set(
+          (webpack as any).dependencies.ModuleDependency,
+          normalModuleFactory
+        )
+        compilation.dependencyTemplates.set(
+          (webpack as any).dependencies.ModuleDependency,
+          new (webpack as any).dependencies.NullDependency.Template()
+        )
+      }
+    )
+
+    // Only for webpack 5
+    compiler.hooks.finishMake.tapAsync(
+      PLUGIN_NAME,
+      async (compilation: any, callback: any) => {
+        this.createClientEndpoints(compilation, callback)
+      }
+    )
+  }
+
+  async createClientEndpoints(compilation: any, callback: () => void) {
+    const context = (this as any).context
+    const promises: any = []
+
+    // For each SC server compilation entry, we need to create its corresponding
+    // client component entry.
+    for (const [name, entry] of compilation.entries.entries()) {
+      // Check if the page entry is a server component or not.
+      const entryDependency = entry.dependencies?.[0]
+      const request = entryDependency?.request
+
+      if (request && entry.options?.layer === 'sc_server') {
+        const visited = new Set()
+        const clientComponentImports: string[] = []
+
+        function filterClientComponents(dependency: any) {
+          const module = compilation.moduleGraph.getResolvedModule(dependency)
+          if (!module) return
+
+          if (visited.has(module.userRequest)) return
+          visited.add(module.userRequest)
+
+          if (clientComponentRegex.test(module.userRequest)) {
+            clientComponentImports.push(module.userRequest)
+          }
+
+          compilation.moduleGraph
+            .getOutgoingConnections(module)
+            .forEach((connection: any) => {
+              filterClientComponents(connection.dependency)
+            })
+        }
+
+        // Traverse the module graph to find all client components.
+        filterClientComponents(entryDependency)
+
+        const entryModule =
+          compilation.moduleGraph.getResolvedModule(entryDependency)
+        const routeInfo = entryModule.buildInfo.route || {
+          page: denormalizePagePath(name.replace(/^pages/, '')),
+          absolutePagePath: entryModule.resource,
+        }
+
+        // Parse gSSP and gSP exports from the page source.
+        const pageStaticInfo = this.isEdgeServer
+          ? {}
+          : await getPageStaticInfo({
+              pageFilePath: routeInfo.absolutePagePath,
+              nextConfig: {},
+              isDev: this.dev,
+            })
+
+        const clientLoader = `next-flight-client-entry-loader?${stringify({
+          modules: clientComponentImports,
+          runtime: this.isEdgeServer ? 'edge' : 'nodejs',
+          ssr: pageStaticInfo.ssr,
+          // Adding name here to make the entry key unique.
+          name,
+        })}!`
+
+        const bundlePath = 'pages' + normalizePagePath(routeInfo.page)
+
+        // Inject the entry to the client compiler.
+        if (this.dev) {
+          const pageKey = 'client' + routeInfo.page
+          if (!entries[pageKey]) {
+            entries[pageKey] = {
+              bundlePath,
+              absolutePagePath: routeInfo.absolutePagePath,
+              clientLoader,
+              dispose: false,
+              lastActiveTime: Date.now(),
+            } as any
+            const invalidator = getInvalidator()
+            if (invalidator) {
+              invalidator.invalidate()
+            }
+          }
+        } else {
+          injectedClientEntries.set(
+            bundlePath,
+            `next-client-pages-loader?${stringify({
+              isServerComponent: true,
+              page: denormalizePagePath(bundlePath.replace(/^pages/, '')),
+              absolutePagePath: clientLoader,
+            })}!` + clientLoader
+          )
+        }
+
+        // Inject the entry to the server compiler.
+        const clientComponentEntryDep = (
+          webpack as any
+        ).EntryPlugin.createDependency(
+          clientLoader,
+          name + NEXT_CLIENT_SSR_ENTRY_SUFFIX
+        )
+        promises.push(
+          new Promise<void>((res, rej) => {
+            compilation.addEntry(
+              context,
+              clientComponentEntryDep,
+              this.isEdgeServer
+                ? {
+                    name: name + NEXT_CLIENT_SSR_ENTRY_SUFFIX,
+                    library: {
+                      name: ['self._CLIENT_ENTRY'],
+                      type: 'assign',
+                    },
+                    runtime: EDGE_RUNTIME_WEBPACK,
+                    asyncChunks: false,
+                  }
+                : {
+                    name: name + NEXT_CLIENT_SSR_ENTRY_SUFFIX,
+                    runtime: 'webpack-runtime',
+                  },
+              (err: any) => {
+                if (err) {
+                  rej(err)
+                } else {
+                  res()
+                }
+              }
+            )
+          })
+        )
+      }
+    }
+
+    Promise.all(promises)
+      .then(() => callback())
+      .catch(callback)
+  }
+}
diff --git a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts
index f0362f7c1b1a4..ee10b4a3e563b 100644
--- a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts
+++ b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts
@@ -5,21 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { stringify } from 'querystring'
 import { webpack, sources } from 'next/dist/compiled/webpack/webpack'
-import {
-  MIDDLEWARE_FLIGHT_MANIFEST,
-  EDGE_RUNTIME_WEBPACK,
-  NEXT_CLIENT_SSR_ENTRY_SUFFIX,
-} from '../../../shared/lib/constants'
+import { MIDDLEWARE_FLIGHT_MANIFEST } from '../../../shared/lib/constants'
 import { clientComponentRegex } from '../loaders/utils'
-import { normalizePagePath } from '../../../shared/lib/page-path/normalize-page-path'
-import { denormalizePagePath } from '../../../shared/lib/page-path/denormalize-page-path'
-import {
-  getInvalidator,
-  entries,
-} from '../../../server/dev/on-demand-entry-handler'
-import { getPageStaticInfo } from '../../analysis/get-page-static-info'
 
 // This is the module that will be used to anchor all client references to.
 // I.e. it will have all the client files as async deps from this point on.
@@ -30,28 +18,23 @@ import { getPageStaticInfo } from '../../analysis/get-page-static-info'
 
 type Options = {
   dev: boolean
+  appDir: boolean
   pageExtensions: string[]
-  isEdgeServer: boolean
 }
 
 const PLUGIN_NAME = 'FlightManifestPlugin'
 
-let edgeFlightManifest = {}
-let nodeFlightManifest = {}
-
-export const injectedClientEntries = new Map()
-
 export class FlightManifestPlugin {
   dev: boolean = false
   pageExtensions: string[]
-  isEdgeServer: boolean
+  appDir: boolean = false
 
   constructor(options: Options) {
     if (typeof options.dev === 'boolean') {
       this.dev = options.dev
     }
+    this.appDir = options.appDir
     this.pageExtensions = options.pageExtensions
-    this.isEdgeServer = options.isEdgeServer
   }
 
   apply(compiler: any) {
@@ -69,14 +52,6 @@ export class FlightManifestPlugin {
       }
     )
 
-    // Only for webpack 5
-    compiler.hooks.finishMake.tapAsync(
-      PLUGIN_NAME,
-      async (compilation: any, callback: any) => {
-        this.createClientEndpoints(compilation, callback)
-      }
-    )
-
     compiler.hooks.make.tap(PLUGIN_NAME, (compilation: any) => {
       compilation.hooks.processAssets.tap(
         {
@@ -89,143 +64,13 @@ export class FlightManifestPlugin {
     })
   }
 
-  async createClientEndpoints(compilation: any, callback: () => void) {
-    const context = (this as any).context
-    const promises: any = []
-
-    // For each SC server compilation entry, we need to create its corresponding
-    // client component entry.
-    for (const [name, entry] of compilation.entries.entries()) {
-      // Check if the page entry is a server component or not.
-      const entryDependency = entry.dependencies?.[0]
-      const request = entryDependency?.request
-
-      if (request && entry.options?.layer === 'sc_server') {
-        const visited = new Set()
-        const clientComponentImports: string[] = []
-
-        function filterClientComponents(dependency: any) {
-          const module = compilation.moduleGraph.getResolvedModule(dependency)
-          if (!module) return
-
-          if (visited.has(module.userRequest)) return
-          visited.add(module.userRequest)
-
-          if (clientComponentRegex.test(module.userRequest)) {
-            clientComponentImports.push(module.userRequest)
-          }
-
-          compilation.moduleGraph
-            .getOutgoingConnections(module)
-            .forEach((connection: any) => {
-              filterClientComponents(connection.dependency)
-            })
-        }
-
-        // Traverse the module graph to find all client components.
-        filterClientComponents(entryDependency)
-
-        const entryModule =
-          compilation.moduleGraph.getResolvedModule(entryDependency)
-        const routeInfo = entryModule.buildInfo.route || {
-          page: denormalizePagePath(name.replace(/^pages/, '')),
-          absolutePagePath: entryModule.resource,
-        }
-
-        // Parse gSSP and gSP exports from the page source.
-        const pageStaticInfo = this.isEdgeServer
-          ? {}
-          : await getPageStaticInfo({
-              pageFilePath: routeInfo.absolutePagePath,
-              nextConfig: {},
-              isDev: this.dev,
-            })
-
-        const clientLoader = `next-flight-client-entry-loader?${stringify({
-          modules: clientComponentImports,
-          runtime: this.isEdgeServer ? 'edge' : 'nodejs',
-          ssr: pageStaticInfo.ssr,
-          // Adding name here to make the entry key unique.
-          name,
-        })}!`
-
-        const bundlePath = 'pages' + normalizePagePath(routeInfo.page)
-
-        // Inject the entry to the client compiler.
-        if (this.dev) {
-          const pageKey = 'client' + routeInfo.page
-          if (!entries[pageKey]) {
-            entries[pageKey] = {
-              bundlePath,
-              absolutePagePath: routeInfo.absolutePagePath,
-              clientLoader,
-              dispose: false,
-              lastActiveTime: Date.now(),
-            } as any
-            const invalidator = getInvalidator()
-            if (invalidator) {
-              invalidator.invalidate()
-            }
-          }
-        } else {
-          injectedClientEntries.set(
-            bundlePath,
-            `next-client-pages-loader?${stringify({
-              isServerComponent: true,
-              page: denormalizePagePath(bundlePath.replace(/^pages/, '')),
-              absolutePagePath: clientLoader,
-            })}!` + clientLoader
-          )
-        }
-
-        // Inject the entry to the server compiler.
-        const clientComponentEntryDep = (
-          webpack as any
-        ).EntryPlugin.createDependency(
-          clientLoader,
-          name + NEXT_CLIENT_SSR_ENTRY_SUFFIX
-        )
-        promises.push(
-          new Promise<void>((res, rej) => {
-            compilation.addEntry(
-              context,
-              clientComponentEntryDep,
-              this.isEdgeServer
-                ? {
-                    name: name + NEXT_CLIENT_SSR_ENTRY_SUFFIX,
-                    library: {
-                      name: ['self._CLIENT_ENTRY'],
-                      type: 'assign',
-                    },
-                    runtime: EDGE_RUNTIME_WEBPACK,
-                    asyncChunks: false,
-                  }
-                : {
-                    name: name + NEXT_CLIENT_SSR_ENTRY_SUFFIX,
-                    runtime: 'webpack-runtime',
-                  },
-              (err: any) => {
-                if (err) {
-                  rej(err)
-                } else {
-                  res()
-                }
-              }
-            )
-          })
-        )
-      }
-    }
-
-    Promise.all(promises)
-      .then(() => callback())
-      .catch(callback)
-  }
-
   createAsset(assets: any, compilation: any) {
     const manifest: any = {}
+    const appDir = this.appDir
+    const dev = this.dev
+
     compilation.chunkGroups.forEach((chunkGroup: any) => {
-      function recordModule(id: string, _chunk: any, mod: any) {
+      function recordModule(chunk: any, id: string, mod: any) {
         const resource = mod.resource
 
         // TODO: Hook into deps instead of the target module.
@@ -258,7 +103,13 @@ export class FlightManifestPlugin {
             moduleExports[name] = {
               id: id.replace(/^\(sc_server\)\//, ''),
               name,
-              chunks: [],
+              chunks: appDir
+                ? chunk.ids.map((chunkId: string) => {
+                    return (
+                      chunkId + ':' + chunk.name + (dev ? '' : '-' + chunk.hash)
+                    )
+                  })
+                : [],
             }
           }
         })
@@ -277,33 +128,22 @@ export class FlightManifestPlugin {
           modId = modId.split('?')[0]
           // Remove the loader prefix.
           modId = modId.split('next-flight-client-loader.js!')[1] || modId
+          modId = modId.replace(/^\(sc_server\)\//, '')
+
+          recordModule(chunk, modId, mod)
 
-          recordModule(modId, chunk, mod)
           // If this is a concatenation, register each child to the parent ID.
           if (mod.modules) {
             mod.modules.forEach((concatenatedMod: any) => {
-              recordModule(modId, chunk, concatenatedMod)
+              recordModule(chunk, modId, concatenatedMod)
             })
           }
         }
       })
     })
 
-    // With switchable runtime, we need to emit the manifest files for both
-    // runtimes.
-    if (this.isEdgeServer) {
-      edgeFlightManifest = manifest
-    } else {
-      nodeFlightManifest = manifest
-    }
-    const mergedManifest = {
-      ...nodeFlightManifest,
-      ...edgeFlightManifest,
-    }
-    const file =
-      (!this.dev && !this.isEdgeServer ? '../' : '') +
-      MIDDLEWARE_FLIGHT_MANIFEST
-    const json = JSON.stringify(mergedManifest)
+    const file = 'server/' + MIDDLEWARE_FLIGHT_MANIFEST
+    const json = JSON.stringify(manifest)
 
     assets[file + '.js'] = new sources.RawSource('self.__RSC_MANIFEST=' + json)
     assets[file + '.json'] = new sources.RawSource(json)
diff --git a/packages/next/build/webpack/plugins/pages-manifest-plugin.ts b/packages/next/build/webpack/plugins/pages-manifest-plugin.ts
index 068d732d13ba7..7ec405f386679 100644
--- a/packages/next/build/webpack/plugins/pages-manifest-plugin.ts
+++ b/packages/next/build/webpack/plugins/pages-manifest-plugin.ts
@@ -1,7 +1,7 @@
 import { webpack, sources } from 'next/dist/compiled/webpack/webpack'
 import {
   PAGES_MANIFEST,
-  VIEW_PATHS_MANIFEST,
+  APP_PATHS_MANIFEST,
 } from '../../../shared/lib/constants'
 import getRouteFromEntrypoint from '../../../server/get-route-from-entrypoint'
 import { normalizePathSep } from '../../../shared/lib/page-path/normalize-path-sep'
@@ -20,23 +20,23 @@ export default class PagesManifestPlugin implements webpack.Plugin {
   serverless: boolean
   dev: boolean
   isEdgeRuntime: boolean
-  rootEnabled: boolean
+  appDirEnabled: boolean
 
   constructor({
     serverless,
     dev,
     isEdgeRuntime,
-    rootEnabled,
+    appDirEnabled,
   }: {
     serverless: boolean
     dev: boolean
     isEdgeRuntime: boolean
-    rootEnabled: boolean
+    appDirEnabled: boolean
   }) {
     this.serverless = serverless
     this.dev = dev
     this.isEdgeRuntime = isEdgeRuntime
-    this.rootEnabled = rootEnabled
+    this.appDirEnabled = appDirEnabled
   }
 
   createAssets(compilation: any, assets: any) {
@@ -45,7 +45,10 @@ export default class PagesManifestPlugin implements webpack.Plugin {
     const rootPaths: PagesManifest = {}
 
     for (const entrypoint of entrypoints.values()) {
-      const pagePath = getRouteFromEntrypoint(entrypoint.name, this.rootEnabled)
+      const pagePath = getRouteFromEntrypoint(
+        entrypoint.name,
+        this.appDirEnabled
+      )
 
       if (!pagePath) {
         continue
@@ -74,7 +77,7 @@ export default class PagesManifestPlugin implements webpack.Plugin {
       }
       file = normalizePathSep(file)
 
-      if (entrypoint.name.startsWith('views/')) {
+      if (entrypoint.name.startsWith('app/')) {
         rootPaths[pagePath] = file
       } else {
         pages[pagePath] = file
@@ -104,9 +107,9 @@ export default class PagesManifestPlugin implements webpack.Plugin {
       )
     )
 
-    if (this.rootEnabled) {
+    if (this.appDirEnabled) {
       assets[
-        `${!this.dev && !this.isEdgeRuntime ? '../' : ''}` + VIEW_PATHS_MANIFEST
+        `${!this.dev && !this.isEdgeRuntime ? '../' : ''}` + APP_PATHS_MANIFEST
       ] = new sources.RawSource(
         JSON.stringify(
           {
diff --git a/packages/next/client/views-index.tsx b/packages/next/client/app-index.tsx
similarity index 95%
rename from packages/next/client/views-index.tsx
rename to packages/next/client/app-index.tsx
index 49f995dd27200..c16884831644c 100644
--- a/packages/next/client/views-index.tsx
+++ b/packages/next/client/app-index.tsx
@@ -194,17 +194,17 @@ const RSCComponent = (props: any) => {
   )
 }
 
-const ViewRouterContext = React.createContext({})
+const AppRouterContext = React.createContext({})
 
 // TODO: move to client component when handling is implemented
-function ViewRouter({ initialUrl, children }: any) {
+function AppRouter({ initialUrl, children }: any) {
   const initialState = {
     url: initialUrl,
   }
   const previousUrlRef = React.useRef(initialState)
   const [current, setCurrent] = React.useState(initialState)
 
-  const viewRouter = React.useMemo(() => {
+  const appRouter = React.useMemo(() => {
     return {
       push: (url: string) => {
         previousUrlRef.current = current
@@ -217,10 +217,10 @@ function ViewRouter({ initialUrl, children }: any) {
   }, [current])
 
   // @ts-ignore TODO: for testing
-  window.viewRouter = viewRouter
+  window.appRouter = appRouter
 
   console.log({
-    viewRouter,
+    appRouter,
     previous: previousUrlRef.current,
     current,
   })
@@ -233,9 +233,9 @@ function ViewRouter({ initialUrl, children }: any) {
   }
 
   return (
-    <ViewRouterContext.Provider value={viewRouter}>
+    <AppRouterContext.Provider value={appRouter}>
       {root ? root : children}
-    </ViewRouterContext.Provider>
+    </AppRouterContext.Provider>
   )
 }
 
@@ -243,9 +243,9 @@ export function hydrate() {
   renderReactElement(appElement!, () => (
     <React.StrictMode>
       <Root>
-        <ViewRouter initialUrl={location.pathname}>
+        <AppRouter initialUrl={location.pathname}>
           <RSCComponent />
-        </ViewRouter>
+        </AppRouter>
       </Root>
     </React.StrictMode>
   ))
diff --git a/packages/next/client/app-next.js b/packages/next/client/app-next.js
new file mode 100644
index 0000000000000..c38d452870e7a
--- /dev/null
+++ b/packages/next/client/app-next.js
@@ -0,0 +1,30 @@
+import { hydrate, version } from './app-index'
+
+window.next = {
+  version,
+  root: true,
+}
+
+// Override chunk URL mapping in the webpack runtime
+// https://github.com/webpack/webpack/blob/2738eebc7880835d88c727d364ad37f3ec557593/lib/RuntimeGlobals.js#L204
+
+// eslint-disable-next-line no-undef
+const getChunkScriptFilename = __webpack_require__.u
+const chunkFilenameMap = {}
+
+// eslint-disable-next-line no-undef
+__webpack_require__.u = (chunkId) => {
+  return getChunkScriptFilename(chunkId) || chunkFilenameMap[chunkId]
+}
+
+// eslint-disable-next-line no-undef
+globalThis.__next_chunk_load__ = (chunk) => {
+  const [chunkId, chunkFileName] = chunk.split(':')
+  chunkFilenameMap[chunkId] = `static/chunks/${chunkFileName}.js`
+
+  // @ts-ignore
+  // eslint-disable-next-line no-undef
+  return __webpack_chunk_load__(chunkId)
+}
+
+hydrate()
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 8de739f2b6685..0edf70436fd9d 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -163,6 +163,7 @@ type ImageElementProps = Omit<ImageProps, 'src' | 'loader'> & {
   setBlurComplete: (b: boolean) => void
   setIntersection: (img: HTMLImageElement | null) => void
   isVisible: boolean
+  noscriptSizes: string | undefined
 }
 
 function getWidths(
@@ -830,6 +831,7 @@ export default function Image({
     setBlurComplete,
     setIntersection,
     isVisible,
+    noscriptSizes: sizes,
     ...rest,
   }
   return (
@@ -910,6 +912,7 @@ const ImageElement = ({
   onLoad,
   onError,
   isVisible,
+  noscriptSizes,
   ...rest
 }: ImageElementProps) => {
   return (
@@ -982,7 +985,7 @@ const ImageElement = ({
               layout,
               width: widthInt,
               quality: qualityInt,
-              sizes: imgAttributes.sizes,
+              sizes: noscriptSizes,
               loader,
             })}
             {...(layout === 'raw'
diff --git a/packages/next/client/link.tsx b/packages/next/client/link.tsx
index 0201ff81c9ba5..86ca88c684347 100644
--- a/packages/next/client/link.tsx
+++ b/packages/next/client/link.tsx
@@ -125,7 +125,7 @@ type LinkPropsReal = React.PropsWithChildren<
 >
 
 const Link = React.forwardRef<HTMLAnchorElement, LinkPropsReal>(
-  (props, forwardedRef) => {
+  function LinkComponent(props, forwardedRef) {
     const {
       legacyBehavior = Boolean(process.env.__NEXT_NEW_LINK_BEHAVIOR) !== true,
     } = props
diff --git a/packages/next/client/views-next.js b/packages/next/client/views-next.js
deleted file mode 100644
index c41d59c227f2f..0000000000000
--- a/packages/next/client/views-next.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { hydrate, version } from './views-index'
-
-window.next = {
-  version,
-  root: true,
-}
-
-hydrate()
diff --git a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js
index 82e96fce1151d..702e605c8335f 100644
--- a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js
+++ b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js
@@ -52,7 +52,7 @@ function preloadModule(moduleData) {
     var entry = chunkCache.get(chunkId);
 
     if (entry === undefined) {
-      var thenable = __webpack_chunk_load__(chunkId);
+      var thenable = globalThis.__next_chunk_load__(chunkId);
 
       var resolve = chunkCache.set.bind(chunkCache, chunkId, null);
       var reject = chunkCache.set.bind(chunkCache, chunkId);
diff --git a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.production.min.js b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.production.min.js
index 07b618e2a08b1..94f7f8ce0b18e 100644
--- a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.production.min.js
+++ b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.production.min.js
@@ -11,7 +11,7 @@
 function w(a){switch(a._status){case 3:return a._value;case 1:var b=JSON.parse(a._value,a._response._fromJSON);a._status=3;return a._value=b;case 2:b=a._value;for(var c=b.chunks,d=0;d<c.length;d++){var e=m.get(c[d]);if(null!==e)throw e;}c=__webpack_require__(b.id);b="*"===b.name?c:""===b.name?c.__esModule?c.default:c:c[b.name];a._status=3;return a._value=b;case 0:throw a;default:throw a._value;}}function x(){var a=y(this,0);return w(a)}function z(a,b){return new v(3,b,a)}
 function A(a){if(null!==a)for(var b=0;b<a.length;b++)(0,a[b])()}function C(a,b){if(0===a._status){var c=a._value;a._status=4;a._value=b;A(c)}}function D(a,b){a._chunks.forEach(function(a){C(a,b)})}function y(a,b){var c=a._chunks,d=c.get(b);d||(d=new v(0,null,a),c.set(b,d));return d}
 function E(a,b,c){switch(c[0]){case "$":if("$"===c)return p;if("$"===c[1]||"@"===c[1])return c.substring(1);b=parseInt(c.substring(1),16);a=y(a,b);return w(a);case "@":return b=parseInt(c.substring(1),16),a=y(a,b),{$$typeof:q,_payload:a,_init:w}}return c}function F(a){D(a,Error("Connection closed."))}
-function G(a,b){if(""!==b){var c=b[0],d=b.indexOf(":",1),e=parseInt(b.substring(1,d),16);d=b.substring(d+1);switch(c){case "J":b=a._chunks;(c=b.get(e))?0===c._status&&(a=c._value,c._status=1,c._value=d,A(a)):b.set(e,new v(1,d,a));break;case "M":b=a._chunks;c=b.get(e);d=JSON.parse(d,a._fromJSON);for(var n=d.chunks,g=0;g<n.length;g++){var f=n[g];if(void 0===m.get(f)){var B=__webpack_chunk_load__(f),l=m.set.bind(m,f,null),J=m.set.bind(m,f);B.then(l,J);m.set(f,B)}}c?0===c._status&&(a=c._value,c._status=
+function G(a,b){if(""!==b){var c=b[0],d=b.indexOf(":",1),e=parseInt(b.substring(1,d),16);d=b.substring(d+1);switch(c){case "J":b=a._chunks;(c=b.get(e))?0===c._status&&(a=c._value,c._status=1,c._value=d,A(a)):b.set(e,new v(1,d,a));break;case "M":b=a._chunks;c=b.get(e);d=JSON.parse(d,a._fromJSON);for(var n=d.chunks,g=0;g<n.length;g++){var f=n[g];if(void 0===m.get(f)){var B=globalThis.__next_chunk_load__(f),l=m.set.bind(m,f,null),J=m.set.bind(m,f);B.then(l,J);m.set(f,B)}}c?0===c._status&&(a=c._value,c._status=
 2,c._value=d,A(a)):b.set(e,new v(2,d,a));break;case "P":a._chunks.set(e,z(a,u(d).Provider));break;case "S":c=JSON.parse(d);a._chunks.set(e,z(a,Symbol.for(c)));break;case "E":b=JSON.parse(d);c=Error(b.message);c.stack=b.stack;b=a._chunks;(d=b.get(e))?C(d,c):b.set(e,new v(4,c,a));break;default:throw Error("Error parsing the data. It's probably an error code or network corruption.");}}}
 function H(a){return function(b,c){return"string"===typeof c?E(a,this,c):"object"===typeof c&&null!==c?(b=c[0]===p?{$$typeof:p,type:c[1],key:c[2],ref:null,props:c[3],_owner:null}:c,b):c}}function I(){var a=new TextDecoder;a={_chunks:new Map,readRoot:x,_partialRow:"",_stringDecoder:a};a._fromJSON=H(a);return a}
 function K(a,b){function c(b){var g=b.value;if(b.done)F(a);else{b=g;g=a._stringDecoder;for(var f=b.indexOf(10);-1<f;){var n=a._partialRow;var l=b.subarray(0,f);l=g.decode(l);G(a,n+l);a._partialRow="";b=b.subarray(f+1);f=b.indexOf(10)}a._partialRow+=g.decode(b,k);return e.read().then(c,d)}}function d(b){D(a,b)}var e=b.getReader();e.read().then(c,d)}exports.createFromFetch=function(a){var b=I();a.then(function(a){K(b,a.body)},function(a){D(b,a)});return b};
diff --git a/packages/next/export/index.ts b/packages/next/export/index.ts
index 669a6a1c5708d..79a52449b37f3 100644
--- a/packages/next/export/index.ts
+++ b/packages/next/export/index.ts
@@ -583,7 +583,7 @@ export default async function exportApp(
             outDir,
             pagesDataDir,
             renderOpts,
-            viewsDir: nextConfig.experimental.viewsDir,
+            appDir: nextConfig.experimental.appDir,
             serverRuntimeConfig,
             subFolders,
             buildExport: options.buildExport,
diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index 28eab497d3bdc..41331ca75e409 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -60,7 +60,7 @@ interface ExportPageInput {
   parentSpanId: any
   httpAgentOptions: NextConfigComplete['httpAgentOptions']
   serverComponents?: boolean
-  viewsDir?: boolean
+  appDir?: boolean
 }
 
 interface ExportPageResults {
@@ -85,7 +85,7 @@ interface RenderOpts {
   locale?: string
   defaultLocale?: string
   trailingSlash?: boolean
-  viewsDir?: boolean
+  appDir?: boolean
 }
 
 type ComponentModule = ComponentType<{}> & {
@@ -99,7 +99,7 @@ export default async function exportPage({
   pathMap,
   distDir,
   outDir,
-  viewsDir,
+  appDir,
   pagesDataDir,
   renderOpts,
   buildExport,
@@ -275,7 +275,7 @@ export default async function exportPage({
           page,
           serverless,
           serverComponents,
-          viewsDir
+          appDir
         )
         const ampState = {
           ampFirst: pageConfig?.amp === true,
diff --git a/packages/next/lib/views-layout.tsx b/packages/next/lib/app-layout.tsx
similarity index 78%
rename from packages/next/lib/views-layout.tsx
rename to packages/next/lib/app-layout.tsx
index 0f4d4edee356d..b88bd0c2b4994 100644
--- a/packages/next/lib/views-layout.tsx
+++ b/packages/next/lib/app-layout.tsx
@@ -4,7 +4,7 @@ export type LayoutProps = {
   children: any
 }
 
-export default function ViewsLayout({ children }: LayoutProps) {
+export default function AppLayout({ children }: LayoutProps) {
   return (
     <html>
       <head>
diff --git a/packages/next/lib/constants.ts b/packages/next/lib/constants.ts
index 937f77d693310..e4f34c43bd24d 100644
--- a/packages/next/lib/constants.ts
+++ b/packages/next/lib/constants.ts
@@ -28,7 +28,7 @@ export const MIDDLEWARE_FILE = `/${MIDDLEWARE_FILENAME}`
 export const PAGES_DIR_ALIAS = 'private-next-pages'
 export const DOT_NEXT_ALIAS = 'private-dot-next'
 export const ROOT_DIR_ALIAS = 'private-next-root-dir'
-export const VIEWS_DIR_ALIAS = 'private-next-views-dir'
+export const APP_DIR_ALIAS = 'private-next-app-dir'
 
 export const PUBLIC_DIR_MIDDLEWARE_CONFLICT = `You can not have a '_next' folder inside of your public folder. This conflicts with the internal '/_next' route. https://nextjs.org/docs/messages/public-next-folder-conflict`
 
diff --git a/packages/next/lib/find-pages-dir.ts b/packages/next/lib/find-pages-dir.ts
index 26a6799687ea9..61592f9e4f9dc 100644
--- a/packages/next/lib/find-pages-dir.ts
+++ b/packages/next/lib/find-pages-dir.ts
@@ -10,7 +10,7 @@ export const existsSync = (f: string): boolean => {
   }
 }
 
-function findDir(dir: string, name: 'pages' | 'views'): string | null {
+function findDir(dir: string, name: 'pages' | 'app'): string | null {
   // prioritize ./${name} over ./src/${name}
   let curDir = path.join(dir, name)
   if (existsSync(curDir)) return curDir
@@ -23,13 +23,13 @@ function findDir(dir: string, name: 'pages' | 'views'): string | null {
 
 export function findPagesDir(
   dir: string,
-  views?: boolean
-): { pages: string; views?: string } {
+  appDirEnabled?: boolean
+): { pages: string; appDir?: string } {
   const pagesDir = findDir(dir, 'pages')
-  let viewsDir: undefined | string
+  let appDir: undefined | string
 
-  if (views) {
-    viewsDir = findDir(dir, 'views') || undefined
+  if (appDirEnabled) {
+    appDir = findDir(dir, 'app') || undefined
   }
 
   // TODO: allow "root" dir without pages dir
@@ -41,6 +41,6 @@ export function findPagesDir(
 
   return {
     pages: pagesDir,
-    views: viewsDir,
+    appDir,
   }
 }
diff --git a/packages/next/lib/typescript/getTypeScriptIntent.ts b/packages/next/lib/typescript/getTypeScriptIntent.ts
index a8aa7ab69fb80..08ca8a461c324 100644
--- a/packages/next/lib/typescript/getTypeScriptIntent.ts
+++ b/packages/next/lib/typescript/getTypeScriptIntent.ts
@@ -1,6 +1,5 @@
 import { promises as fs } from 'fs'
 import path from 'path'
-import { NextConfigComplete } from '../../server/config-shared'
 import { fileExists } from '../file-exists'
 import { recursiveReadDir } from '../recursive-readdir'
 
@@ -9,18 +8,20 @@ export type TypeScriptIntent = { firstTimeSetup: boolean }
 export async function getTypeScriptIntent(
   baseDir: string,
   intentDirs: string[],
-  config: NextConfigComplete
+  tsconfigPath: string
 ): Promise<TypeScriptIntent | false> {
-  const tsConfigPath = path.join(baseDir, config.typescript.tsconfigPath)
+  const resolvedTsConfigPath = path.join(baseDir, tsconfigPath)
 
   // The integration turns on if we find a `tsconfig.json` in the user's
   // project.
-  const hasTypeScriptConfiguration = await fileExists(tsConfigPath)
+  const hasTypeScriptConfiguration = await fileExists(resolvedTsConfigPath)
   if (hasTypeScriptConfiguration) {
-    const content = await fs.readFile(tsConfigPath, { encoding: 'utf8' }).then(
-      (txt) => txt.trim(),
-      () => null
-    )
+    const content = await fs
+      .readFile(resolvedTsConfigPath, { encoding: 'utf8' })
+      .then(
+        (txt) => txt.trim(),
+        () => null
+      )
     return { firstTimeSetup: content === '' || content === '{}' }
   }
 
diff --git a/packages/next/lib/verifyTypeScriptSetup.ts b/packages/next/lib/verifyTypeScriptSetup.ts
index e4e47742c4228..9062e2e278ba7 100644
--- a/packages/next/lib/verifyTypeScriptSetup.ts
+++ b/packages/next/lib/verifyTypeScriptSetup.ts
@@ -14,7 +14,6 @@ import { TypeCheckResult } from './typescript/runTypeCheck'
 import { writeAppTypeDeclarations } from './typescript/writeAppTypeDeclarations'
 import { writeConfigurationDefaults } from './typescript/writeConfigurationDefaults'
 import { missingDepsError } from './typescript/missingDependencyError'
-import { NextConfigComplete } from '../server/config-shared'
 
 const requiredPackages = [
   { file: 'typescript', pkg: 'typescript', exportsRestrict: false },
@@ -34,14 +33,15 @@ export async function verifyTypeScriptSetup(
   dir: string,
   intentDirs: string[],
   typeCheckPreflight: boolean,
-  config: NextConfigComplete,
+  tsconfigPath: string,
+  disableStaticImages: boolean,
   cacheDir?: string
 ): Promise<{ result?: TypeCheckResult; version: string | null }> {
-  const tsConfigPath = path.join(dir, config.typescript.tsconfigPath)
+  const resolvedTsConfigPath = path.join(dir, tsconfigPath)
 
   try {
     // Check if the project uses TypeScript:
-    const intent = await getTypeScriptIntent(dir, intentDirs, config)
+    const intent = await getTypeScriptIntent(dir, intentDirs, tsconfigPath)
     if (!intent) {
       return { version: null }
     }
@@ -68,17 +68,21 @@ export async function verifyTypeScriptSetup(
     }
 
     // Reconfigure (or create) the user's `tsconfig.json` for them:
-    await writeConfigurationDefaults(ts, tsConfigPath, intent.firstTimeSetup)
+    await writeConfigurationDefaults(
+      ts,
+      resolvedTsConfigPath,
+      intent.firstTimeSetup
+    )
     // Write out the necessary `next-env.d.ts` file to correctly register
     // Next.js' types:
-    await writeAppTypeDeclarations(dir, !config.images.disableStaticImages)
+    await writeAppTypeDeclarations(dir, !disableStaticImages)
 
     let result
     if (typeCheckPreflight) {
       const { runTypeCheck } = require('./typescript/runTypeCheck')
 
       // Verify the project passes type-checking before we go to webpack phase:
-      result = await runTypeCheck(ts, dir, tsConfigPath, cacheDir)
+      result = await runTypeCheck(ts, dir, resolvedTsConfigPath, cacheDir)
     }
     return { result, version: ts.version }
   } catch (err) {
diff --git a/packages/next/package.json b/packages/next/package.json
index e03c4483f6839..e3f8cc5db5f5c 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -69,7 +69,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "12.1.7-canary.11",
+    "@next/env": "12.1.7-canary.16",
     "caniuse-lite": "^1.0.30001332",
     "postcss": "8.4.5",
     "styled-jsx": "5.0.2",
@@ -118,11 +118,11 @@
     "@hapi/accept": "5.0.2",
     "@napi-rs/cli": "2.4.4",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "12.1.7-canary.11",
-    "@next/polyfill-nomodule": "12.1.7-canary.11",
-    "@next/react-dev-overlay": "12.1.7-canary.11",
-    "@next/react-refresh-utils": "12.1.7-canary.11",
-    "@next/swc": "12.1.7-canary.11",
+    "@next/polyfill-module": "12.1.7-canary.16",
+    "@next/polyfill-nomodule": "12.1.7-canary.16",
+    "@next/react-dev-overlay": "12.1.7-canary.16",
+    "@next/react-refresh-utils": "12.1.7-canary.16",
+    "@next/swc": "12.1.7-canary.16",
     "@peculiar/webcrypto": "1.3.1",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
@@ -159,7 +159,7 @@
     "@types/uuid": "8.3.1",
     "@types/webpack-sources1": "npm:@types/webpack-sources@0.1.5",
     "@types/ws": "8.2.0",
-    "@vercel/ncc": "0.33.1",
+    "@vercel/ncc": "0.33.4",
     "@vercel/nft": "0.19.1",
     "acorn": "8.5.0",
     "amphtml-validator": "1.0.35",
diff --git a/packages/next/server/view-render.tsx b/packages/next/server/app-render.tsx
similarity index 98%
rename from packages/next/server/view-render.tsx
rename to packages/next/server/app-render.tsx
index 3e1e1f10f510f..04e01c4d8d1c9 100644
--- a/packages/next/server/view-render.tsx
+++ b/packages/next/server/app-render.tsx
@@ -161,14 +161,14 @@ function createServerComponentRenderer(
 ) {
   // We need to expose the `__webpack_require__` API globally for
   // react-server-dom-webpack. This is a hack until we find a better way.
-  if (ComponentMod.__next_view_webpack_require__ || ComponentMod.__next_rsc__) {
+  if (ComponentMod.__next_app_webpack_require__ || ComponentMod.__next_rsc__) {
     // @ts-ignore
-    globalThis.__webpack_require__ = ComponentMod.__next_view_webpack_require__
-      ? ComponentMod.__next_view_webpack_require__
+    globalThis.__webpack_require__ = ComponentMod.__next_app_webpack_require__
+      ? ComponentMod.__next_app_webpack_require__
       : ComponentMod.__next_rsc__.__webpack_require__
 
     // @ts-ignore
-    globalThis.__webpack_chunk_load__ = () => Promise.resolve()
+    globalThis.__next_chunk_load__ = () => Promise.resolve()
   }
 
   const writable = transformStream.writable
diff --git a/packages/next/server/base-server.ts b/packages/next/server/base-server.ts
index 2acbc1215dc01..0e7d48c52c05a 100644
--- a/packages/next/server/base-server.ts
+++ b/packages/next/server/base-server.ts
@@ -65,7 +65,7 @@ import { createHeaderRoute, createRedirectRoute } from './server-route-utils'
 import { PrerenderManifest } from '../build'
 import { ImageConfigComplete } from '../shared/lib/image-config'
 import { replaceBasePath } from './router-utils'
-import { normalizeViewPath } from '../shared/lib/router/utils/view-paths'
+import { normalizeAppPath } from '../shared/lib/router/utils/app-paths'
 import { getRouteMatcher } from '../shared/lib/router/utils/route-matcher'
 import { getRouteRegex } from '../shared/lib/router/utils/route-regex'
 
@@ -139,7 +139,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
   protected publicDir: string
   protected hasStaticDir: boolean
   protected pagesManifest?: PagesManifest
-  protected viewPathsManifest?: PagesManifest
+  protected appPathsManifest?: PagesManifest
   protected buildId: string
   protected minimalMode: boolean
   protected renderOpts: {
@@ -179,7 +179,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
   private responseCache: ResponseCache
   protected router: Router
   protected dynamicRoutes?: DynamicRoutes
-  protected viewPathRoutes?: Record<string, string>
+  protected appPathRoutes?: Record<string, string>
   protected customRoutes: CustomRoutes
   protected serverComponentManifest?: any
   public readonly hostname?: string
@@ -188,7 +188,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
   protected abstract getPublicDir(): string
   protected abstract getHasStaticDir(): boolean
   protected abstract getPagesManifest(): PagesManifest | undefined
-  protected abstract getViewPathsManifest(): PagesManifest | undefined
+  protected abstract getAppPathsManifest(): PagesManifest | undefined
   protected abstract getBuildId(): string
   protected abstract generatePublicRoutes(): Route[]
   protected abstract generateImageRoutes(): Route[]
@@ -338,7 +338,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     })
 
     this.pagesManifest = this.getPagesManifest()
-    this.viewPathsManifest = this.getViewPathsManifest()
+    this.appPathsManifest = this.getAppPathsManifest()
 
     this.customRoutes = this.getCustomRoutes()
     this.router = new Router(this.generateRoutes())
@@ -851,7 +851,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     const { useFileSystemPublicRoutes } = this.nextConfig
 
     if (useFileSystemPublicRoutes) {
-      this.viewPathRoutes = this.getViewPathRoutes()
+      this.appPathRoutes = this.getappPathRoutes()
       this.dynamicRoutes = this.getDynamicRoutes()
     }
 
@@ -943,7 +943,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
 
     return getSortedRoutes(
       [
-        ...Object.keys(this.viewPathRoutes || {}),
+        ...Object.keys(this.appPathRoutes || {}),
         ...Object.keys(this.pagesManifest!),
       ].map(
         (page) =>
@@ -961,20 +961,20 @@ export default abstract class Server<ServerOptions extends Options = Options> {
       .filter((item): item is RoutingItem => Boolean(item))
   }
 
-  protected getViewPathRoutes(): Record<string, string> {
-    const viewPathRoutes: Record<string, string> = {}
+  protected getappPathRoutes(): Record<string, string> {
+    const appPathRoutes: Record<string, string> = {}
 
-    Object.keys(this.viewPathsManifest || {}).forEach((entry) => {
-      viewPathRoutes[normalizeViewPath(entry)] = entry
+    Object.keys(this.appPathsManifest || {}).forEach((entry) => {
+      appPathRoutes[normalizeAppPath(entry)] = entry
     })
-    return viewPathRoutes
+    return appPathRoutes
   }
 
-  protected getViewPathLayouts(pathname: string): string[] {
+  protected getappPathLayouts(pathname: string): string[] {
     const layoutPaths: string[] = []
 
-    if (this.viewPathRoutes) {
-      const paths = Object.values(this.viewPathRoutes)
+    if (this.appPathRoutes) {
+      const paths = Object.values(this.appPathRoutes)
       const parts = pathname.split('/').filter(Boolean)
 
       for (let i = 1; i < parts.length; i++) {
@@ -985,7 +985,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
         }
       }
 
-      if (this.viewPathRoutes['/layout']) {
+      if (this.appPathRoutes['/layout']) {
         layoutPaths.unshift('/layout')
       }
     }
@@ -1705,17 +1705,17 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     delete query._nextBubbleNoFallback
     // map the route to the actual bundle name e.g.
     // `/dashboard/rootonly/hello` -> `/dashboard+rootonly/hello`
-    const getOriginalViewPath = (viewPath: string) => {
-      if (this.nextConfig.experimental.viewsDir) {
-        const originalViewPath =
-          this.viewPathRoutes?.[`${viewPath}/index`] ||
-          this.viewPathRoutes?.[`${viewPath}`]
+    const getOriginalappPath = (appPath: string) => {
+      if (this.nextConfig.experimental.appDir) {
+        const originalappPath =
+          this.appPathRoutes?.[`${appPath}/index`] ||
+          this.appPathRoutes?.[`${appPath}`]
 
-        if (!originalViewPath) {
+        if (!originalappPath) {
           return null
         }
 
-        return originalViewPath
+        return originalappPath
       }
       return null
     }
@@ -1724,10 +1724,10 @@ export default abstract class Server<ServerOptions extends Options = Options> {
       // Ensure a request to the URL /accounts/[id] will be treated as a dynamic
       // route correctly and not loaded immediately without parsing params.
       if (!isDynamicRoute(pathname)) {
-        const viewPath = getOriginalViewPath(pathname)
+        const appPath = getOriginalappPath(pathname)
 
-        if (typeof viewPath === 'string') {
-          page = viewPath
+        if (typeof appPath === 'string') {
+          page = appPath
         }
         const result = await this.findPageComponents(page, query)
         if (result) {
@@ -1750,10 +1750,10 @@ export default abstract class Server<ServerOptions extends Options = Options> {
             continue
           }
           page = dynamicRoute.page
-          const viewPath = getOriginalViewPath(page)
+          const appPath = getOriginalappPath(page)
 
-          if (typeof viewPath === 'string') {
-            page = viewPath
+          if (typeof appPath === 'string') {
+            page = appPath
           }
 
           const dynamicRouteResult = await this.findPageComponents(
diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts
index 5c356436419d9..03d23c52c6755 100644
--- a/packages/next/server/config-shared.ts
+++ b/packages/next/server/config-shared.ts
@@ -99,7 +99,7 @@ export interface ExperimentalConfig {
   scrollRestoration?: boolean
   externalDir?: boolean
   conformance?: boolean
-  viewsDir?: boolean
+  appDir?: boolean
   amp?: {
     optimizer?: any
     validator?: string
@@ -501,7 +501,7 @@ export const defaultConfig: NextConfig = {
     swcFileReading: true,
     craCompat: false,
     esmExternals: true,
-    viewsDir: false,
+    appDir: false,
     // default to 50MB limit
     isrMemoryCacheSize: 50 * 1024 * 1024,
     serverComponents: false,
diff --git a/packages/next/server/dev/hot-reloader.ts b/packages/next/server/dev/hot-reloader.ts
index d98a9f5640ed3..183b612a48448 100644
--- a/packages/next/server/dev/hot-reloader.ts
+++ b/packages/next/server/dev/hot-reloader.ts
@@ -11,7 +11,7 @@ import {
   finalizeEntrypoint,
   getClientEntry,
   getEdgeServerEntry,
-  getViewsEntry,
+  getAppEntry,
   runDependingOnPageType,
 } from '../../build/entries'
 import { watchCompilers } from '../../build/output'
@@ -19,7 +19,7 @@ import getBaseWebpackConfig from '../../build/webpack-config'
 import {
   API_ROUTE,
   MIDDLEWARE_FILENAME,
-  VIEWS_DIR_ALIAS,
+  APP_DIR_ALIAS,
 } from '../../lib/constants'
 import { recursiveDelete } from '../../lib/recursive-delete'
 import { BLOCKED_PAGES } from '../../shared/lib/constants'
@@ -175,7 +175,7 @@ export default class HotReloader {
   private fallbackWatcher: any
   private hotReloaderSpan: Span
   private pagesMapping: { [key: string]: string } = {}
-  private viewsDir?: string
+  private appDir?: string
 
   constructor(
     dir: string,
@@ -186,7 +186,7 @@ export default class HotReloader {
       buildId,
       previewProps,
       rewrites,
-      viewsDir,
+      appDir,
     }: {
       config: NextConfigComplete
       pagesDir: string
@@ -194,14 +194,14 @@ export default class HotReloader {
       buildId: string
       previewProps: __ApiPreviewProps
       rewrites: CustomRoutes['rewrites']
-      viewsDir?: string
+      appDir?: string
     }
   ) {
     this.buildId = buildId
     this.dir = dir
     this.middlewares = []
     this.pagesDir = pagesDir
-    this.viewsDir = viewsDir
+    this.appDir = appDir
     this.distDir = distDir
     this.clientStats = null
     this.serverStats = null
@@ -437,7 +437,7 @@ export default class HotReloader {
         pagesDir: this.pagesDir,
         rewrites: this.rewrites,
         runWebpackSpan: this.hotReloaderSpan,
-        viewsDir: this.viewsDir,
+        appDir: this.appDir,
       }
 
       return webpackConfigSpan
@@ -633,14 +633,14 @@ export default class HotReloader {
                   name: bundlePath,
                   isServerComponent,
                   value:
-                    this.viewsDir && bundlePath.startsWith('views/')
-                      ? getViewsEntry({
+                    this.appDir && bundlePath.startsWith('app/')
+                      ? getAppEntry({
                           name: bundlePath,
                           pagePath: join(
-                            VIEWS_DIR_ALIAS,
-                            relative(this.viewsDir!, absolutePagePath)
+                            APP_DIR_ALIAS,
+                            relative(this.appDir!, absolutePagePath)
                           ),
-                          viewsDir: this.viewsDir!,
+                          appDir: this.appDir!,
                           pageExtensions: this.config.pageExtensions,
                         })
                       : request,
@@ -889,7 +889,7 @@ export default class HotReloader {
       multiCompiler,
       watcher: this.watcher,
       pagesDir: this.pagesDir,
-      viewsDir: this.viewsDir,
+      appDir: this.appDir,
       rootDir: this.dir,
       nextConfig: this.config,
       ...(this.config.onDemandEntries as {
diff --git a/packages/next/server/dev/next-dev-server.ts b/packages/next/server/dev/next-dev-server.ts
index ed4ab57806e2b..2df2a100fb13b 100644
--- a/packages/next/server/dev/next-dev-server.ts
+++ b/packages/next/server/dev/next-dev-server.ts
@@ -67,7 +67,7 @@ import { runDependingOnPageType } from '../../build/entries'
 import { NodeNextResponse, NodeNextRequest } from '../base-http/node'
 import { getPageStaticInfo } from '../../build/analysis/get-page-static-info'
 import { normalizePathSep } from '../../shared/lib/page-path/normalize-path-sep'
-import { normalizeViewPath } from '../../shared/lib/router/utils/view-paths'
+import { normalizeAppPath } from '../../shared/lib/router/utils/app-paths'
 import { MIDDLEWARE_FILE } from '../../lib/constants'
 
 // Load ReactDevOverlay only when needed
@@ -100,7 +100,7 @@ export default class DevServer extends Server {
   protected sortedRoutes?: string[]
   private addedUpgradeListener = false
   private pagesDir: string
-  private viewsDir?: string
+  private appDir?: string
 
   /**
    * Since the dev server is stateful and middleware routes can be added and
@@ -188,12 +188,12 @@ export default class DevServer extends Server {
 
     this.isCustomServer = !options.isNextDevCommand
     // TODO: hot-reload root/pages dirs?
-    const { pages: pagesDir, views: viewsDir } = findPagesDir(
+    const { pages: pagesDir, appDir } = findPagesDir(
       this.dir,
-      this.nextConfig.experimental.viewsDir
+      this.nextConfig.experimental.appDir
     )
     this.pagesDir = pagesDir
-    this.viewsDir = viewsDir
+    this.appDir = appDir
   }
 
   protected getBuildId(): string {
@@ -271,8 +271,8 @@ export default class DevServer extends Server {
 
       let wp = (this.webpackWatcher = new Watchpack())
       const pages = [this.pagesDir]
-      const views = this.viewsDir ? [this.viewsDir] : []
-      const directories = [...pages, ...views]
+      const app = this.appDir ? [this.appDir] : []
+      const directories = [...pages, ...app]
       const files = this.nextConfig.pageExtensions.map((extension) =>
         pathJoin(this.dir, `${MIDDLEWARE_FILENAME}.${extension}`)
       )
@@ -283,7 +283,7 @@ export default class DevServer extends Server {
         const routedMiddleware: string[] = []
         const routedPages: string[] = []
         const knownFiles = wp.getTimeInfoEntries()
-        const viewPaths: Record<string, string> = {}
+        const appPaths: Record<string, string> = {}
         const ssrMiddleware = new Set<string>()
 
         for (const [fileName, meta] of knownFiles) {
@@ -294,10 +294,10 @@ export default class DevServer extends Server {
             continue
           }
 
-          const isViewPath = Boolean(
-            this.viewsDir &&
+          const isAppPath = Boolean(
+            this.appDir &&
               normalizePathSep(fileName).startsWith(
-                normalizePathSep(this.viewsDir)
+                normalizePathSep(this.appDir)
               )
           )
 
@@ -312,16 +312,16 @@ export default class DevServer extends Server {
           }
 
           let pageName = absolutePathToPage(fileName, {
-            pagesDir: isViewPath ? this.viewsDir! : this.pagesDir,
+            pagesDir: isAppPath ? this.appDir! : this.pagesDir,
             extensions: this.nextConfig.pageExtensions,
-            keepIndex: isViewPath,
+            keepIndex: isAppPath,
           })
 
-          if (isViewPath) {
+          if (isAppPath) {
             // TODO: should only routes ending in /index.js be route-able?
             const originalPageName = pageName
-            pageName = normalizeViewPath(pageName)
-            viewPaths[pageName] = originalPageName
+            pageName = normalizeAppPath(pageName)
+            appPaths[pageName] = originalPageName
 
             if (routedPages.includes(pageName)) {
               continue
@@ -360,7 +360,7 @@ export default class DevServer extends Server {
           routedPages.push(pageName)
         }
 
-        this.viewPathRoutes = viewPaths
+        this.appPathRoutes = appPaths
         this.middleware = getSortedRoutes(routedMiddleware).map((page) => ({
           match: getRouteMatcher(
             getMiddlewareRegex(page, { catchAll: !ssrMiddleware.has(page) })
@@ -422,9 +422,10 @@ export default class DevServer extends Server {
     setGlobal('phase', PHASE_DEVELOPMENT_SERVER)
     await verifyTypeScriptSetup(
       this.dir,
-      [this.pagesDir!, this.viewsDir].filter(Boolean) as string[],
+      [this.pagesDir!, this.appDir].filter(Boolean) as string[],
       false,
-      this.nextConfig
+      this.nextConfig.typescript.tsconfigPath,
+      this.nextConfig.images.disableStaticImages
     )
 
     this.customRoutes = await loadCustomRoutes(this.nextConfig)
@@ -449,7 +450,7 @@ export default class DevServer extends Server {
       previewProps: this.getPreviewProps(),
       buildId: this.buildId,
       rewrites,
-      viewsDir: this.viewsDir,
+      appDir: this.appDir,
     })
     await super.prepare()
     await this.addExportPathMapRoutes()
@@ -515,10 +516,10 @@ export default class DevServer extends Server {
       ).then(Boolean)
     }
 
-    // check viewsDir first if enabled
-    if (this.viewsDir) {
+    // check appDir first if enabled
+    if (this.appDir) {
       const pageFile = await findPageFile(
-        this.viewsDir,
+        this.appDir,
         normalizedPath,
         this.nextConfig.pageExtensions
       )
@@ -809,7 +810,7 @@ export default class DevServer extends Server {
     return undefined
   }
 
-  protected getViewPathsManifest(): undefined {
+  protected getAppPathsManifest(): undefined {
     return undefined
   }
 
diff --git a/packages/next/server/dev/on-demand-entry-handler.ts b/packages/next/server/dev/on-demand-entry-handler.ts
index 7bc5fe00260fe..744eed02f3ece 100644
--- a/packages/next/server/dev/on-demand-entry-handler.ts
+++ b/packages/next/server/dev/on-demand-entry-handler.ts
@@ -65,7 +65,7 @@ export function onDemandEntryHandler({
   pagesBufferLength,
   pagesDir,
   rootDir,
-  viewsDir,
+  appDir,
   watcher,
 }: {
   maxInactiveAge: number
@@ -74,7 +74,7 @@ export function onDemandEntryHandler({
   pagesBufferLength: number
   pagesDir: string
   rootDir: string
-  viewsDir?: string
+  appDir?: string
   watcher: any
 }) {
   invalidator = new Invalidator(watcher)
@@ -113,7 +113,7 @@ export function onDemandEntryHandler({
       return invalidator.doneBuilding()
     }
     const [clientStats, serverStats, edgeServerStats] = multiStats.stats
-    const root = !!viewsDir
+    const root = !!appDir
     const pagePaths = [
       ...getPagePathsFromEntrypoints(
         'client',
@@ -195,7 +195,7 @@ export function onDemandEntryHandler({
         pagesDir,
         page,
         nextConfig.pageExtensions,
-        viewsDir
+        appDir
       )
 
       let entryAdded = false
@@ -366,7 +366,7 @@ async function findPagePathData(
   pagesDir: string,
   page: string,
   extensions: string[],
-  viewsDir?: string
+  appDir?: string
 ) {
   const normalizedPagePath = tryToNormalizePagePath(page)
   let pagePath: string | null = null
@@ -391,9 +391,9 @@ async function findPagePathData(
     }
   }
 
-  // Check viewsDir first falling back to pagesDir
-  if (viewsDir) {
-    pagePath = await findPageFile(viewsDir, normalizedPagePath, extensions)
+  // Check appDir first falling back to pagesDir
+  if (appDir) {
+    pagePath = await findPageFile(appDir, normalizedPagePath, extensions)
     if (pagePath) {
       const pageUrl = ensureLeadingSlash(
         removePagePathTail(normalizePathSep(pagePath), {
@@ -403,8 +403,8 @@ async function findPagePathData(
       )
 
       return {
-        absolutePagePath: join(viewsDir, pagePath),
-        bundlePath: posix.join('views', normalizePagePath(pageUrl)),
+        absolutePagePath: join(appDir, pagePath),
+        bundlePath: posix.join('app', normalizePagePath(pageUrl)),
         page: posix.normalize(pageUrl),
       }
     }
diff --git a/packages/next/server/get-route-from-entrypoint.ts b/packages/next/server/get-route-from-entrypoint.ts
index 30e40e9858a35..ebc05242f1b89 100644
--- a/packages/next/server/get-route-from-entrypoint.ts
+++ b/packages/next/server/get-route-from-entrypoint.ts
@@ -2,8 +2,8 @@ import getRouteFromAssetPath from '../shared/lib/router/utils/get-route-from-ass
 
 // matches pages/:page*.js
 const SERVER_ROUTE_NAME_REGEX = /^pages[/\\](.*)$/
-// matches root/:path*.js
-const ROOT_ROUTE_NAME_REGEX = /^views[/\\](.*)$/
+// matches app/:path*.js
+const APP_ROUTE_NAME_REGEX = /^app[/\\](.*)$/
 // matches static/pages/:page*.js
 const BROWSER_ROUTE_NAME_REGEX = /^static[/\\]pages[/\\](.*)$/
 
@@ -19,7 +19,7 @@ function matchBundle(regex: RegExp, input: string): string | null {
 
 export default function getRouteFromEntrypoint(
   entryFile: string,
-  root?: boolean
+  app?: boolean
 ): string | null {
   let pagePath = matchBundle(SERVER_ROUTE_NAME_REGEX, entryFile)
 
@@ -27,8 +27,8 @@ export default function getRouteFromEntrypoint(
     return pagePath
   }
 
-  if (root) {
-    pagePath = matchBundle(ROOT_ROUTE_NAME_REGEX, entryFile)
+  if (app) {
+    pagePath = matchBundle(APP_ROUTE_NAME_REGEX, entryFile)
     if (pagePath) return pagePath
   }
 
diff --git a/packages/next/server/load-components.ts b/packages/next/server/load-components.ts
index 7db624cfb4483..8cb00f9c9eeba 100644
--- a/packages/next/server/load-components.ts
+++ b/packages/next/server/load-components.ts
@@ -40,7 +40,7 @@ export type LoadComponentsReturnType = {
   getStaticPaths?: GetStaticPaths
   getServerSideProps?: GetServerSideProps
   ComponentMod: any
-  isViewPath?: boolean
+  isAppPath?: boolean
 }
 
 export async function loadDefaultErrorComponents(distDir: string) {
@@ -66,7 +66,7 @@ export async function loadComponents(
   pathname: string,
   serverless: boolean,
   hasServerComponents?: boolean,
-  rootEnabled?: boolean
+  appDirEnabled?: boolean
 ): Promise<LoadComponentsReturnType> {
   if (serverless) {
     const ComponentMod = await requirePage(pathname, distDir, serverless)
@@ -103,13 +103,13 @@ export async function loadComponents(
 
   const [DocumentMod, AppMod, ComponentMod] = await Promise.all([
     Promise.resolve().then(() =>
-      requirePage('/_document', distDir, serverless, rootEnabled)
+      requirePage('/_document', distDir, serverless, appDirEnabled)
     ),
     Promise.resolve().then(() =>
-      requirePage('/_app', distDir, serverless, rootEnabled)
+      requirePage('/_app', distDir, serverless, appDirEnabled)
     ),
     Promise.resolve().then(() =>
-      requirePage(pathname, distDir, serverless, rootEnabled)
+      requirePage(pathname, distDir, serverless, appDirEnabled)
     ),
   ])
 
@@ -129,7 +129,7 @@ export async function loadComponents(
         normalizePagePath(pathname) + NEXT_CLIENT_SSR_ENTRY_SUFFIX,
         distDir,
         serverless,
-        rootEnabled
+        appDirEnabled
       )
     } catch (_) {
       // This page might not be a server component page, so there is no
@@ -143,18 +143,18 @@ export async function loadComponents(
 
   const { getServerSideProps, getStaticProps, getStaticPaths } = ComponentMod
 
-  let isViewPath = false
+  let isAppPath = false
 
-  if (rootEnabled) {
+  if (appDirEnabled) {
     const pagePath = getPagePath(
       pathname,
       distDir,
       serverless,
       false,
       undefined,
-      rootEnabled
+      appDirEnabled
     )
-    isViewPath = !!pagePath?.match(/server[/\\]views[/\\]/)
+    isAppPath = !!pagePath?.match(/server[/\\]app[/\\]/)
   }
 
   return {
@@ -169,6 +169,6 @@ export async function loadComponents(
     getStaticProps,
     getStaticPaths,
     serverComponentManifest,
-    isViewPath,
+    isAppPath,
   }
 }
diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts
index 02184f2f3c923..7fea412cc50ae 100644
--- a/packages/next/server/next-server.ts
+++ b/packages/next/server/next-server.ts
@@ -30,7 +30,7 @@ import {
   ROUTES_MANIFEST,
   MIDDLEWARE_FLIGHT_MANIFEST,
   CLIENT_PUBLIC_FILES_PATH,
-  VIEW_PATHS_MANIFEST,
+  APP_PATHS_MANIFEST,
 } from '../shared/lib/constants'
 import { recursiveReadDirSync } from './lib/recursive-readdir-sync'
 import { format as formatUrl, UrlWithParsedQuery } from 'url'
@@ -45,7 +45,7 @@ import { getExtension, serveStatic } from './serve-static'
 import { ParsedUrlQuery } from 'querystring'
 import { apiResolver } from './api-utils/node'
 import { RenderOpts, renderToHTML } from './render'
-import { renderToHTML as viewRenderToHTML } from './view-render'
+import { renderToHTML as appRenderToHTML } from './app-render'
 import { ParsedUrl, parseUrl } from '../shared/lib/router/utils/parse-url'
 import * as Log from '../build/output/log'
 
@@ -167,13 +167,10 @@ export default class NextNodeServer extends BaseServer {
     return require(join(this.serverDistDir, PAGES_MANIFEST))
   }
 
-  protected getViewPathsManifest(): PagesManifest | undefined {
-    if (this.nextConfig.experimental.viewsDir) {
-      const viewPathsManifestPath = join(
-        this.serverDistDir,
-        VIEW_PATHS_MANIFEST
-      )
-      return require(viewPathsManifestPath)
+  protected getAppPathsManifest(): PagesManifest | undefined {
+    if (this.nextConfig.experimental.appDir) {
+      const appPathsManifestPath = join(this.serverDistDir, APP_PATHS_MANIFEST)
+      return require(appPathsManifestPath)
     }
   }
 
@@ -592,8 +589,8 @@ export default class NextNodeServer extends BaseServer {
     // https://github.com/vercel/next.js/blob/df7cbd904c3bd85f399d1ce90680c0ecf92d2752/packages/next/server/render.tsx#L947-L952
     renderOpts.serverComponentManifest = this.serverComponentManifest
 
-    if (renderOpts.isViewPath) {
-      return viewRenderToHTML(
+    if (renderOpts.isAppPath) {
+      return appRenderToHTML(
         req.originalRequest,
         res.originalResponse,
         pathname,
@@ -650,7 +647,7 @@ export default class NextNodeServer extends BaseServer {
       this._isLikeServerless,
       this.renderOpts.dev,
       locales,
-      this.nextConfig.experimental.viewsDir
+      this.nextConfig.experimental.appDir
     )
   }
 
@@ -681,7 +678,7 @@ export default class NextNodeServer extends BaseServer {
           pagePath!,
           !this.renderOpts.dev && this._isLikeServerless,
           this.renderOpts.serverComponents,
-          this.nextConfig.experimental.viewsDir
+          this.nextConfig.experimental.appDir
         )
 
         if (
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index f0ca6037fce78..1844a8e3e35b1 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -486,6 +486,8 @@ export async function renderToHTML(
     // @ts-ignore
     globalThis.__webpack_require__ =
       ComponentMod.__next_rsc__.__webpack_require__
+    // @ts-ignore
+    globalThis.__next_chunk_load__ = () => Promise.resolve()
 
     Component = createServerComponentRenderer(Component, {
       cachePrefix: pathname + (search ? `?${search}` : ''),
diff --git a/packages/next/server/require.ts b/packages/next/server/require.ts
index 756059105dd8f..87fcc3fd4352e 100644
--- a/packages/next/server/require.ts
+++ b/packages/next/server/require.ts
@@ -5,7 +5,7 @@ import {
   PAGES_MANIFEST,
   SERVER_DIRECTORY,
   SERVERLESS_DIRECTORY,
-  VIEW_PATHS_MANIFEST,
+  APP_PATHS_MANIFEST,
 } from '../shared/lib/constants'
 import { normalizeLocalePath } from '../shared/lib/i18n/normalize-locale-path'
 import { normalizePagePath } from '../shared/lib/page-path/normalize-page-path'
@@ -24,7 +24,7 @@ export function getPagePath(
   serverless: boolean,
   dev?: boolean,
   locales?: string[],
-  rootEnabled?: boolean
+  appDirEnabled?: boolean
 ): string {
   const serverBuildPath = join(
     distDir,
@@ -32,11 +32,11 @@ export function getPagePath(
   )
   let rootPathsManifest: undefined | PagesManifest
 
-  if (rootEnabled) {
+  if (appDirEnabled) {
     if (page === '/_root') {
       return join(serverBuildPath, 'root.js')
     }
-    rootPathsManifest = require(join(serverBuildPath, VIEW_PATHS_MANIFEST))
+    rootPathsManifest = require(join(serverBuildPath, APP_PATHS_MANIFEST))
   }
   const pagesManifest = require(join(
     serverBuildPath,
@@ -84,7 +84,7 @@ export function requirePage(
   page: string,
   distDir: string,
   serverless: boolean,
-  rootEnabled?: boolean
+  appDirEnabled?: boolean
 ): any {
   const pagePath = getPagePath(
     page,
@@ -92,7 +92,7 @@ export function requirePage(
     serverless,
     false,
     undefined,
-    rootEnabled
+    appDirEnabled
   )
   if (pagePath.endsWith('.html')) {
     return promises.readFile(pagePath, 'utf8')
diff --git a/packages/next/server/web-server.ts b/packages/next/server/web-server.ts
index 151db8e4cbd06..29eff152145e2 100644
--- a/packages/next/server/web-server.ts
+++ b/packages/next/server/web-server.ts
@@ -94,7 +94,7 @@ export default class NextWebServer extends BaseServer<WebServerOptions> {
       [this.serverOptions.webServerConfig.page]: '',
     }
   }
-  protected getViewPathsManifest() {
+  protected getAppPathsManifest() {
     return {
       [this.serverOptions.webServerConfig.page]: '',
     }
diff --git a/packages/next/shared/lib/constants.ts b/packages/next/shared/lib/constants.ts
index 13700355ac945..10aba9b23d679 100644
--- a/packages/next/shared/lib/constants.ts
+++ b/packages/next/shared/lib/constants.ts
@@ -4,7 +4,7 @@ export const PHASE_PRODUCTION_SERVER = 'phase-production-server'
 export const PHASE_DEVELOPMENT_SERVER = 'phase-development-server'
 export const PHASE_TEST = 'phase-test'
 export const PAGES_MANIFEST = 'pages-manifest.json'
-export const VIEW_PATHS_MANIFEST = 'view-paths-manifest.json'
+export const APP_PATHS_MANIFEST = 'app-paths-manifest.json'
 export const BUILD_MANIFEST = 'build-manifest.json'
 export const EXPORT_MARKER = 'export-marker.json'
 export const EXPORT_DETAIL = 'export-detail.json'
diff --git a/packages/next/shared/lib/router/utils/view-paths.ts b/packages/next/shared/lib/router/utils/app-paths.ts
similarity index 88%
rename from packages/next/shared/lib/router/utils/view-paths.ts
rename to packages/next/shared/lib/router/utils/app-paths.ts
index f34eb96c3bf1d..56edad8f58d7b 100644
--- a/packages/next/shared/lib/router/utils/view-paths.ts
+++ b/packages/next/shared/lib/router/utils/app-paths.ts
@@ -1,5 +1,5 @@
 // remove (name) from pathname as it's not considered for routing
-export function normalizeViewPath(pathname: string) {
+export function normalizeAppPath(pathname: string) {
   let normalized = ''
   const segments = pathname.split('/')
 
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
index 6d3f1d80911dd..621fd6e0fdee4 100644
--- a/packages/next/taskfile.js
+++ b/packages/next/taskfile.js
@@ -1274,7 +1274,6 @@ export async function copy_react_server_dom_webpack(task, opts) {
   await task
     .source(require.resolve('react-server-dom-webpack'))
     .target('compiled/react-server-dom-webpack')
-
   await task
     .source(
       join(
@@ -1282,6 +1281,15 @@ export async function copy_react_server_dom_webpack(task, opts) {
         'cjs/react-server-dom-webpack.*'
       )
     )
+    // eslint-disable-next-line require-yield
+    .run({ every: true }, function* (file) {
+      const source = file.data.toString()
+      // We replace the chunk loading code with our own implementaion in Next.js.
+      file.data = source.replace(
+        /__webpack_chunk_load__/g,
+        'globalThis.__next_chunk_load__'
+      )
+    })
     .target('compiled/react-server-dom-webpack/cjs')
 
   await task
diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
index a3a2a402d8954..9983451ae797e 100644
--- a/packages/react-dev-overlay/package.json
+++ b/packages/react-dev-overlay/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",
diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json
index b6622fddd5a99..33b531c7312fd 100644
--- a/packages/react-refresh-utils/package.json
+++ b/packages/react-refresh-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "12.1.7-canary.11",
+  "version": "12.1.7-canary.16",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",
diff --git a/run-tests.js b/run-tests.js
index 91c71814179ba..8e9d698b53d64 100644
--- a/run-tests.js
+++ b/run-tests.js
@@ -210,7 +210,10 @@ async function main() {
     )
   })
 
-  if ((testType && testType !== 'unit') || hasIsolatedTests) {
+  if (
+    process.env.NEXT_TEST_MODE !== 'deploy' &&
+    ((testType && testType !== 'unit') || hasIsolatedTests)
+  ) {
     // for isolated next tests: e2e, dev, prod we create
     // a starter Next.js install to re-use to speed up tests
     // to avoid having to run yarn each time
diff --git a/test/e2e/views-dir/app-rendering/views/getserversideprops-only/layout.server.js b/test/e2e/app-dir/app-rendering/app/getserversideprops-only/layout.server.js
similarity index 100%
rename from test/e2e/views-dir/app-rendering/views/getserversideprops-only/layout.server.js
rename to test/e2e/app-dir/app-rendering/app/getserversideprops-only/layout.server.js
diff --git a/test/e2e/views-dir/app-rendering/views/getserversideprops-only/nested/page.server.js b/test/e2e/app-dir/app-rendering/app/getserversideprops-only/nested/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app-rendering/views/getserversideprops-only/nested/page.server.js
rename to test/e2e/app-dir/app-rendering/app/getserversideprops-only/nested/page.server.js
diff --git a/test/e2e/views-dir/app-rendering/views/getserversideprops-only/slow/index/page.server.js b/test/e2e/app-dir/app-rendering/app/getserversideprops-only/slow/index/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app-rendering/views/getserversideprops-only/slow/index/page.server.js
rename to test/e2e/app-dir/app-rendering/app/getserversideprops-only/slow/index/page.server.js
diff --git a/test/e2e/views-dir/app-rendering/views/getserversideprops-only/slow/layout.server.js b/test/e2e/app-dir/app-rendering/app/getserversideprops-only/slow/layout.server.js
similarity index 100%
rename from test/e2e/views-dir/app-rendering/views/getserversideprops-only/slow/layout.server.js
rename to test/e2e/app-dir/app-rendering/app/getserversideprops-only/slow/layout.server.js
diff --git a/test/e2e/views-dir/app-rendering/views/getstaticprops-getserversideprops-combined/nested/index/page.server.js b/test/e2e/app-dir/app-rendering/app/getstaticprops-getserversideprops-combined/nested/index/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app-rendering/views/getstaticprops-getserversideprops-combined/nested/index/page.server.js
rename to test/e2e/app-dir/app-rendering/app/getstaticprops-getserversideprops-combined/nested/index/page.server.js
diff --git a/test/e2e/views-dir/app-rendering/views/getstaticprops-getserversideprops-combined/nested/layout.server.js b/test/e2e/app-dir/app-rendering/app/getstaticprops-getserversideprops-combined/nested/layout.server.js
similarity index 100%
rename from test/e2e/views-dir/app-rendering/views/getstaticprops-getserversideprops-combined/nested/layout.server.js
rename to test/e2e/app-dir/app-rendering/app/getstaticprops-getserversideprops-combined/nested/layout.server.js
diff --git a/test/e2e/views-dir/app-rendering/views/getstaticprops-getserversideprops-combined/slow/index/page.server.js b/test/e2e/app-dir/app-rendering/app/getstaticprops-getserversideprops-combined/slow/index/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app-rendering/views/getstaticprops-getserversideprops-combined/slow/index/page.server.js
rename to test/e2e/app-dir/app-rendering/app/getstaticprops-getserversideprops-combined/slow/index/page.server.js
diff --git a/test/e2e/views-dir/app-rendering/views/getstaticprops-getserversideprops-combined/slow/layout.server.js b/test/e2e/app-dir/app-rendering/app/getstaticprops-getserversideprops-combined/slow/layout.server.js
similarity index 100%
rename from test/e2e/views-dir/app-rendering/views/getstaticprops-getserversideprops-combined/slow/layout.server.js
rename to test/e2e/app-dir/app-rendering/app/getstaticprops-getserversideprops-combined/slow/layout.server.js
diff --git a/test/e2e/views-dir/app-rendering/views/getstaticprops-isr-multiple/layout.server.js b/test/e2e/app-dir/app-rendering/app/getstaticprops-isr-multiple/layout.server.js
similarity index 100%
rename from test/e2e/views-dir/app-rendering/views/getstaticprops-isr-multiple/layout.server.js
rename to test/e2e/app-dir/app-rendering/app/getstaticprops-isr-multiple/layout.server.js
diff --git a/test/e2e/views-dir/app-rendering/views/getstaticprops-isr-multiple/nested/page.server.js b/test/e2e/app-dir/app-rendering/app/getstaticprops-isr-multiple/nested/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app-rendering/views/getstaticprops-isr-multiple/nested/page.server.js
rename to test/e2e/app-dir/app-rendering/app/getstaticprops-isr-multiple/nested/page.server.js
diff --git a/test/e2e/views-dir/app-rendering/views/getstaticprops-only/layout.server.js b/test/e2e/app-dir/app-rendering/app/getstaticprops-only/layout.server.js
similarity index 100%
rename from test/e2e/views-dir/app-rendering/views/getstaticprops-only/layout.server.js
rename to test/e2e/app-dir/app-rendering/app/getstaticprops-only/layout.server.js
diff --git a/test/e2e/views-dir/app-rendering/views/getstaticprops-only/nested/page.server.js b/test/e2e/app-dir/app-rendering/app/getstaticprops-only/nested/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app-rendering/views/getstaticprops-only/nested/page.server.js
rename to test/e2e/app-dir/app-rendering/app/getstaticprops-only/nested/page.server.js
diff --git a/test/e2e/views-dir/app-rendering/views/getstaticprops-only/slow/index/page.server.js b/test/e2e/app-dir/app-rendering/app/getstaticprops-only/slow/index/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app-rendering/views/getstaticprops-only/slow/index/page.server.js
rename to test/e2e/app-dir/app-rendering/app/getstaticprops-only/slow/index/page.server.js
diff --git a/test/e2e/views-dir/app-rendering/views/getstaticprops-only/slow/layout.server.js b/test/e2e/app-dir/app-rendering/app/getstaticprops-only/slow/layout.server.js
similarity index 100%
rename from test/e2e/views-dir/app-rendering/views/getstaticprops-only/slow/layout.server.js
rename to test/e2e/app-dir/app-rendering/app/getstaticprops-only/slow/layout.server.js
diff --git a/test/e2e/views-dir/app-rendering/next.config.js b/test/e2e/app-dir/app-rendering/next.config.js
similarity index 85%
rename from test/e2e/views-dir/app-rendering/next.config.js
rename to test/e2e/app-dir/app-rendering/next.config.js
index 4131d5b608757..931d58c1b7d7e 100644
--- a/test/e2e/views-dir/app-rendering/next.config.js
+++ b/test/e2e/app-dir/app-rendering/next.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   experimental: {
-    viewsDir: true,
+    appDir: true,
     runtime: 'nodejs',
     reactRoot: true,
     serverComponents: true,
diff --git a/test/e2e/views-dir/app-rendering/pages/.gitkeep b/test/e2e/app-dir/app-rendering/pages/.gitkeep
similarity index 100%
rename from test/e2e/views-dir/app-rendering/pages/.gitkeep
rename to test/e2e/app-dir/app-rendering/pages/.gitkeep
diff --git a/test/e2e/views-dir/app/views/(newroot)/dashboard/another/page.server.js b/test/e2e/app-dir/app/app/(newroot)/dashboard/another/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/(newroot)/dashboard/another/page.server.js
rename to test/e2e/app-dir/app/app/(newroot)/dashboard/another/page.server.js
diff --git a/test/e2e/views-dir/app/views/(newroot)/layout.server.js b/test/e2e/app-dir/app/app/(newroot)/layout.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/(newroot)/layout.server.js
rename to test/e2e/app-dir/app/app/(newroot)/layout.server.js
diff --git a/test/e2e/views-dir/app/views/(rootonly)/dashboard/changelog/page.server.js b/test/e2e/app-dir/app/app/(rootonly)/dashboard/changelog/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/(rootonly)/dashboard/changelog/page.server.js
rename to test/e2e/app-dir/app/app/(rootonly)/dashboard/changelog/page.server.js
diff --git a/test/e2e/views-dir/app/views/(rootonly)/dashboard/hello/page.server.js b/test/e2e/app-dir/app/app/(rootonly)/dashboard/hello/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/(rootonly)/dashboard/hello/page.server.js
rename to test/e2e/app-dir/app/app/(rootonly)/dashboard/hello/page.server.js
diff --git a/test/e2e/views-dir/app/views/client-component-route/page.client.js b/test/e2e/app-dir/app/app/client-component-route/page.client.js
similarity index 99%
rename from test/e2e/views-dir/app/views/client-component-route/page.client.js
rename to test/e2e/app-dir/app/app/client-component-route/page.client.js
index 64b3f98c1f12b..2d1870bdc396d 100644
--- a/test/e2e/views-dir/app/views/client-component-route/page.client.js
+++ b/test/e2e/app-dir/app/app/client-component-route/page.client.js
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react'
+
 export default function ClientComponentRoute() {
   const [count, setCount] = useState(0)
   useEffect(() => {
diff --git a/test/e2e/views-dir/app/views/client-nested/index/page.server.js b/test/e2e/app-dir/app/app/client-nested/index/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/client-nested/index/page.server.js
rename to test/e2e/app-dir/app/app/client-nested/index/page.server.js
diff --git a/test/e2e/views-dir/app/views/client-nested/layout.client.js b/test/e2e/app-dir/app/app/client-nested/layout.client.js
similarity index 100%
rename from test/e2e/views-dir/app/views/client-nested/layout.client.js
rename to test/e2e/app-dir/app/app/client-nested/layout.client.js
diff --git a/test/e2e/views-dir/app/views/dashboard/(custom)/deployments/breakdown/page.server.js b/test/e2e/app-dir/app/app/dashboard/(custom)/deployments/breakdown/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/dashboard/(custom)/deployments/breakdown/page.server.js
rename to test/e2e/app-dir/app/app/dashboard/(custom)/deployments/breakdown/page.server.js
diff --git a/test/e2e/views-dir/app/views/dashboard/(custom)/layout.server.js b/test/e2e/app-dir/app/app/dashboard/(custom)/layout.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/dashboard/(custom)/layout.server.js
rename to test/e2e/app-dir/app/app/dashboard/(custom)/layout.server.js
diff --git a/test/e2e/views-dir/app/views/dashboard/deployments/[id]/page.server.js b/test/e2e/app-dir/app/app/dashboard/deployments/[id]/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/dashboard/deployments/[id]/page.server.js
rename to test/e2e/app-dir/app/app/dashboard/deployments/[id]/page.server.js
diff --git a/test/e2e/views-dir/app/views/dashboard/deployments/info/page.server.js b/test/e2e/app-dir/app/app/dashboard/deployments/info/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/dashboard/deployments/info/page.server.js
rename to test/e2e/app-dir/app/app/dashboard/deployments/info/page.server.js
diff --git a/test/e2e/views-dir/app/views/dashboard/deployments/layout.server.js b/test/e2e/app-dir/app/app/dashboard/deployments/layout.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/dashboard/deployments/layout.server.js
rename to test/e2e/app-dir/app/app/dashboard/deployments/layout.server.js
diff --git a/test/e2e/views-dir/app/views/dashboard/index/page.server.js b/test/e2e/app-dir/app/app/dashboard/index/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/dashboard/index/page.server.js
rename to test/e2e/app-dir/app/app/dashboard/index/page.server.js
diff --git a/test/e2e/views-dir/app/views/dashboard/integrations/index/page.server.js b/test/e2e/app-dir/app/app/dashboard/integrations/index/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/dashboard/integrations/index/page.server.js
rename to test/e2e/app-dir/app/app/dashboard/integrations/index/page.server.js
diff --git a/test/e2e/views-dir/app/views/dashboard/layout.server.js b/test/e2e/app-dir/app/app/dashboard/layout.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/dashboard/layout.server.js
rename to test/e2e/app-dir/app/app/dashboard/layout.server.js
diff --git a/test/e2e/views-dir/app/views/layout.server.js b/test/e2e/app-dir/app/app/layout.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/layout.server.js
rename to test/e2e/app-dir/app/app/layout.server.js
diff --git a/test/e2e/views-dir/app/views/partial-match-[id]/page.server.js b/test/e2e/app-dir/app/app/partial-match-[id]/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/partial-match-[id]/page.server.js
rename to test/e2e/app-dir/app/app/partial-match-[id]/page.server.js
diff --git a/test/e2e/views-dir/app/views/shared-component-route/page.js b/test/e2e/app-dir/app/app/shared-component-route/page.js
similarity index 100%
rename from test/e2e/views-dir/app/views/shared-component-route/page.js
rename to test/e2e/app-dir/app/app/shared-component-route/page.js
diff --git a/test/e2e/views-dir/app/views/should-not-serve-client/page.client.js b/test/e2e/app-dir/app/app/should-not-serve-client/page.client.js
similarity index 100%
rename from test/e2e/views-dir/app/views/should-not-serve-client/page.client.js
rename to test/e2e/app-dir/app/app/should-not-serve-client/page.client.js
diff --git a/test/e2e/views-dir/app/views/should-not-serve-server/page.server.js b/test/e2e/app-dir/app/app/should-not-serve-server/page.server.js
similarity index 100%
rename from test/e2e/views-dir/app/views/should-not-serve-server/page.server.js
rename to test/e2e/app-dir/app/app/should-not-serve-server/page.server.js
diff --git a/test/e2e/views-dir/app/next.config.js b/test/e2e/app-dir/app/next.config.js
similarity index 85%
rename from test/e2e/views-dir/app/next.config.js
rename to test/e2e/app-dir/app/next.config.js
index 4131d5b608757..931d58c1b7d7e 100644
--- a/test/e2e/views-dir/app/next.config.js
+++ b/test/e2e/app-dir/app/next.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   experimental: {
-    viewsDir: true,
+    appDir: true,
     runtime: 'nodejs',
     reactRoot: true,
     serverComponents: true,
diff --git a/test/e2e/views-dir/app/pages/blog/[slug].js b/test/e2e/app-dir/app/pages/blog/[slug].js
similarity index 100%
rename from test/e2e/views-dir/app/pages/blog/[slug].js
rename to test/e2e/app-dir/app/pages/blog/[slug].js
diff --git a/test/e2e/views-dir/app/pages/index.js b/test/e2e/app-dir/app/pages/index.js
similarity index 100%
rename from test/e2e/views-dir/app/pages/index.js
rename to test/e2e/app-dir/app/pages/index.js
diff --git a/test/e2e/views-dir/app/public/hello.txt b/test/e2e/app-dir/app/public/hello.txt
similarity index 100%
rename from test/e2e/views-dir/app/public/hello.txt
rename to test/e2e/app-dir/app/public/hello.txt
diff --git a/test/e2e/views-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
similarity index 96%
rename from test/e2e/views-dir/index.test.ts
rename to test/e2e/app-dir/index.test.ts
index bb33ccb8fd36f..ea3c668d11bf3 100644
--- a/test/e2e/views-dir/index.test.ts
+++ b/test/e2e/app-dir/index.test.ts
@@ -22,7 +22,7 @@ describe('views dir', () => {
       files: {
         public: new FileRef(path.join(__dirname, 'app/public')),
         pages: new FileRef(path.join(__dirname, 'app/pages')),
-        views: new FileRef(path.join(__dirname, 'app/views')),
+        app: new FileRef(path.join(__dirname, 'app/app')),
         'next.config.js': new FileRef(
           path.join(__dirname, 'app/next.config.js')
         ),
@@ -240,9 +240,9 @@ describe('views dir', () => {
         )
       })
 
-      // TODO: Implement hydration
-      it.skip('should serve client-side', async () => {
+      it('should serve client-side', async () => {
         const browser = await webdriver(next.url, '/client-component-route')
+
         // After hydration count should be 1
         expect(await browser.elementByCss('p').text()).toBe(
           'hello from root/client-component-route. count: 1'
@@ -260,15 +260,16 @@ describe('views dir', () => {
         expect($('p').text()).toBe('hello from root/client-nested')
       })
 
-      // TODO: Implement hydration
-      it.skip('should include it client-side', async () => {
+      it('should include it client-side', async () => {
         const browser = await webdriver(next.url, '/client-nested')
+
         // After hydration count should be 1
         expect(await browser.elementByCss('h1').text()).toBe(
-          'Client Nested. Count: 0'
+          'Client Nested. Count: 1'
         )
+
         // After hydration count should be 1
-        expect(await browser.elementByCss('h1').text()).toBe(
+        expect(await browser.elementByCss('p').text()).toBe(
           'hello from root/client-nested'
         )
       })
diff --git a/test/e2e/views-dir/rendering.test.ts b/test/e2e/app-dir/rendering.test.ts
similarity index 96%
rename from test/e2e/views-dir/rendering.test.ts
rename to test/e2e/app-dir/rendering.test.ts
index ab8811e7d3183..e6723a49b32b1 100644
--- a/test/e2e/views-dir/rendering.test.ts
+++ b/test/e2e/app-dir/rendering.test.ts
@@ -10,13 +10,18 @@ describe('views dir rendering', () => {
     return
   }
 
+  if ((global as any).isNextDeploy) {
+    it('should skip next deploy for now', () => {})
+    return
+  }
+
   const isDev = (global as any).isDev
   let next: NextInstance
 
   beforeAll(async () => {
     next = await createNext({
       files: {
-        views: new FileRef(path.join(__dirname, 'app-rendering/views')),
+        app: new FileRef(path.join(__dirname, 'app-rendering/app')),
         pages: new FileRef(path.join(__dirname, 'app-rendering/pages')),
         'next.config.js': new FileRef(
           path.join(__dirname, 'app-rendering/next.config.js')
diff --git a/test/e2e/i18n-data-fetching-redirect/index.test.ts b/test/e2e/i18n-data-fetching-redirect/index.test.ts
index 9871c017616e6..bcd1cb40fc3a0 100644
--- a/test/e2e/i18n-data-fetching-redirect/index.test.ts
+++ b/test/e2e/i18n-data-fetching-redirect/index.test.ts
@@ -7,6 +7,12 @@ import webdriver from 'next-webdriver'
 describe('i18n-data-fetching-redirect', () => {
   let next: NextInstance
 
+  // TODO: investigate tests failures on deploy
+  if ((global as any).isNextDeploy) {
+    it('should skip temporarily', () => {})
+    return
+  }
+
   beforeAll(async () => {
     next = await createNext({
       files: {
diff --git a/test/e2e/reload-scroll-backforward-restoration/index.test.ts b/test/e2e/reload-scroll-backforward-restoration/index.test.ts
index 68ad016728400..4a32132fd52bc 100644
--- a/test/e2e/reload-scroll-backforward-restoration/index.test.ts
+++ b/test/e2e/reload-scroll-backforward-restoration/index.test.ts
@@ -68,6 +68,11 @@ describe('reload-scroll-back-restoration', () => {
 
     await browser.refresh()
 
+    await check(async () => {
+      const isReady = await browser.eval('next.router.isReady')
+      return isReady ? 'success' : isReady
+    }, 'success')
+
     // check restore value on history index: 0
     await browser.back()
     await check(
@@ -144,6 +149,11 @@ describe('reload-scroll-back-restoration', () => {
 
     await browser.refresh()
 
+    await check(async () => {
+      const isReady = await browser.eval('next.router.isReady')
+      return isReady ? 'success' : isReady
+    }, 'success')
+
     // check restore value on history index: 2
     await browser.forward()
     await check(
diff --git a/test/integration/typescript/test/index.test.js b/test/integration/typescript/test/index.test.js
index 46abf9f64059f..c9ba200286d81 100644
--- a/test/integration/typescript/test/index.test.js
+++ b/test/integration/typescript/test/index.test.js
@@ -108,6 +108,29 @@ export default function EvilPage(): JSX.Element {
     expect(output.code).toBe(0)
   })
 
+  it('should build the app with functions in next.config.js', async () => {
+    const nextConfig = new File(join(appDir, 'next.config.js'))
+
+    nextConfig.write(`
+    module.exports = {
+      webpack(config) { return config },
+      onDemandEntries: {
+        // Make sure entries are not getting disposed.
+        maxInactiveAge: 1000 * 60 * 60,
+      },
+    }
+    `)
+
+    try {
+      const output = await nextBuild(appDir, [], { stdout: true })
+
+      expect(output.stdout).toMatch(/Compiled successfully/)
+      expect(output.code).toBe(0)
+    } finally {
+      nextConfig.restore()
+    }
+  })
+
   it('should not inform when using default tsconfig path', async () => {
     const output = await nextBuild(appDir, [], { stdout: true })
     expect(output.stdout).not.toMatch(/Using tsconfig file:/)
diff --git a/test/lib/e2e-utils.ts b/test/lib/e2e-utils.ts
index c483b411b4760..d5ce7f1839736 100644
--- a/test/lib/e2e-utils.ts
+++ b/test/lib/e2e-utils.ts
@@ -46,7 +46,9 @@ if (testModeFromFile === 'e2e') {
   const validE2EModes = ['dev', 'start', 'deploy']
 
   if (!process.env.NEXT_TEST_JOB && !testMode) {
-    console.warn('Warn: no NEXT_TEST_MODE set, using default of start')
+    require('console').warn(
+      'Warn: no NEXT_TEST_MODE set, using default of start'
+    )
     testMode = 'start'
   }
   assert(
@@ -74,7 +76,9 @@ if (!testMode) {
     `No 'NEXT_TEST_MODE' set in environment, this is required for e2e-utils`
   )
 }
-console.log(`Using test mode: ${testMode} in test folder ${testModeFromFile}`)
+require('console').warn(
+  `Using test mode: ${testMode} in test folder ${testModeFromFile}`
+)
 
 /**
  * FileRef is wrapper around a file path that is meant be copied
diff --git a/test/lib/next-modes/base.ts b/test/lib/next-modes/base.ts
index d8c934102ecfa..560db0e5aef78 100644
--- a/test/lib/next-modes/base.ts
+++ b/test/lib/next-modes/base.ts
@@ -77,7 +77,7 @@ export class NextInstance {
     if (this.isDestroyed) {
       throw new Error('next instance already destroyed')
     }
-    console.log(`Creating test directory with isolated next...`)
+    require('console').log(`Creating test directory with isolated next...`)
 
     const skipIsolatedNext = !!process.env.NEXT_SKIP_ISOLATE
     const tmpDir = skipIsolatedNext
@@ -129,7 +129,8 @@ export class NextInstance {
         process.env.NEXT_TEST_STARTER &&
         !this.dependencies &&
         !this.installCommand &&
-        !this.packageJson
+        !this.packageJson &&
+        !(global as any).isNextDeploy
       ) {
         await fs.copy(process.env.NEXT_TEST_STARTER, this.testDir)
       } else if (!skipIsolatedNext) {
@@ -140,7 +141,7 @@ export class NextInstance {
           this.packageLockPath
         )
       }
-      console.log('created next.js install, writing test files')
+      require('console').log('created next.js install, writing test files')
     }
 
     for (const filename of Object.keys(this.files)) {
@@ -218,7 +219,7 @@ export class NextInstance {
         `
       )
     }
-    console.log(`Test directory created at ${this.testDir}`)
+    require('console').log(`Test directory created at ${this.testDir}`)
   }
 
   public async clean() {
@@ -252,7 +253,7 @@ export class NextInstance {
       await new Promise<void>((resolve) => {
         treeKill(this.childProcess.pid, 'SIGKILL', (err) => {
           if (err) {
-            console.error('tree-kill', err)
+            require('console').error('tree-kill', err)
           }
           resolve()
         })
@@ -260,7 +261,7 @@ export class NextInstance {
       this.childProcess.kill('SIGKILL')
       await exitPromise
       this.childProcess = undefined
-      console.log(`Stopped next server`)
+      require('console').log(`Stopped next server`)
     }
   }
 
@@ -294,7 +295,7 @@ export class NextInstance {
     if (!process.env.NEXT_TEST_SKIP_CLEANUP) {
       await fs.remove(this.testDir)
     }
-    console.log(`destroyed next instance`)
+    require('console').log(`destroyed next instance`)
   }
 
   public get url() {
diff --git a/test/lib/next-modes/next-deploy.ts b/test/lib/next-modes/next-deploy.ts
index 84ee47d0f1edd..6b81ad0ed4d0c 100644
--- a/test/lib/next-modes/next-deploy.ts
+++ b/test/lib/next-modes/next-deploy.ts
@@ -1,4 +1,7 @@
+import os from 'os'
+import path from 'path'
 import execa from 'execa'
+import fs from 'fs-extra'
 import { NextInstance } from './base'
 import {
   TEST_PROJECT_NAME,
@@ -23,16 +26,27 @@ export class NextDeployInstance extends NextInstance {
     // ensure Vercel CLI is installed
     try {
       const res = await execa('vercel', ['--version'])
-      console.log(`Using Vercel CLI version:`, res.stdout)
+      require('console').log(`Using Vercel CLI version:`, res.stdout)
     } catch (_) {
-      console.log(`Installing Vercel CLI`)
+      require('console').log(`Installing Vercel CLI`)
       await execa('npm', ['i', '-g', 'vercel@latest'], {
         stdio: 'inherit',
       })
     }
     const vercelFlags = ['--scope', TEST_TEAM_NAME]
     const vercelEnv = { ...process.env, TOKEN: TEST_TOKEN }
-    console.log(`Linking project at ${this.testDir}`)
+
+    // create auth file in CI
+    if (process.env.NEXT_TEST_JOB) {
+      const vcConfigDir = path.join(os.homedir(), '.vercel')
+      await fs.ensureDir(vcConfigDir)
+      await fs.writeFile(
+        path.join(vcConfigDir, 'auth.json'),
+        JSON.stringify({ token: TEST_TOKEN })
+      )
+      vercelFlags.push('--global-config', vcConfigDir)
+    }
+    require('console').log(`Linking project at ${this.testDir}`)
 
     // link the project
     const linkRes = await execa(
@@ -49,7 +63,7 @@ export class NextDeployInstance extends NextInstance {
         `Failed to link project ${linkRes.stdout} ${linkRes.stderr} (${linkRes.exitCode})`
       )
     }
-    console.log(`Deploying project at ${this.testDir}`)
+    require('console').log(`Deploying project at ${this.testDir}`)
 
     const deployRes = await execa(
       'vercel',
@@ -79,7 +93,7 @@ export class NextDeployInstance extends NextInstance {
     this._url = deployRes.stdout
     this._parsedUrl = new URL(this._url)
 
-    console.log(`Deployment URL: ${this._url}`)
+    require('console').log(`Deployment URL: ${this._url}`)
     const buildIdUrl = `${this._url}${
       this.basePath || ''
     }/_next/static/__BUILD_ID`
@@ -87,13 +101,13 @@ export class NextDeployInstance extends NextInstance {
     const buildIdRes = await fetch(buildIdUrl)
 
     if (!buildIdRes.ok) {
-      console.error(
+      require('console').error(
         `Failed to load buildId ${buildIdUrl} (${buildIdRes.status})`
       )
     }
     this._buildId = (await buildIdRes.text()).trim()
 
-    console.log(`Got buildId: ${this._buildId}`)
+    require('console').log(`Got buildId: ${this._buildId}`)
 
     const cliOutputRes = await fetch(
       `https://vercel.com/api/v1/deployments/${this._parsedUrl.hostname}/events?builds=1&direction=backward`,
diff --git a/test/unit/image-rendering.test.ts b/test/unit/image-rendering.test.ts
index 1dad98dd6e813..475fa74baa511 100644
--- a/test/unit/image-rendering.test.ts
+++ b/test/unit/image-rendering.test.ts
@@ -79,4 +79,19 @@ describe('Image rendering', () => {
     expect($2('noscript').length).toBe(1)
     expect($3('noscript').length).toBe(1)
   })
+
+  it('should render the correct sizes passed when a noscript element is rendered', async () => {
+    const element = React.createElement(Image, {
+      src: '/test.png',
+      width: 100,
+      height: 100,
+      sizes: '50vw',
+    })
+    const $ = cheerio.load(ReactDOM.renderToString(element))
+    const noscriptImg = $('noscript img')
+    expect(noscriptImg.attr('sizes')).toBe('50vw')
+    expect(noscriptImg.attr('srcset')).toContain(
+      '/_next/image?url=%2Ftest.png&w=384&q=75 384w'
+    )
+  })
 })
diff --git a/yarn.lock b/yarn.lock
index 7b8276eccc2ee..a680af77a8c68 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5679,10 +5679,10 @@
     agentkeepalive "3.4.1"
     debug "3.1.0"
 
-"@vercel/ncc@0.33.1":
-  version "0.33.1"
-  resolved "https://registry.yarnpkg.com/@vercel/ncc/-/ncc-0.33.1.tgz#b240080a3c1ded9446a30955a06a79851bb38f71"
-  integrity sha512-Mlsps/P0PLZwsCFtSol23FGqT3FhBGb4B1AuGQ52JTAtXhak+b0Fh/4T55r0/SVQPeRiX9pNItOEHwakGPmZYA==
+"@vercel/ncc@0.33.4":
+  version "0.33.4"
+  resolved "https://registry.yarnpkg.com/@vercel/ncc/-/ncc-0.33.4.tgz#e44a87511f583b7ba88e4b9ae90eeb7ba252b872"
+  integrity sha512-ln18hs7dMffelP47tpkaR+V5Tj6coykNyxJrlcmCormPqRQjB/Gv4cu2FfBG+PMzIfdZp2CLDsrrB1NPU22Qhg==
 
 "@vercel/nft@0.19.1":
   version "0.19.1"