Merge branch 'canary' into use-sync-external-store

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)

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

@@ -245,6 +245,7 @@ interface CreateEntrypointsParams {
   target: 'server' | 'serverless' | 'experimental-serverless-trace'
   viewsDir?: string
   viewPaths?: Record<string, string>
+  pageExtensions: string[]
 }
 
 export function getEdgeServerEntry(opts: {
@@ -285,13 +286,12 @@ export function getEdgeServerEntry(opts: {
   return `next-middleware-ssr-loader?${stringify(loaderParams)}!`
 }
 
-export function getViewsEntry(opts: { pagePath: string; viewsDir: string }) {
-  const loaderParams = {
-    pagePath: opts.pagePath,
-    viewsDir: opts.viewsDir,
-  }
-
-  return `next-view-loader?${stringify(loaderParams)}!`
+export function getViewsEntry(opts: {
+  pagePath: string
+  viewsDir: string
+  pageExtensions: string[]
+}) {
+  return `next-view-loader?${stringify(opts)}!`
 }
 
 export function getServerlessEntry(opts: {
@@ -358,19 +358,23 @@ export function getClientEntry(opts: {
 }
 
 export async function createEntrypoints(params: CreateEntrypointsParams) {
-  const { config, pages, pagesDir, isDev, target, viewsDir, viewPaths } = 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>, isViews: boolean) =>
     async (page: string) => {
-      // TODO: @timneutkens do not pass layouts to entry here
-      if (isViews && page.endsWith('/layout')) {
-        return
-      }
-
       const bundleFile = normalizePagePath(page)
       const clientBundlePath = posix.join('pages', bundleFile)
       const serverBundlePath = posix.join(
@@ -406,6 +410,7 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
             server[serverBundlePath] = getViewsEntry({
               pagePath: mappings[page],
               viewsDir,
+              pageExtensions,
             })
           } else if (isTargetLikeServerless(target)) {
             if (page !== '/_app' && page !== '/_document') {

packages/next/build/index.ts

@@ -318,10 +318,11 @@ export default async function build(
           .traceAsyncFn(() =>
             recursiveReadDir(
               viewsDir,
-              new RegExp(`\\.(?:${config.pageExtensions.join('|')})$`)
+              new RegExp(`page\\.(?:${config.pageExtensions.join('|')})$`)
             )
           )
       }
+
       // needed for static exporting since we want to replace with HTML
       // files
 
@@ -375,6 +376,7 @@ export default async function build(
             target,
             viewsDir,
             viewPaths: mappedViewPaths,
+            pageExtensions: config.pageExtensions,
           })
         )
 

packages/next/build/webpack/loaders/next-view-loader.ts

@@ -37,26 +37,22 @@ async function resolveLayoutPathsByPage({
   return layoutPaths
 }
 
-const extensions = [
-  ...NODE_RESOLVE_OPTIONS.extensions,
-  ...NODE_RESOLVE_OPTIONS.extensions.map((ext) => `.server${ext}`),
-  ...NODE_RESOLVE_OPTIONS.extensions.map((ext) => `.client${ext}`),
-]
-const resolveOptions: any = {
-  ...NODE_RESOLVE_OPTIONS,
-  extensions,
-}
-
 const nextViewLoader: webpack.LoaderDefinitionFunction<{
   pagePath: string
   viewsDir: string
+  pageExtensions: string[]
 }> = async function nextViewLoader() {
-  const loaderOptions = this.getOptions() || {}
+  const { viewsDir, pagePath, pageExtensions } = this.getOptions() || {}
+
+  const extensions = pageExtensions.map((extension) => `.${extension}`)
+  const resolveOptions: any = {
+    ...NODE_RESOLVE_OPTIONS,
+    extensions,
+  }
   const resolve = this.getResolve(resolveOptions)
-  const viewsDir = loaderOptions.viewsDir
 
   const layoutPaths = await resolveLayoutPathsByPage({
-    pagePath: loaderOptions.pagePath,
+    pagePath: pagePath,
     resolve: async (pathname) => {
       try {
         return await resolve(this.rootContext, pathname)
@@ -87,11 +83,11 @@ const nextViewLoader: webpack.LoaderDefinitionFunction<{
 
   // Add page itself to the list of components
   componentsCode.push(
-    `'${pathToUrlPath(loaderOptions.pagePath).replace(
+    `'${pathToUrlPath(pagePath).replace(
       new RegExp(`/page\\.+(${extensions.join('|')})$`),
       ''
       // use require so that we can bust the require cache
-    )}': () => require('${loaderOptions.pagePath}')`
+    )}': () => require('${pagePath}')`
   )
 
   const result = `

packages/next/server/dev/hot-reloader.ts

@@ -421,6 +421,7 @@ export default class HotReloader {
             pagesDir: this.pagesDir,
             previewMode: this.previewProps,
             target: 'server',
+            pageExtensions: this.config.pageExtensions,
           })
         )
 
@@ -488,6 +489,7 @@ export default class HotReloader {
           pagesDir: this.pagesDir,
           previewMode: this.previewProps,
           target: 'server',
+          pageExtensions: this.config.pageExtensions,
         })
       ).client,
       hasReactRoot: this.hasReactRoot,
@@ -605,6 +607,7 @@ export default class HotReloader {
                               relative(this.viewsDir!, absolutePagePath)
                             ),
                             viewsDir: this.viewsDir!,
+                            pageExtensions: this.config.pageExtensions,
                           })
                         : request,
                   })

packages/next/server/next.ts

@@ -185,8 +185,8 @@ function createServer(options: NextServerOptions): NextServer {
 
   // Make sure env of custom server is overridden.
   // Use dynamic require to make sure it's executed in it's own context.
-  const ReactDOMServer = require('react-dom/server.browser')
-  const shouldUseReactRoot = !!ReactDOMServer.renderToReadableStream
+  const ReactDOMServer = require('react-dom/server')
+  const shouldUseReactRoot = !!ReactDOMServer.renderToPipeableStream
   if (shouldUseReactRoot) {
     ;(process.env as any).__NEXT_REACT_ROOT = 'true'
   }

packages/next/server/view-render.tsx

@@ -17,12 +17,14 @@ import {
   continueFromInitialStream,
 } from './node-web-streams-helper'
 import { FlushEffectsContext } from '../shared/lib/flush-effects'
-// @ts-ignore react-dom/client exists when using React 18
-import ReactDOMServer from 'react-dom/server.browser'
 import { isDynamicRoute } from '../shared/lib/router/utils'
 import { tryGetPreviewData } from './api-utils/node'
 import DefaultRootLayout from '../lib/views-layout'
 
+const ReactDOMServer = process.env.__NEXT_REACT_ROOT
+  ? require('react-dom/server.browser')
+  : require('react-dom/server')
+
 export type RenderOptsPartial = {
   err?: Error | null
   dev?: boolean