Merge branch 'canary' into 03-02-Add_test_for_router.refresh_preservi…

…ng_unaffected_segments
vercel · Mar 3, 2023 · 89b665d · 89b665d
2 parents 356e5c4 + 9acbf6e
commit 89b665d
Show file tree

Hide file tree

Showing 106 changed files with 2,274 additions and 757 deletions.
diff --git a/docs/advanced-features/custom-server.md b/docs/advanced-features/custom-server.md
@@ -53,10 +53,14 @@ app.prepare().then(() => {
       res.statusCode = 500
       res.end('internal server error')
     }
-  }).listen(port, (err) => {
-    if (err) throw err
-    console.log(`> Ready on http://${hostname}:${port}`)
   })
+    .once('error', (err) => {
+      console.error(err)
+      process.exit(1)
+    })
+    .listen(port, () => {
+      console.log(`> Ready on http://${hostname}:${port}`)
+    })
 })
 ```
 

diff --git a/docs/api-reference/next.config.js/custom-image-loader-config.md b/docs/api-reference/next.config.js/custom-image-loader-config.md
@@ -0,0 +1,158 @@
+---
+description: Custom configuration for the next/image loader
+---
+
+# Custom Image Loader Configuration
+
+If you want to use a cloud provider to optimize images instead of using the Next.js built-in Image Optimization API, you can configure `next.config.js` with the following:
+
+```js
+module.exports = {
+  images: {
+    loader: 'custom',
+    loaderFile: './my/image/loader.js',
+  },
+}
+```
+
+This `loaderFile` must point to a file relative to the root of your Next.js application. The file must export a default function that returns a string, for example:
+
+```js
+export default function myImageLoader({ src, width, quality }) {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+```
+
+Alternatively, you can use the [`loader` prop](/docs/api-reference/next/image.md#loader) to pass the function to each instance of `next/image`.
+
+## Example Loader Configuration
+
+- [Akamai](#akamai)
+- [Cloudinary](#cloudinary)
+- [Cloudflare](#cloudflare)
+- [Contentful](#contentful)
+- [Fastly](#fastly)
+- [Gumlet](#gumlet)
+- [ImageEngine](#imageengine)
+- [Imgix](#imgix)
+- [Thumbor](#thumbor)
+
+### Akamai
+
+```js
+// Docs: https://techdocs.akamai.com/ivm/reference/test-images-on-demand
+export default function akamaiLoader({ src, width, quality }) {
+  return `https://example.com/${src}?imwidth=${width}`
+}
+```
+
+### Cloudinary
+
+```js
+// Demo: https://res.cloudinary.com/demo/image/upload/w_300,c_limit,q_auto/turtles.jpg
+export default function cloudinaryLoader({ src, width, quality }) {
+  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
+  return `https://example.com/${params.join(',')}${src}`
+}
+```
+
+### Cloudflare
+
+```js
+// Docs: https://developers.cloudflare.com/images/url-format
+export default function cloudflareLoader({ src, width, quality }) {
+  const params = [`width=${width}`, `quality=${quality || 75}`, 'format=auto']
+  return `https://example.com/cdn-cgi/image/${params.join(',')}/${src}`
+}
+```
+
+### Contentful
+
+```js
+// Docs: https://www.contentful.com/developers/docs/references/images-api/
+export default function contentfulLoader({ src, quality, width }) {
+  const url = new URL(`https://example.com${src}`)
+  url.searchParams.set('fm', 'webp')
+  url.searchParams.set('w', width.toString())
+  url.searchParams.set('q', quality.toString() || '75')
+  return url.href
+}
+```
+
+## Fastly
+
+```js
+// Docs: https://developer.fastly.com/reference/io/
+export default function fastlyLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  url.searchParams.set('auto', 'webp')
+  url.searchParams.set('width', width.toString())
+  url.searchParams.set('quality', quality.toString() || '75')
+  return url.href
+}
+```
+
+## Gumlet
+
+```js
+// Docs: https://docs.gumlet.com/reference/image-transform-size
+export default function gumletLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  url.searchParams.set('format', 'auto')
+  url.searchParams.set('w', width.toString())
+  url.searchParams.set('q', quality.toString() || '75')
+  return url.href
+}
+```
+
+### ImageEngine
+
+```js
+// Docs: https://support.imageengine.io/hc/en-us/articles/360058880672-Directives
+export default function imageengineLoader({ src, width, quality }) {
+  const compression = 100 - (quality || 50)
+  const params = [`w_${width}`, `cmpr_${compression}`)]
+  return `https://example.com${src}?imgeng=/${params.join('/')`
+}
+```
+
+### Imgix
+
+```js
+// Demo: https://static.imgix.net/daisy.png?format=auto&fit=max&w=300
+export default function imgixLoader({ src, width, quality }) {
+  const url = new URL(`https://example.com${src}`)
+  const params = url.searchParams
+  params.set('auto', params.getAll('auto').join(',') || 'format')
+  params.set('fit', params.get('fit') || 'max')
+  params.set('w', params.get('w') || width.toString())
+  params.set('q', quality.toString() || '50')
+  return url.href
+}
+```
+
+### Thumbor
+
+```js
+// Docs: https://thumbor.readthedocs.io/en/latest/
+export default function thumborLoader({ src, width, quality }) {
+  const params = [`${width}x0`, `filters:quality(${quality || 75})`]
+  return `https://example.com${params.join('/')}${src}`
+}
+```
+
+## Related
+
+<div class="card">
+  <a href="/docs/basic-features/image-optimization.md">
+    <b>Image Optimization</b>
+    <small>Learn how to optimize images with the Image component.</small>
+  </a>
+</div>
+
+<div class="card">
+  <a href="/docs/api-reference/next.config.js/introduction.md">
+    <b>Introduction to next.config.js:</b>
+    <small>Learn more about the configuration file used by Next.js.</small>
+  </a>
+</div>
diff --git a/docs/api-reference/next.config.js/turbopack.md b/docs/api-reference/next.config.js/turbopack.md
@@ -27,7 +27,7 @@ module.exports = {
           },
         ],
         // Option-less format
-        '.mdx': '@mdx-js/loader',
+        '.mdx': ['@mdx-js/loader'],
       },
     },
   },

diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
@@ -384,6 +384,10 @@ export default function myImageLoader({ src, width, quality }) {
 
 Alternatively, you can use the [`loader` prop](#loader) to configure each instance of `next/image`.
 
+Examples:
+
+- [Custom Image Loader Configuration](/docs/api-reference/next.config.js/custom-image-loader-config.md#example-loader-configuration)
+
 ## Advanced
 
 The following configuration is for advanced use cases and is usually not necessary. If you choose to configure the properties below, you will override any changes to the Next.js defaults in future updates.

diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
@@ -81,7 +81,7 @@ This script will load and execute when _any_ route in your application is access
 
 ### Strategy
 
-Although the default behavior of `next/script` allows you load third-party scripts in any page, you can fine-tune its loading behavior by using the `strategy` property:
+Although the default behavior of `next/script` allows you to load third-party scripts in any page, you can fine-tune its loading behavior by using the `strategy` property:
 
 - `beforeInteractive`: Load the script before any Next.js code and before any page hydration occurs.
 - `afterInteractive`: (**default**) Load the script early but after some hydration on the page occurs.

diff --git a/docs/basic-features/static-file-serving.md b/docs/basic-features/static-file-serving.md
@@ -6,7 +6,7 @@ description: Next.js allows you to serve static files, like images, in the publi
 
 Next.js can serve static files, like images, under a folder called `public` in the root directory. Files inside `public` can then be referenced by your code starting from the base URL (`/`).
 
-For example, if you add an image to `public/me.png`, the following code will access the image:
+For example, if you add `me.png` inside `public`, the following code will access the image:
 
 ```jsx
 import Image from 'next/image'

