Merge branch 'canary' into fix/dynamic-css-edge

vercel · Apr 14, 2024 · 716c8e9 · 716c8e9
2 parents 84f3e0d + 2a605af
commit 716c8e9
Show file tree

Hide file tree

Showing 30 changed files with 688 additions and 199 deletions.
diff --git a/docs/02-app/01-building-your-application/07-configuring/05-mdx.mdx b/docs/02-app/01-building-your-application/07-configuring/05-mdx.mdx
diff --git a/docs/02-app/02-api-reference/02-file-conventions/mdx-components.mdx b/docs/02-app/02-api-reference/02-file-conventions/mdx-components.mdx
@@ -0,0 +1,71 @@
+---
+title: mdx-components.js
+description: API reference for the mdx-components.js file.
+related:
+  title: Learn more about MDX Components
+  links:
+    - app/building-your-application/configuring/mdx
+---
+
+The `mdx-components.js|tsx` file is **required** to use [`@next/mdx` with App Router](/docs/app/building-your-application/configuring/mdx) and will not work without it. Additionally, you can use it to [customize styles](/docs/app/building-your-application/configuring/mdx#using-custom-styles-and-components).
+
+Use the file `mdx-components.tsx` (or `.js`) in the root of your project to define MDX Components. For example, at the same level as `pages` or `app`, or inside `src` if applicable.
+
+```tsx filename="mdx-components.tsx" switcher
+import type { MDXComponents } from 'mdx/types'
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  }
+}
+```
+
+```js filename="mdx-components.js" switcher
+export function useMDXComponents(components) {
+  return {
+    ...components,
+  }
+}
+```
+
+## Exports
+
+### `useMDXComponents` function
+
+The file must export a single function, either as a default export or named `useMDXComponents`.
+
+```tsx filename="mdx-components.tsx" switcher
+import type { MDXComponents } from 'mdx/types'
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  }
+}
+```
+
+```js filename="mdx-components.js" switcher
+export function useMDXComponents(components) {
+  return {
+    ...components,
+  }
+}
+```
+
+## Params
+
+### `components`
+
+When defining MDX Components, the export function accepts a single parameter, `components`. This parameter is an instance of `MDXComponents`.
+
+- The key is the name of the HTML element to override.
+- The value is the component to render instead.
+
+> **Good to know**: Remember to pass all other components (i.e. `...components`) that do not have overrides.
+
+## Version History
+
+| Version   | Changes              |
+| --------- | -------------------- |
+| `v13.1.2` | MDX Components added |
diff --git a/docs/02-app/02-api-reference/02-file-conventions/middleware.mdx b/docs/02-app/02-api-reference/02-file-conventions/middleware.mdx
@@ -1,6 +1,6 @@
 ---
 title: middleware.js
-description: API reference for the middleware.js  file.
+description: API reference for the middleware.js file.
 related:
   title: Learn more about Middleware
   links:

diff --git a/docs/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx b/docs/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx
@@ -62,7 +62,11 @@ export const dynamic = 'auto'
 > **Good to know**: The new model in the `app` directory favors granular caching control at the `fetch` request level over the binary all-or-nothing model of `getServerSideProps` and `getStaticProps` at the page-level in the `pages` directory. The `dynamic` option is a way to opt back in to the previous model as a convenience and provides a simpler migration path.
 
 - **`'auto'`** (default): The default option to cache as much as possible without preventing any components from opting into dynamic behavior.
-- **`'force-dynamic'`**: Force [dynamic rendering](/docs/app/building-your-application/rendering/server-components#dynamic-rendering), which will result in routes being rendered for each user at request time. This option is equivalent to `getServerSideProps()` in the `pages` directory.
+- **`'force-dynamic'`**: Force [dynamic rendering](/docs/app/building-your-application/rendering/server-components#dynamic-rendering), which will result in routes being rendered for each user at request time. This option is equivalent to:
+
+  - `getServerSideProps()` in the `pages` directory.
+  - Setting the option of every `fetch()` request in a layout or page to `{ cache: 'no-store', next: { revalidate: 0 } }`.
+  - Setting the segment config to `export const fetchCache = 'force-no-store'`
 
 - **`'error'`**: Force static rendering and cache the data of a layout or page by causing an error if any components use [dynamic functions](/docs/app/building-your-application/rendering/server-components#dynamic-functions) or uncached data. This option is equivalent to:
   - `getStaticProps()` in the `pages` directory.

diff --git a/lerna.json b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "14.2.1-canary.3"
+  "version": "14.2.1-canary.4"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "keywords": [
     "react",
     "next",

diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "description": "ESLint configuration used by Next.js.",
   "main": "index.js",
   "license": "MIT",
@@ -10,7 +10,7 @@
   },
   "homepage": "https://nextjs.org/docs/app/building-your-application/configuring/eslint#eslint-config",
   "dependencies": {
-    "@next/eslint-plugin-next": "14.2.1-canary.3",
+    "@next/eslint-plugin-next": "14.2.1-canary.4",
     "@rushstack/eslint-patch": "^1.3.3",
     "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0",
     "eslint-import-resolver-node": "^0.3.6",

diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "description": "ESLint plugin for Next.js.",
   "main": "dist/index.js",
   "license": "MIT",

diff --git a/packages/font/package.json b/packages/font/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/font",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/font"

diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",

diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/packages/next-env/package.json b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "keywords": [
     "react",
     "next",

diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "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
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "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
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "private": true,
   "scripts": {
     "clean": "node ../../scripts/rm.mjs native",

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -92,7 +92,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "14.2.1-canary.3",
+    "@next/env": "14.2.1-canary.4",
     "@swc/helpers": "0.5.5",
     "busboy": "1.6.0",
     "caniuse-lite": "^1.0.30001579",
@@ -149,10 +149,10 @@
     "@jest/types": "29.5.0",
     "@mswjs/interceptors": "0.23.0",
     "@napi-rs/triples": "1.2.0",
-    "@next/polyfill-module": "14.2.1-canary.3",
-    "@next/polyfill-nomodule": "14.2.1-canary.3",
-    "@next/react-refresh-utils": "14.2.1-canary.3",
-    "@next/swc": "14.2.1-canary.3",
+    "@next/polyfill-module": "14.2.1-canary.4",
+    "@next/polyfill-nomodule": "14.2.1-canary.4",
+    "@next/react-refresh-utils": "14.2.1-canary.4",
+    "@next/swc": "14.2.1-canary.4",
     "@opentelemetry/api": "1.6.0",
     "@playwright/test": "1.41.2",
     "@taskr/clear": "1.1.0",

diff --git a/packages/next/src/server/lib/patch-fetch.ts b/packages/next/src/server/lib/patch-fetch.ts
@@ -310,7 +310,13 @@ function createPatchedFetcher(
           _cache === 'no-cache' ||
           _cache === 'no-store' ||
           fetchCacheMode === 'force-no-store' ||
-          fetchCacheMode === 'only-no-store'
+          fetchCacheMode === 'only-no-store' ||
+          // If no explicit fetch cache mode is set, but dynamic = `force-dynamic` is set,
+          // we shouldn't consider caching the fetch. This is because the `dynamic` cache
+          // is considered a "top-level" cache mode, whereas something like `fetchCache` is more
+          // fine-grained. Top-level modes are responsible for setting reasonable defaults for the
+          // other configurations.
+          (!fetchCacheMode && staticGenerationStore.forceDynamic)
         ) {
           curRevalidate = 0
         }

diff --git a/packages/next/src/shared/lib/router/action-queue.ts b/packages/next/src/shared/lib/router/action-queue.ts
@@ -155,8 +155,11 @@ function dispatchAction(
       action: newAction,
       setState,
     })
-  } else if (payload.type === ACTION_NAVIGATE) {
-    // Navigations take priority over any pending actions.
+  } else if (
+    payload.type === ACTION_NAVIGATE ||
+    payload.type === ACTION_RESTORE
+  ) {
+    // Navigations (including back/forward) take priority over any pending actions.
     // Mark the pending action as discarded (so the state is never applied) and start the navigation action immediately.
     actionQueue.pending.discarded = true
 

diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",

diff --git a/packages/third-parties/package.json b/packages/third-parties/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/third-parties",
-  "version": "14.2.1-canary.3",
+  "version": "14.2.1-canary.4",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/third-parties"
@@ -26,7 +26,7 @@
     "third-party-capital": "1.0.20"
   },
   "devDependencies": {
-    "next": "14.2.1-canary.3",
+    "next": "14.2.1-canary.4",
     "outdent": "0.8.0",
     "prettier": "2.5.1"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/e2e/app-dir/actions/app-action.test.ts b/test/e2e/app-dir/actions/app-action.test.ts
@@ -337,6 +337,19 @@ createNextDescribe(
       await check(() => browser.url(), `${next.url}/client`, true, 2)
     })
 
+    it('should not block router.back() while a server action is in flight', async () => {
+      let browser = await next.browser('/')
+
+      // click /client link to add a history entry
+      await browser.elementByCss("[href='/client']").click()
+      await browser.elementByCss('#slow-inc').click()
+
+      await browser.back()
+
+      // intentionally bailing after 2 retries so we don't retry to the point where the async function resolves
+      await check(() => browser.url(), `${next.url}/`, true, 2)
+    })
+
     it('should trigger a refresh for a server action that gets discarded due to a navigation', async () => {
       let browser = await next.browser('/client')
       const initialRandomNumber = await browser