Merge branch 'canary' into wyattjoh/null-navigation-hooks

errors/manifest.json

@@ -778,6 +778,10 @@
  "title": "context-in-server-component",
  "path": "/errors/context-in-server-component.md"
  },
+ {
+ "title": "next-response-next-in-app-route-handler",
+ "path": "/errors/next-response-next-in-app-route-handler.md"
+ },
  {
  "title": "react-client-hook-in-server-component",
  "path": "/errors/react-client-hook-in-server-component.md"

errors/next-response-next-in-app-route-handler.md

@@ -0,0 +1,14 @@
+# `NextResponse.next()` used in a App Route Handler
+
+#### Why This Error Occurred
+
+App Route Handler's do not currently support using the `NextResponse.next()` method to forward to the next middleware because the handler is considered the endpoint to the middleware chain. Handlers must always return a `Response` object instead.
+
+#### Possible Ways to Fix It
+
+Remove the `NextResponse.next()` and replace it with a correct response handler.
+
+### Useful Links
+
+- [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
+- [`NextResponse`](https://nextjs.org/docs/api-reference/next/server#nextresponse)

examples/app-dir-mdx/mdx-components.tsx

@@ -1,7 +1,7 @@
+import type { MDXComponents } from 'mdx/types'
+
 // This file is required to use MDX in `app` directory.
-export function useMDXComponents(components: {
- [component: string]: React.ComponentType
-}) {
+export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
  // Allows customizing built-in components, e.g. to add styling.
  // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,

packages/next/src/build/entries.ts

@@ -215,7 +215,7 @@ export function getAppEntry(opts: {
  name: string
  pagePath: string
  appDir: string
- appPaths: string[] | null
+ appPaths: ReadonlyArray<string> | null
  pageExtensions: string[]
  assetPrefix: string
  isDev?: boolean
@@ -310,7 +310,7 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
  let appPathsPerRoute: Record<string, string[]> = {}
  if (appDir && appPaths) {
  for (const pathname in appPaths) {
- const normalizedPath = normalizeAppPath(pathname) || '/'
+ const normalizedPath = normalizeAppPath(pathname)
  if (!appPathsPerRoute[normalizedPath]) {
  appPathsPerRoute[normalizedPath] = []
  }
@@ -403,8 +403,7 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
  },
  onServer: () => {
  if (pagesType === 'app' && appDir) {
- const matchedAppPaths =
- appPathsPerRoute[normalizeAppPath(page) || '/']
+ const matchedAppPaths = appPathsPerRoute[normalizeAppPath(page)]
  server[serverBundlePath] = getAppEntry({
  name: serverBundlePath,
  pagePath: mappings[page],
@@ -420,8 +419,7 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
  onEdgeServer: () => {
  let appDirLoader: string = ''
  if (pagesType === 'app') {
- const matchedAppPaths =
- appPathsPerRoute[normalizeAppPath(page) || '/']
+ const matchedAppPaths = appPathsPerRoute[normalizeAppPath(page)]
  appDirLoader = getAppEntry({
  name: serverBundlePath,
  pagePath: mappings[page],

packages/next/src/build/index.ts

@@ -49,7 +49,7 @@ import {
  PAGES_MANIFEST,
  PHASE_PRODUCTION_BUILD,
  PRERENDER_MANIFEST,
- FLIGHT_MANIFEST,
+ CLIENT_REFERENCE_MANIFEST,
  REACT_LOADABLE_MANIFEST,
  ROUTES_MANIFEST,
  SERVER_DIRECTORY,
@@ -501,7 +501,9 @@ export default async function build(
  .traceAsyncFn(() =>
  recursiveReadDir(
  appDir,
- new RegExp(`^page\\.(?:${config.pageExtensions.join('|')})$`)
+ new RegExp(
+ `^(page|route)\\.(?:${config.pageExtensions.join('|')})$`
+ )
  )
  )
  }
@@ -578,7 +580,7 @@ export default async function build(
  if (mappedAppPages) {
  denormalizedAppPages = Object.keys(mappedAppPages)
  for (const appKey of denormalizedAppPages) {
- const normalizedAppPageKey = normalizeAppPath(appKey) || '/'
+ const normalizedAppPageKey = normalizeAppPath(appKey)
  const pagePath = mappedPages[normalizedAppPageKey]
  if (pagePath) {
  const appPath = mappedAppPages[appKey]
@@ -904,8 +906,14 @@ export default async function build(
  : []),
  path.join(SERVER_DIRECTORY, APP_PATHS_MANIFEST),
  APP_BUILD_MANIFEST,
- path.join(SERVER_DIRECTORY, FLIGHT_MANIFEST + '.js'),
- path.join(SERVER_DIRECTORY, FLIGHT_MANIFEST + '.json'),
+ path.join(
+ SERVER_DIRECTORY,
+ CLIENT_REFERENCE_MANIFEST + '.js'
+ ),
+ path.join(
+ SERVER_DIRECTORY,
+ CLIENT_REFERENCE_MANIFEST + '.json'
+ ),
  path.join(
  SERVER_DIRECTORY,
  FLIGHT_SERVER_CSS_MANIFEST + '.js'
@@ -1091,7 +1099,7 @@ export default async function build(
  )
 
  Object.keys(appPathsManifest).forEach((entry) => {
- appPathRoutes[entry] = normalizeAppPath(entry) || '/'
+ appPathRoutes[entry] = normalizeAppPath(entry)
  })
  await promises.writeFile(
  path.join(distDir, APP_PATH_ROUTES_MANIFEST),
@@ -1382,7 +1390,9 @@ export default async function build(
  if (
  (!isDynamicRoute(page) ||
  !workerResult.prerenderRoutes?.length) &&
- workerResult.appConfig?.revalidate !== 0
+ workerResult.appConfig?.revalidate !== 0 &&
+ // TODO-APP: (wyattjoh) this may be where we can enable prerendering for app handlers
+ originalAppPath.endsWith('/page')
  ) {
  appStaticPaths.set(originalAppPath, [page])
  appStaticPathsEncoded.set(originalAppPath, [page])

packages/next/src/build/webpack/loaders/next-app-loader.ts

@@ -12,6 +12,7 @@ import { APP_DIR_ALIAS } from '../../../lib/constants'
 import { buildMetadata, discoverStaticMetadataFiles } from './metadata/discover'
 
 const isNotResolvedError = (err: any) => err.message.includes("Can't resolve")
+import { isAppRouteRoute } from '../../../lib/is-app-route-route'
 
 const FILE_TYPES = {
  layout: 'layout',
@@ -25,6 +26,10 @@ const FILE_TYPES = {
 const GLOBAL_ERROR_FILE_TYPE = 'global-error'
 const PAGE_SEGMENT = 'page$'
 
+type PathResolver = (
+ pathname: string,
+ resolveDir?: boolean
+) => Promise<string | undefined>
 export type ComponentsType = {
  readonly [componentKey in ValueOf<typeof FILE_TYPES>]?: ModuleReference
 } & {
@@ -33,6 +38,35 @@ export type ComponentsType = {
  readonly metadata?: CollectedMetadata
 }
 
+async function createAppRouteCode({
+ pagePath,
+ resolver,
+}: {
+ pagePath: string
+ resolver: PathResolver
+}): Promise<string> {
+ // Split based on any specific path separators (both `/` and `\`)...
+ const splittedPath = pagePath.split(/[\\/]/)
+ // Then join all but the last part with the same separator, `/`...
+ const segmentPath = splittedPath.slice(0, -1).join('/')
+ // Then add the `/route` suffix...
+ const matchedPagePath = `${segmentPath}/route`
+ // This, when used with the resolver will give us the pathname to the built
+ // route handler file.
+ const resolvedPagePath = await resolver(matchedPagePath)
+
+ // TODO: verify if other methods need to be injected
+ // TODO: validate that the handler exports at least one of the supported methods
+
+ return `
+ import 'next/dist/server/node-polyfill-headers'
+ 
+ export * as handlers from ${JSON.stringify(resolvedPagePath)}
+
+ export { requestAsyncStorage } from 'next/dist/client/components/request-async-storage'
+ `
+}
+
 async function createTreeCodeFromPath(
  pagePath: string,
  {
@@ -279,8 +313,7 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
 
  return Object.entries(matched)
  }
-
- const resolver = async (pathname: string, resolveDir?: boolean) => {
+ const resolver: PathResolver = async (pathname, resolveDir) => {
  if (resolveDir) {
  return createAbsolutePath(appDir, pathname)
  }
@@ -302,6 +335,10 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
  }
  }
 
+ if (isAppRouteRoute(name)) {
+ return createAppRouteCode({ pagePath, resolver })
+ }
+
  const {
  treeCode,
  pages: pageListCode,

packages/next/src/build/webpack/loaders/next-serverless-loader/utils.ts

@@ -1,7 +1,7 @@
 import type { IncomingMessage, ServerResponse } from 'http'
 import type { Rewrite } from '../../../../lib/load-custom-routes'
 import type { BuildManifest } from '../../../../server/get-page-files'
-import type { RouteMatch } from '../../../../shared/lib/router/utils/route-matcher'
+import type { RouteMatchFn } from '../../../../shared/lib/router/utils/route-matcher'
 import type { NextConfig } from '../../../../server/config'
 import type {
  GetServerSideProps,
@@ -144,7 +144,7 @@ export function getUtils({
  trailingSlash?: boolean
 }) {
  let defaultRouteRegex: ReturnType<typeof getNamedRouteRegex> | undefined
- let dynamicRouteMatcher: RouteMatch | undefined
+ let dynamicRouteMatcher: RouteMatchFn | undefined
  let defaultRouteMatches: ParsedUrlQuery | undefined
 
  if (pageIsDynamic) {

packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -19,7 +19,7 @@ import {
  APP_CLIENT_INTERNALS,
  COMPILER_NAMES,
  EDGE_RUNTIME_WEBPACK,
- ACTIONS_MANIFEST,
+ SERVER_REFERENCE_MANIFEST,
  FLIGHT_SERVER_CSS_MANIFEST,
 } from '../../../shared/lib/constants'
 import { ASYNC_CLIENT_MODULES } from './flight-manifest-plugin'
@@ -756,9 +756,8 @@ export class FlightClientEntryPlugin {
  }
  }
 
- const file = ACTIONS_MANIFEST
  const json = JSON.stringify(serverActions, null, this.dev ? 2 : undefined)
- assets[file + '.json'] = new sources.RawSource(
+ assets[SERVER_REFERENCE_MANIFEST + '.json'] = new sources.RawSource(
  json
  ) as unknown as webpack.sources.RawSource
  }

packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts

@@ -6,7 +6,7 @@
  */
 
 import { webpack, sources } from 'next/dist/compiled/webpack/webpack'
-import { FLIGHT_MANIFEST } from '../../../shared/lib/constants'
+import { CLIENT_REFERENCE_MANIFEST } from '../../../shared/lib/constants'
 import { relative, sep } from 'path'
 import { isClientComponentModule, regexCSS } from '../loaders/utils'
 
@@ -369,7 +369,7 @@ export class FlightManifestPlugin {
  manifest.__entry_css_files__ = entryCSSFiles
  })
 
- const file = 'server/' + FLIGHT_MANIFEST
+ const file = 'server/' + CLIENT_REFERENCE_MANIFEST
  const json = JSON.stringify(manifest, null, this.dev ? 2 : undefined)
 
  ASYNC_CLIENT_MODULES.clear()

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

@@ -13,7 +13,7 @@ import {
  EDGE_RUNTIME_WEBPACK,
  EDGE_UNSUPPORTED_NODE_APIS,
  MIDDLEWARE_BUILD_MANIFEST,
- FLIGHT_MANIFEST,
+ CLIENT_REFERENCE_MANIFEST,
  MIDDLEWARE_MANIFEST,
  MIDDLEWARE_REACT_LOADABLE_MANIFEST,
  NEXT_CLIENT_SSR_ENTRY_SUFFIX,
@@ -95,7 +95,7 @@ function getEntryFiles(
  const files: string[] = []
  if (meta.edgeSSR) {
  if (meta.edgeSSR.isServerComponent) {
- files.push(`server/${FLIGHT_MANIFEST}.js`)
+ files.push(`server/${CLIENT_REFERENCE_MANIFEST}.js`)
  files.push(`server/${FLIGHT_SERVER_CSS_MANIFEST}.js`)
  if (opts.sriEnabled) {
  files.push(`server/${SUBRESOURCE_INTEGRITY_MANIFEST}.js`)

packages/next/src/client/components/layout-router.tsx

@@ -25,6 +25,7 @@ import { ErrorBoundary } from './error-boundary'
 import { matchSegment } from './match-segments'
 import { useRouter } from './navigation'
 import { handleSmoothScroll } from '../../shared/lib/router/utils/handle-smooth-scroll'
+import { getURLFromRedirectError, isRedirectError } from './redirect'
 
 /**
  * Add refetch marker to router state at the point of the current layout segment.
@@ -380,8 +381,8 @@ class RedirectErrorBoundary extends React.Component<
  }
 
  static getDerivedStateFromError(error: any) {
- if (error?.digest?.startsWith('NEXT_REDIRECT')) {
- const url = error.digest.split(';')[1]
+ if (isRedirectError(error)) {
+ const url = getURLFromRedirectError(error)
  return { redirect: url }
  }
  // Re-throw if error is not for redirect

packages/next/src/client/components/not-found.ts

@@ -1,8 +1,25 @@
-export const NOT_FOUND_ERROR_CODE = 'NEXT_NOT_FOUND'
+const NOT_FOUND_ERROR_CODE = 'NEXT_NOT_FOUND'
 
+type NotFoundError = Error & { digest: typeof NOT_FOUND_ERROR_CODE }
+
+/**
+ * When used in a React server component, this will set the status code to 404.
+ * When used in a custom app route it will just send a 404 status.
+ */
 export function notFound(): never {
  // eslint-disable-next-line no-throw-literal
  const error = new Error(NOT_FOUND_ERROR_CODE)
- ;(error as any).digest = NOT_FOUND_ERROR_CODE
+ ;(error as NotFoundError).digest = NOT_FOUND_ERROR_CODE
  throw error
 }
+
+/**
+ * Checks an error to determine if it's an error generated by the `notFound()`
+ * helper.
+ *
+ * @param error the error that may reference a not found error
+ * @returns true if the error is a not found error
+ */
+export function isNotFoundError(error: any): error is NotFoundError {
+ return error?.digest === NOT_FOUND_ERROR_CODE
+}