diff --git a/docs/manifest.json b/docs/manifest.json
@@ -508,6 +508,10 @@
               "title": "CDN Support with Asset Prefix",
               "path": "/docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md"
             },
+            {
+              "title": "Custom Image Loader Config",
+              "path": "/docs/api-reference/next.config.js/custom-image-loader-config.md"
+            },
             {
               "title": "Custom Webpack Config",
               "path": "/docs/api-reference/next.config.js/custom-webpack-config.md"

diff --git a/errors/no-img-element.md b/errors/no-img-element.md
@@ -1,16 +1,24 @@
 # No img element
 
-> Prevent usage of `<img>` element to prevent layout shift and favor [optimized images](https://nextjs.org/docs/basic-features/image-optimization).
+> Prevent usage of `<img>` element due to slower LCP and higher bandwidth.
 
 ### Why This Error Occurred
 
-An `<img>` element was used to display an image.
+An `<img>` element was used to display an image instead of `<Image />` from `next/image`.
 
 ### Possible Ways to Fix It
 
 Use [`next/image`](https://nextjs.org/docs/api-reference/next/image) to improve performance with automatic [Image Optimization](https://nextjs.org/docs/basic-features/image-optimization).
 
-> Note: If deploying to a [managed hosting provider](https://nextjs.org/docs/deployment), remember to check pricing since optimized images might be charged differently than the original images. If self-hosting, remember to install [`sharp`](https://www.npmjs.com/package/sharp) and check if your server has enough storage to cache the optimized images.
+> Note: If deploying to a [managed hosting provider](https://nextjs.org/docs/deployment), remember to check provider pricing since optimized images might be charged differently than the original images.
+>
+> Common image optimization platform pricing:
+>
+> - [Vercel pricing](https://vercel.com/pricing)
+> - [Cloudinary pricing](https://cloudinary.com/pricing)
+> - [imgix pricing](https://imgix.com/pricing)
+
+> Note: If self-hosting, remember to install [`sharp`](https://www.npmjs.com/package/sharp) and check if your server has enough storage to cache the optimized images.
 
 ```jsx
 import Image from 'next/image'
@@ -31,8 +39,6 @@ export default Home
 
 If you would like to use `next/image` features such as blur-up placeholders but disable Image Optimization, you can do so using [unoptimized](https://nextjs.org/docs/api-reference/next/image#unoptimized).
 
-<br />
-
 Or, use a `<picture>` element with the nested `<img>` element:
 
 ```jsx

diff --git a/examples/app-dir-mdx/package.json b/examples/app-dir-mdx/package.json
@@ -8,6 +8,7 @@
   "dependencies": {
     "@next/font": "latest",
     "@next/mdx": "latest",
+    "@types/mdx": "2.0.3",
     "@types/node": "18.11.18",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",

diff --git a/jest.config.js b/jest.config.js
@@ -9,7 +9,11 @@ const customJestConfig = {
   setupFilesAfterEnv: ['<rootDir>/jest-setup-after-env.ts'],
   verbose: true,
   rootDir: 'test',
-  roots: ['<rootDir>', '<rootDir>/../packages/next/src/'],
+  roots: [
+    '<rootDir>',
+    '<rootDir>/../packages/next/src/',
+    '<rootDir>/../packages/font/src/',
+  ],
   modulePaths: ['<rootDir>/lib'],
   transformIgnorePatterns: ['/next[/\\\\]dist/', '/\\.next/'],
   globals: {

diff --git a/lerna.json b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "13.2.3"
+  "version": "13.2.4-canary.1"
 }
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "lerna": "lerna",
     "dev": "turbo run dev --parallel",
     "test-types": "tsc",
-    "test-unit": "jest test/unit/",
+    "test-unit": "jest test/unit/ packages/next/ packages/font",
     "test-dev": "cross-env NEXT_TEST_MODE=dev pnpm testheadless",
     "test-start": "cross-env NEXT_TEST_MODE=start pnpm testheadless",
     "test-deploy": "cross-env NEXT_TEST_MODE=deploy pnpm testheadless",
@@ -48,7 +48,8 @@
     "debug": "cross-env NEXT_TELEMETRY_DISABLED=1 node --inspect packages/next/dist/bin/next",
     "postinstall": "git config feature.manyFiles true && node scripts/install-native.mjs",
     "version": "npx pnpm@7.24.3 install && IS_PUBLISH=yes ./scripts/check-pre-compiled.sh && git add .",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "sync-react": "node ./scripts/sync-react.js"
   },
   "devDependencies": {
     "@babel/core": "7.18.0",

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": "13.2.3",
+  "version": "13.2.4-canary.1",
   "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": "13.2.3",
+  "version": "13.2.4-canary.1",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -12,7 +12,7 @@
     "test-pack": "cd ../../ && pnpm test-pack eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "13.2.3",
+    "@next/eslint-plugin-next": "13.2.4-canary.1",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.42.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": "13.2.3",
+  "version": "13.2.4-canary.1",
   "description": "ESLint plugin for NextJS.",
   "main": "dist/index.js",
   "license": "MIT",

diff --git a/packages/eslint-plugin-next/src/rules/no-img-element.ts b/packages/eslint-plugin-next/src/rules/no-img-element.ts
@@ -31,7 +31,7 @@ export = defineRule({
 
         context.report({
           node,
-          message: `Using \`<img>\` could result in slower LCP and higher bandwidth. Use \`<Image />\` from \`next/image\` instead to utilize Image Optimization. See: ${url}`,
+          message: `Using \`<img>\` could result in slower LCP and higher bandwidth. Consider using \`<Image />\` from \`next/image\` to automatically optimize images. This may incur additional usage or cost from your provider. See: ${url}`,
         })
       },
     }

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