Merge branch 'canary' into fix-next-script-empty-strategy-prop

vercel · May 11, 2024 · cf162fe · cf162fe
2 parents a99bb57 + 9084a09
commit cf162fe
Show file tree

Hide file tree

Showing 154 changed files with 1,868 additions and 2,201 deletions.
diff --git a/docs/02-app/01-building-your-application/09-authentication/index.mdx b/docs/02-app/01-building-your-application/09-authentication/index.mdx
@@ -29,7 +29,7 @@ The examples on this page walk through basic username and password auth for educ
 
 ### Sign-up and login functionality
 
-You can use the [`<form>`](https://react.dev/reference/react-dom/components/form) element with React's [Server Actions](/docs/app/building-your-application/rendering/server-components), [`useFormStatus()`](https://react.dev/reference/react-dom/hooks/useFormStatus), and [`useActionState()`](https://react.dev/reference/react/useActionState) to capture user credentials, validate form fields, and call your Authentication Provider's API or database.
+You can use the [`<form>`](https://react.dev/reference/react-dom/components/form) element with React's [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations), [`useFormStatus()`](https://react.dev/reference/react-dom/hooks/useFormStatus), and [`useActionState()`](https://react.dev/reference/react/useActionState) to capture user credentials, validate form fields, and call your Authentication Provider's API or database.
 
 Since Server Actions always execute on the server, they provide a secure environment for handling authentication logic.
 

diff --git a/docs/02-app/01-building-your-application/11-upgrading/05-from-create-react-app.mdx b/docs/02-app/01-building-your-application/11-upgrading/05-from-create-react-app.mdx
@@ -152,7 +152,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
-        <meta charset="UTF-8" />
+        <meta charSet="UTF-8" />
         <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>React App</title>

diff --git a/docs/02-app/02-api-reference/01-components/image.mdx b/docs/02-app/02-api-reference/01-components/image.mdx
@@ -725,6 +725,22 @@ module.exports = {
 
 In addition, it is strongly recommended to also set `contentDispositionType` to force the browser to download the image, as well as `contentSecurityPolicy` to prevent scripts embedded in the image from executing.
 
+### `contentDispositionType`
+
+The default [loader](#loader) sets the [`Content-Disposition`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition#as_a_response_header_for_the_main_body) header to `attachment` for added protection since the API can serve arbitrary remote images.
+
+The default value is `attachment` which forces the browser to download the image when visiting directly. This is particularly important when [`dangerouslyAllowSVG`](#dangerouslyallowsvg) is true.
+
+You can optionally configure `inline` to allow the browser to render the image when visiting directly, without downloading it.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    contentDispositionType: 'inline',
+  },
+}
+```
+
 ## Animated Images
 
 The default [loader](#loader) will automatically bypass Image Optimization for animated images and serve the image as-is.
@@ -1000,6 +1016,7 @@ This `next/image` component uses browser native [lazy loading](https://caniuse.c
 
 | Version    | Changes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v15.0.0`  | `contentDispositionType` configuration default changed to `attachment`.                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | `v14.2.0`  | `overrideSrc` prop added.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `v14.1.0`  | `getImageProps()` is stable.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `v14.0.0`  | `onLoadingComplete` prop and `domains` config deprecated.                                                                                                                                                                                                                                                                                                                                                                                                                                                     |

diff --git a/docs/03-pages/02-api-reference/01-components/image-legacy.mdx b/docs/03-pages/02-api-reference/01-components/image-legacy.mdx
@@ -577,6 +577,22 @@ module.exports = {
 
 In addition, it is strongly recommended to also set `contentDispositionType` to force the browser to download the image, as well as `contentSecurityPolicy` to prevent scripts embedded in the image from executing.
 
+### `contentDispositionType`
+
+The default [loader](#loader) sets the [`Content-Disposition`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition#as_a_response_header_for_the_main_body) header to `attachment` for added protection since the API can serve arbitrary remote images.
+
+The default value is `attachment` which forces the browser to download the image when visiting directly. This is particularly important when [`dangerouslyAllowSVG`](#dangerously-allow-svg) is true.
+
+You can optionally configure `inline` to allow the browser to render the image when visiting directly, without downloading it.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    contentDispositionType: 'inline',
+  },
+}
+```
+
 ### Animated Images
 
 The default [loader](#loader) will automatically bypass Image Optimization for animated images and serve the image as-is.

diff --git a/errors/invalid-images-config.mdx b/errors/invalid-images-config.mdx
@@ -35,8 +35,8 @@ module.exports = {
     dangerouslyAllowSVG: false,
     // set the Content-Security-Policy header
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
-    // sets the Content-Disposition header (inline or attachment)
-    contentDispositionType: 'inline',
+    // sets the Content-Disposition header ('inline' or 'attachment')
+    contentDispositionType: 'attachment',
     // limit of 50 objects
     remotePatterns: [],
     // when true, every image will be unoptimized

diff --git a/examples/reproduction-template-pages/package.json b/examples/reproduction-template-pages/package.json
@@ -7,8 +7,8 @@
   },
   "dependencies": {
     "next": "canary",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "19.0.0-beta-4508873393-20240430",
+    "react-dom": "19.0.0-beta-4508873393-20240430"
   },
   "devDependencies": {
     "@types/node": "20.4.5",

diff --git a/examples/reproduction-template/package.json b/examples/reproduction-template/package.json
@@ -7,8 +7,8 @@
   },
   "dependencies": {
     "next": "canary",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "19.0.0-beta-4508873393-20240430",
+    "react-dom": "19.0.0-beta-4508873393-20240430"
   },
   "devDependencies": {
     "@types/node": "20.4.5",

diff --git a/lerna.json b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "14.3.0-canary.54"
+  "version": "14.3.0-canary.57"
 }
diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -2,40 +2,47 @@ const { quote } = require('shell-quote')
 const { ESLint } = require('eslint')
 
 const eslint = new ESLint()
-const isWin = process.platform === 'win32'
+
+/**
+ * Escape filenames to ensure that spaces and such aren't interpreted as
+ * separators.
+ *
+ * @param {string[]} filenames
+ * @returns {string[]}
+ */
+function escape(filenames) {
+  if (process.platform === 'win32') {
+    return filenames
+  }
+
+  return filenames.map((filename) => quote([filename]).replace(/\\@/g, '@'))
+}
 
 module.exports = {
-  '**/*.{js,jsx,mjs,ts,tsx,mts}': (filenames) => {
-    const escapedFileNames = filenames
-      .map((filename) => (isWin ? filename : escape([filename])))
-      .join(' ')
+  '**/*.{js,jsx,mjs,ts,tsx,mts}': async (filenames) => {
+    const escapedFileNames = escape(filenames).join(' ')
+    const eslintFileNames = await Promise.all(
+      filenames.map(async (filename) => {
+        const ignored = await eslint.isPathIgnored(filename)
+        return ignored ? null : filename
+      })
+    )
+
     return [
       `prettier --with-node-modules --ignore-path .prettierignore --write ${escapedFileNames}`,
-      `eslint --no-ignore --max-warnings=0 --fix ${filenames
-        .filter((file) => !eslint.isPathIgnored(file))
-        .map((f) => `"${f}"`)
-        .join(' ')}`,
+      `eslint --no-ignore --max-warnings=0 --fix ${escape(eslintFileNames.filter((filename) => filename !== null)).join(' ')}`,
       `git add ${escapedFileNames}`,
     ]
   },
   '**/*.{json,md,mdx,css,html,yml,yaml,scss}': (filenames) => {
-    const escapedFileNames = filenames
-      .map((filename) => (isWin ? filename : escape([filename])))
-      .join(' ')
+    const escapedFileNames = escape(filenames).join(' ')
     return [
       `prettier --with-node-modules --ignore-path .prettierignore --write ${escapedFileNames}`,
       `git add ${escapedFileNames}`,
     ]
   },
   '**/*.rs': (filenames) => {
-    const escapedFileNames = filenames
-      .map((filename) => (isWin ? filename : escape([filename])))
-      .join(' ')
+    const escapedFileNames = escape(filenames).join(' ')
     return [`cargo fmt -- ${escapedFileNames}`, `git add ${escapedFileNames}`]
   },
 }
-
-function escape(str) {
-  const escaped = quote(str)
-  return escaped.replace(/\\@/g, '@')
-}
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.3.0-canary.54",
+  "version": "14.3.0-canary.57",
   "keywords": [
     "react",
     "next",

diff --git a/packages/create-next-app/templates/app-empty/js/README-template.md b/packages/create-next-app/templates/app-empty/js/README-template.md
@@ -1,4 +1,4 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
 
 ## Getting Started
 
@@ -25,10 +25,10 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
 ## Deploy on Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/packages/create-next-app/templates/app-empty/js/app/favicon.ico b/packages/create-next-app/templates/app-empty/js/app/favicon.ico
diff --git a/packages/create-next-app/templates/app-empty/ts/README-template.md b/packages/create-next-app/templates/app-empty/ts/README-template.md
@@ -1,4 +1,4 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
 
 ## Getting Started
 
@@ -25,10 +25,10 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
 ## Deploy on Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/packages/create-next-app/templates/app-tw-empty/js/README-template.md b/packages/create-next-app/templates/app-tw-empty/js/README-template.md
@@ -1,4 +1,4 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
 
 ## Getting Started
 
@@ -25,10 +25,10 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
 ## Deploy on Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/packages/create-next-app/templates/app-tw-empty/js/app/favicon.ico b/packages/create-next-app/templates/app-tw-empty/js/app/favicon.ico
diff --git a/packages/create-next-app/templates/app-tw-empty/ts/README-template.md b/packages/create-next-app/templates/app-tw-empty/ts/README-template.md
@@ -1,4 +1,4 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
 
 ## Getting Started
 
@@ -25,10 +25,10 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
 ## Deploy on Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/packages/create-next-app/templates/app-tw-empty/ts/app/favicon.ico b/packages/create-next-app/templates/app-tw-empty/ts/app/favicon.ico
diff --git a/packages/create-next-app/templates/app-tw/js/README-template.md b/packages/create-next-app/templates/app-tw/js/README-template.md
@@ -1,4 +1,4 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 ## Getting Started
 
@@ -18,7 +18,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load Inter, a custom Google Font.
 
 ## Learn More
 
@@ -27,10 +27,10 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
 ## Deploy on Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/packages/create-next-app/templates/app-tw/ts/README-template.md b/packages/create-next-app/templates/app-tw/ts/README-template.md
@@ -1,4 +1,4 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
 
 ## Getting Started
 
@@ -18,7 +18,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load Inter, a custom Google Font.
 
 ## Learn More
 
@@ -27,10 +27,10 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
 ## Deploy on Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.