Merge branch 'canary' into bump-turbopack

Author: kwonoj

packages/next/src/client/components/error-boundary.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import React from 'react'
+import { usePathname } from './navigation'
 
 const styles = {
   error: {
@@ -36,19 +37,50 @@ export interface ErrorBoundaryProps {
   errorStyles?: React.ReactNode | undefined
 }
 
+interface ErrorBoundaryHandlerProps extends ErrorBoundaryProps {
+  pathname: string
+}
+
+interface ErrorBoundaryHandlerState {
+  error: Error | null
+  previousPathname: string
+}
+
 export class ErrorBoundaryHandler extends React.Component<
-  ErrorBoundaryProps,
-  { error: Error | null }
+  ErrorBoundaryHandlerProps,
+  ErrorBoundaryHandlerState
 > {
-  constructor(props: ErrorBoundaryProps) {
+  constructor(props: ErrorBoundaryHandlerProps) {
     super(props)
-    this.state = { error: null }
+    this.state = { error: null, previousPathname: this.props.pathname }
   }
 
   static getDerivedStateFromError(error: Error) {
     return { error }
   }
 
+  static getDerivedStateFromProps(
+    props: ErrorBoundaryHandlerProps,
+    state: ErrorBoundaryHandlerState
+  ): ErrorBoundaryHandlerState | null {
+    /**
+     * Handles reset of the error boundary when a navigation happens.
+     * Ensures the error boundary does not stay enabled when navigating to a new page.
+     * Approach of setState in render is safe as it checks the previous pathname and then overrides
+     * it as outlined in https://react.dev/reference/react/useState#storing-information-from-previous-renders
+     */
+    if (props.pathname !== state.previousPathname && state.error) {
+      return {
+        error: null,
+        previousPathname: props.pathname,
+      }
+    }
+    return {
+      error: state.error,
+      previousPathname: props.pathname,
+    }
+  }
+
   reset = () => {
     this.setState({ error: null })
   }
@@ -105,9 +137,11 @@ export function ErrorBoundary({
   errorStyles,
   children,
 }: ErrorBoundaryProps & { children: React.ReactNode }): JSX.Element {
+  const pathname = usePathname()
   if (errorComponent) {
     return (
       <ErrorBoundaryHandler
+        pathname={pathname}
         errorComponent={errorComponent}
         errorStyles={errorStyles}
       >

packages/next/src/client/components/not-found-boundary.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { usePathname } from './navigation'
 
 interface NotFoundBoundaryProps {
   notFound?: React.ReactNode
@@ -7,13 +8,25 @@ interface NotFoundBoundaryProps {
   children: React.ReactNode
 }
 
+interface NotFoundErrorBoundaryProps extends NotFoundBoundaryProps {
+  pathname: string
+}
+
+interface NotFoundErrorBoundaryState {
+  notFoundTriggered: boolean
+  previousPathname: string
+}
+
 class NotFoundErrorBoundary extends React.Component<
-  NotFoundBoundaryProps,
-  { notFoundTriggered: boolean }
+  NotFoundErrorBoundaryProps,
+  NotFoundErrorBoundaryState
 > {
-  constructor(props: NotFoundBoundaryProps) {
+  constructor(props: NotFoundErrorBoundaryProps) {
     super(props)
-    this.state = { notFoundTriggered: !!props.asNotFound }
+    this.state = {
+      notFoundTriggered: !!props.asNotFound,
+      previousPathname: props.pathname,
+    }
   }
 
   static getDerivedStateFromError(error: any) {
@@ -24,6 +37,28 @@ class NotFoundErrorBoundary extends React.Component<
     throw error
   }
 
+  static getDerivedStateFromProps(
+    props: NotFoundErrorBoundaryProps,
+    state: NotFoundErrorBoundaryState
+  ): NotFoundErrorBoundaryState | null {
+    /**
+     * Handles reset of the error boundary when a navigation happens.
+     * Ensures the error boundary does not stay enabled when navigating to a new page.
+     * Approach of setState in render is safe as it checks the previous pathname and then overrides
+     * it as outlined in https://react.dev/reference/react/useState#storing-information-from-previous-renders
+     */
+    if (props.pathname !== state.previousPathname && state.notFoundTriggered) {
+      return {
+        notFoundTriggered: false,
+        previousPathname: props.pathname,
+      }
+    }
+    return {
+      notFoundTriggered: state.notFoundTriggered,
+      previousPathname: props.pathname,
+    }
+  }
+
   render() {
     if (this.state.notFoundTriggered) {
       return (
@@ -45,8 +80,10 @@ export function NotFoundBoundary({
   asNotFound,
   children,
 }: NotFoundBoundaryProps) {
+  const pathname = usePathname()
   return notFound ? (
     <NotFoundErrorBoundary
+      pathname={pathname}
       notFound={notFound}
       notFoundStyles={notFoundStyles}
       asNotFound={asNotFound}

packages/next/src/export/index.ts

@@ -228,12 +228,6 @@ export default async function exportApp(
       )
     }
 
-    if (nextConfig.experimental.serverActions) {
-      throw new ExportError(
-        `Server Actions are not supported with static export.`
-      )
-    }
-
     const customRoutesDetected = ['rewrites', 'redirects', 'headers'].filter(
       (config) => typeof nextConfig[config] === 'function'
     )

packages/next/src/server/lib/patch-fetch.ts

@@ -91,18 +91,17 @@ export function patchFetch({
       // Error caused by malformed URL should be handled by native fetch
       url = undefined
     }
+    const fetchUrl = url?.href ?? ''
     const fetchStart = Date.now()
     const method = init?.method?.toUpperCase() || 'GET'
 
     return await getTracer().trace(
       AppRenderSpan.fetch,
       {
         kind: SpanKind.CLIENT,
-        spanName: ['fetch', method, url?.toString() ?? input.toString()]
-          .filter(Boolean)
-          .join(' '),
+        spanName: ['fetch', method, fetchUrl].filter(Boolean).join(' '),
         attributes: {
-          'http.url': url?.toString(),
+          'http.url': fetchUrl,
           'http.method': method,
           'net.peer.name': url?.hostname,
           'net.peer.port': url?.port || undefined,
@@ -175,7 +174,7 @@ export function patchFetch({
           typeof curRevalidate !== 'undefined'
         ) {
           console.warn(
-            `Warning: fetch for ${input.toString()} specified "cache: ${_cache}" and "revalidate: ${curRevalidate}", only one should be specified.`
+            `Warning: fetch for ${fetchUrl} on ${staticGenerationStore.pathname} specified "cache: ${_cache}" and "revalidate: ${curRevalidate}", only one should be specified.`
           )
           _cache = undefined
         }
@@ -219,7 +218,7 @@ export function patchFetch({
         if (isOnlyNoStore) {
           if (_cache === 'force-cache' || revalidate === 0) {
             throw new Error(
-              `cache: 'force-cache' used on fetch for ${input.toString()} with 'export const fetchCache = 'only-no-store'`
+              `cache: 'force-cache' used on fetch for ${fetchUrl} with 'export const fetchCache = 'only-no-store'`
             )
           }
           revalidate = 0
@@ -228,7 +227,7 @@ export function patchFetch({
 
         if (isOnlyCache && _cache === 'no-store') {
           throw new Error(
-            `cache: 'no-store' used on fetch for ${input.toString()} with 'export const fetchCache = 'only-cache'`
+            `cache: 'no-store' used on fetch for ${fetchUrl} with 'export const fetchCache = 'only-cache'`
           )
         }
 
@@ -284,7 +283,7 @@ export function patchFetch({
           try {
             cacheKey =
               await staticGenerationStore.incrementalCache.fetchCacheKey(
-                isRequestInput ? (input as Request).url : input.toString(),
+                fetchUrl,
                 isRequestInput ? (input as RequestInit) : init
               )
           } catch (err) {
@@ -329,7 +328,6 @@ export function patchFetch({
           }
         }
 
-        const fetchUrl = url?.toString() ?? ''
         const fetchIdx = staticGenerationStore.nextFetchId ?? 1
         staticGenerationStore.nextFetchId = fetchIdx + 1
 

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

@@ -974,6 +974,12 @@ createNextDescribe(
 
         return 'success'
       }, 'success')
+
+      if (!isNextDeploy) {
+        expect(next.cliOutput).toContain(
+          'Warning: fetch for https://next-data-api-endpoint.vercel.app/api/random?d4 on /force-cache specified "cache: force-cache" and "revalidate: 3", only one should be specified.'
+        )
+      }
     })
 
     it('should cache correctly for cache: no-store', async () => {

test/e2e/app-dir/error-boundary-and-not-found-linking/app/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+import Link from 'next/link'
+
+export default function ErrorComponent() {
+  return (
+    <>
+      <h1 id="error-component">Error Happened!</h1>
+      <Link href="/result" id="to-result">
+        To Result
+      </Link>
+    </>
+  )
+}

test/e2e/app-dir/error-boundary-and-not-found-linking/app/layout.tsx

@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}

test/e2e/app-dir/error-boundary-and-not-found-linking/app/not-found.tsx

@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <>
+      <h1 id="not-found-component">Not Found!</h1>
+      <Link href="/result" id="to-result">
+        To Result
+      </Link>
+    </>
+  )
+}

test/e2e/app-dir/error-boundary-and-not-found-linking/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1 id="homepage">Home</h1>
+}

test/e2e/app-dir/error-boundary-and-not-found-linking/app/result/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1 id="result-page">Result Page!</h1>
+}