Merge branch 'canary' into edge/cookies

docs/api-reference/edge-runtime.md

@@ -26,7 +26,7 @@ The Next.js Edge Runtime is based on standard Web APIs, which is used by [Middle
 
 ### Environment
 
-- `process.env`: Holds an object with all environment variables for both production and development in the exact same way as any other page or API in Next.js
+- `process.env`: Holds an object with all environment variables for both `next dev` and `next build` in the exact same way as any other page or API in Next.js
 
 ### Fetch
 

docs/basic-features/data-fetching/client-side.md

@@ -21,7 +21,7 @@ function Profile() {
 
  useEffect(() => {
  setLoading(true)
- fetch('api/profile-data')
+ fetch('/api/profile-data')
  .then((res) => res.json())
  .then((data) => {
  setData(data)

examples/with-playwright/styles/Home.module.css

@@ -5,7 +5,6 @@
  flex-direction: column;
  justify-content: center;
  align-items: center;
- height: 100vh;
 }
 
 .main {

lerna.json

@@ -16,5 +16,5 @@
  "registry": "https://registry.npmjs.org/"
  }
  },
- "version": "12.1.7-canary.1"
+ "version": "12.1.7-canary.3"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
  "name": "create-next-app",
- "version": "12.1.7-canary.1",
+ "version": "12.1.7-canary.3",
  "keywords": [
  "react",
  "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
  "name": "eslint-config-next",
- "version": "12.1.7-canary.1",
+ "version": "12.1.7-canary.3",
  "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.1",
+ "@next/eslint-plugin-next": "12.1.7-canary.3",
  "@rushstack/eslint-patch": "^1.1.3",
  "@typescript-eslint/parser": "^5.21.0",
  "eslint-import-resolver-node": "^0.3.6",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@next/eslint-plugin-next",
- "version": "12.1.7-canary.1",
+ "version": "12.1.7-canary.3",
  "description": "ESLint plugin for NextJS.",
  "main": "lib/index.js",
  "license": "MIT",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@next/bundle-analyzer",
- "version": "12.1.7-canary.1",
+ "version": "12.1.7-canary.3",
  "main": "index.js",
  "license": "MIT",
  "repository": {

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@next/codemod",
- "version": "12.1.7-canary.1",
+ "version": "12.1.7-canary.3",
  "license": "MIT",
  "dependencies": {
  "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@next/env",
- "version": "12.1.7-canary.1",
+ "version": "12.1.7-canary.3",
  "keywords": [
  "react",
  "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@next/mdx",
- "version": "12.1.7-canary.1",
+ "version": "12.1.7-canary.3",
  "main": "index.js",
  "license": "MIT",
  "repository": {

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@next/plugin-storybook",
- "version": "12.1.7-canary.1",
+ "version": "12.1.7-canary.3",
  "repository": {
  "url": "vercel/next.js",
  "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@next/polyfill-module",
- "version": "12.1.7-canary.1",
+ "version": "12.1.7-canary.3",
  "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",

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@next/polyfill-nomodule",
- "version": "12.1.7-canary.1",
+ "version": "12.1.7-canary.3",
  "description": "A polyfill for non-dead, nomodule browsers.",
  "main": "dist/polyfill-nomodule.js",
  "license": "MIT",

packages/next-swc/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@next/swc",
- "version": "12.1.7-canary.1",
+ "version": "12.1.7-canary.3",
  "private": true,
  "scripts": {
  "build-native": "napi build --platform --cargo-name next_swc_napi native",

packages/next/bin/next.ts

@@ -43,8 +43,7 @@ const args = arg(
 )
 
 // Detect if react-dom is enabled streaming rendering mode
-const shouldUseReactRoot = !!require('react-dom/server.browser')
- .renderToReadableStream
+const shouldUseReactRoot = !!require('react-dom/server').renderToPipeableStream
 
 // Version is inlined into the file using taskr build pipeline
 if (args['--version']) {

packages/next/build/entries.ts

@@ -14,8 +14,7 @@ import {
  API_ROUTE,
  DOT_NEXT_ALIAS,
  PAGES_DIR_ALIAS,
- ROOT_ALIAS,
- ROOT_DIR_ALIAS,
+ VIEWS_DIR_ALIAS,
 } from '../lib/constants'
 import {
  CLIENT_STATIC_FILES_RUNTIME_AMP,
@@ -40,11 +39,7 @@ type ObjectValue<T> = T extends { [key: string]: infer V } ? V : never
  * special case because it is the only page where we want to preserve the RSC
  * server extension.
  */
-export function getPageFromPath(
- pagePath: string,
- pageExtensions: string[],
- isRoot?: boolean
-) {
+export function getPageFromPath(pagePath: string, pageExtensions: string[]) {
  const extensions = pagePath.includes('/_app.server.')
  ? withoutRSCExtensions(pageExtensions)
  : pageExtensions
@@ -53,36 +48,34 @@ export function getPageFromPath(
  pagePath.replace(new RegExp(`\\.+(${extensions.join('|')})$`), '')
  )
 
- if (!isRoot) {
- page = page.replace(/\/index$/, '')
- }
+ page = page.replace(/\/index$/, '')
 
  return page === '' ? '/' : page
 }
 
 export function createPagesMapping({
  hasServerComponents,
  isDev,
- isRoot,
+ isViews,
  pageExtensions,
  pagePaths,
 }: {
  hasServerComponents: boolean
  isDev: boolean
- isRoot?: boolean
+ isViews?: boolean
  pageExtensions: string[]
  pagePaths: string[]
 }): { [page: string]: string } {
  const previousPages: { [key: string]: string } = {}
- const pathAlias = isRoot ? ROOT_DIR_ALIAS : PAGES_DIR_ALIAS
+ const pathAlias = isViews ? VIEWS_DIR_ALIAS : PAGES_DIR_ALIAS
  const pages = pagePaths.reduce<{ [key: string]: string }>(
  (result, pagePath) => {
  // Do not process .d.ts files inside the `pages` folder
  if (pagePath.endsWith('.d.ts') && pageExtensions.includes('ts')) {
  return result
  }
 
- const pageKey = getPageFromPath(pagePath, pageExtensions, isRoot)
+ const pageKey = getPageFromPath(pagePath, pageExtensions)
 
  // Assume that if there's a Client Component, that there is
  // a matching Server Component that will map to the page.
@@ -103,11 +96,7 @@ export function createPagesMapping({
  previousPages[pageKey] = pagePath
  }
 
- if (pageKey === 'root') {
- result['root'] = normalizePathSep(join(ROOT_ALIAS, pagePath))
- } else {
- result[pageKey] = normalizePathSep(join(pathAlias, pagePath))
- }
+ result[pageKey] = normalizePathSep(join(pathAlias, pagePath))
  return result
  },
  {}
@@ -117,12 +106,7 @@ export function createPagesMapping({
  // the correct source file so that HMR can work properly when a file is
  // added or removed.
 
- if (isRoot) {
- if (isDev) {
- pages['root'] = `${ROOT_ALIAS}/root`
- } else {
- pages['root'] = pages['root'] || 'next/dist/pages/root'
- }
+ if (isViews) {
  return pages
  }
 
@@ -259,8 +243,9 @@ interface CreateEntrypointsParams {
  pagesDir: string
  previewMode: __ApiPreviewProps
  target: 'server' | 'serverless' | 'experimental-serverless-trace'
- rootDir?: string
- rootPaths?: Record<string, string>
+ viewsDir?: string
+ viewPaths?: Record<string, string>
+ pageExtensions: string[]
 }
 
 export function getEdgeServerEntry(opts: {
@@ -301,6 +286,14 @@ export function getEdgeServerEntry(opts: {
  return `next-middleware-ssr-loader?${stringify(loaderParams)}!`
 }
 
+export function getViewsEntry(opts: {
+ pagePath: string
+ viewsDir: string
+ pageExtensions: string[]
+}) {
+ return `next-view-loader?${stringify(opts)}!`
+}
+
 export function getServerlessEntry(opts: {
  absolutePagePath: string
  buildId: string
@@ -365,18 +358,27 @@ export function getClientEntry(opts: {
 }
 
 export async function createEntrypoints(params: CreateEntrypointsParams) {
- const { config, pages, pagesDir, isDev, target, rootDir, rootPaths } = params
+ const {
+ config,
+ pages,
+ pagesDir,
+ isDev,
+ target,
+ viewsDir,
+ viewPaths,
+ pageExtensions,
+ } = params
  const edgeServer: webpack5.EntryObject = {}
  const server: webpack5.EntryObject = {}
  const client: webpack5.EntryObject = {}
 
  const getEntryHandler =
- (mappings: Record<string, string>, isRoot: boolean) =>
+ (mappings: Record<string, string>, isViews: boolean) =>
  async (page: string) => {
  const bundleFile = normalizePagePath(page)
  const clientBundlePath = posix.join('pages', bundleFile)
  const serverBundlePath = posix.join(
- isRoot ? (bundleFile === '/root' ? './' : 'root') : 'pages',
+ isViews ? 'views' : 'pages',
  bundleFile
  )
 
@@ -387,12 +389,8 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
  return absolutePagePath.replace(PAGES_DIR_ALIAS, pagesDir)
  }
 
- if (absolutePagePath.startsWith(ROOT_DIR_ALIAS) && rootDir) {
- return absolutePagePath.replace(ROOT_DIR_ALIAS, rootDir)
- }
-
- if (absolutePagePath.startsWith(ROOT_ALIAS) && rootDir) {
- return absolutePagePath.replace(ROOT_ALIAS, join(rootDir, '..'))
+ if (absolutePagePath.startsWith(VIEWS_DIR_ALIAS) && viewsDir) {
+ return absolutePagePath.replace(VIEWS_DIR_ALIAS, viewsDir)
  }
 
  return require.resolve(absolutePagePath)
@@ -408,7 +406,13 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
  })
  },
  onServer: () => {
- if (isTargetLikeServerless(target)) {
+ if (isViews && viewsDir) {
+ server[serverBundlePath] = getViewsEntry({
+ pagePath: mappings[page],
+ viewsDir,
+ pageExtensions,
+ })
+ } else if (isTargetLikeServerless(target)) {
  if (page !== '/_app' && page !== '/_document') {
  server[serverBundlePath] = getServerlessEntry({
  ...params,
@@ -432,9 +436,9 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
  })
  }
 
- if (rootDir && rootPaths) {
- const entryHandler = getEntryHandler(rootPaths, true)
- await Promise.all(Object.keys(rootPaths).map(entryHandler))
+ if (viewsDir && viewPaths) {
+ const entryHandler = getEntryHandler(viewPaths, true)
+ await Promise.all(Object.keys(viewPaths).map(entryHandler))
  }
  await Promise.all(Object.keys(pages).map(getEntryHandler(pages, false)))