Merge branch 'canary' into fix-40066

# Conflicts: # packages/next/server/next-server.ts
vercel · Aug 31, 2022 · 8104a12 · 8104a12
2 parents c5d080c + 643447e
commit 8104a12
Show file tree

Hide file tree

Showing 122 changed files with 1,181 additions and 317 deletions.
diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md
@@ -9,6 +9,7 @@ description: Try the latest Image Optimization with the experimental `next/futur
 
 | Version   | Changes                                      |
 | --------- | -------------------------------------------- |
+| `v12.3.0` | Changed `alt` property to required.          |
 | `v12.2.4` | Support for `fill` property added.           |
 | `v12.2.0` | Experimental `next/future/image` introduced. |
 
@@ -43,6 +44,7 @@ Compared to `next/image`, the new `next/future/image` component has the followin
   - Removes `lazyBoundary` prop since there is no native equivalent
   - Removes `lazyRoot` prop since there is no native equivalent
 - Removes `loader` config in favor of [`loader`](#loader) prop
+- Changed `alt` prop from optional to required
 
 ## Known Browser Bugs
 
@@ -175,6 +177,16 @@ The `height` property represents the _rendered_ height in pixels, so it will aff
 
 Required, except for [statically imported images](/docs/basic-features/image-optimization.md#local-images) or images with the [`fill` property](#fill).
 
+### alt
+
+The `alt` property is used to describe the image for screen readers and search engines. It is also the fallback text if images have been disabled or an error occurs while loading the image.
+
+It should contain text that could replace the image [without changing the meaning of the page](https://html.spec.whatwg.org/multipage/images.html#general-guidelines). It is not meant to supplement the image and should not repeat information that is already provided in the captions above or below the image.
+
+If the image is [purely decorative](https://html.spec.whatwg.org/multipage/images.html#a-purely-decorative-image-that-doesn't-add-any-information) or [not intended for the user](https://html.spec.whatwg.org/multipage/images.html#an-image-not-intended-for-the-user), the `alt` property should be an empty string (`alt=""`).
+
+[Learn more](https://html.spec.whatwg.org/multipage/images.html#alt)
+
 ## Optional Props
 
 The `<Image />` component accepts a number of additional properties beyond those which are required. This section describes the most commonly-used properties of the Image component. Find details about more rarely-used properties in the [Advanced Props](#advanced-props) section.

diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md
@@ -27,28 +27,24 @@ To add a web font to your Next.js application, add the font to a [Custom `Docume
 ```js
 // pages/_document.js
 
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-
-class MyDocument extends Document {
-  render() {
-    return (
-      <Html>
-        <Head>
-          <link
-            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
-            rel="stylesheet"
-          />
-        </Head>
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
+          rel="stylesheet"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
 }
-
-export default MyDocument
 ```
 
 Adding fonts to `_document` is preferred over individual pages. When adding fonts to a single page with [`next/head`](/docs/api-reference/next/head.md), font optimizations included by Next.js will not work on navigations between pages client-side or when using [streaming](/docs/advanced-features/react-18/streaming.md).

diff --git a/examples/active-class-name/next.config.js b/examples/active-class-name/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   async rewrites() {
     return [

diff --git a/examples/analyze-bundles/next.config.js b/examples/analyze-bundles/next.config.js
@@ -1,8 +1,8 @@
-/** @type {import('next').NextConfig} */
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 })
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {
   // any configs you need
 }

diff --git a/examples/blog-starter/tailwind.config.js b/examples/blog-starter/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./components/**/*.tsx', './pages/**/*.tsx'],
   theme: {

diff --git a/examples/blog-with-comment/tailwind.config.js b/examples/blog-with-comment/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   mode: 'jit',
   purge: ['./pages/**/*.js', './components/**/*.js'],

diff --git a/examples/blog/next.config.js b/examples/blog/next.config.js
@@ -1,10 +1,10 @@
-/** @type {import('next').NextConfig} */
 const withNextra = require('nextra')({
   theme: 'nextra-theme-blog',
   themeConfig: './theme.config.js',
   // optional: add `unstable_staticImage: true` to enable Nextra's auto image import
 })
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {
   // any configs you need
 }

diff --git a/examples/cms-agilitycms/tailwind.config.js b/examples/cms-agilitycms/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-builder-io/next.config.js b/examples/cms-builder-io/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   images: {
     domains: ['cdn.builder.io'],

diff --git a/examples/cms-builder-io/tailwind.config.js b/examples/cms-builder-io/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./components/**/*.js', './pages/**/*.js'],
   theme: {

diff --git a/examples/cms-buttercms/next.config.js b/examples/cms-buttercms/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
   async rewrites() {

diff --git a/examples/cms-contentful/next.config.js b/examples/cms-contentful/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   images: {
     loader: 'custom',

diff --git a/examples/cms-contentful/tailwind.config.js b/examples/cms-contentful/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-cosmic/next.config.js b/examples/cms-cosmic/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   images: {
     domains: ['imgix.cosmicjs.com'],

diff --git a/examples/cms-cosmic/tailwind.config.js b/examples/cms-cosmic/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-datocms/next.config.js b/examples/cms-datocms/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   images: {
     domains: ['www.datocms-assets.com'],

diff --git a/examples/cms-datocms/tailwind.config.js b/examples/cms-datocms/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-drupal/next.config.js b/examples/cms-drupal/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   images: {
     domains: [process.env.NEXT_IMAGE_DOMAIN],

diff --git a/examples/cms-drupal/tailwind.config.js b/examples/cms-drupal/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-ghost/next.config.js b/examples/cms-ghost/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   images: {
     domains: ['static.ghost.org'],

diff --git a/examples/cms-ghost/tailwind.config.js b/examples/cms-ghost/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-graphcms/next.config.js b/examples/cms-graphcms/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   images: {
     domains: ['media.graphcms.com'],

diff --git a/examples/cms-graphcms/tailwind.config.js b/examples/cms-graphcms/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-kontent/tailwind.config.js b/examples/cms-kontent/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-prepr/next.config.js b/examples/cms-prepr/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   images: {
     domains: ['b-cdn.net'],

diff --git a/examples/cms-prepr/tailwind.config.js b/examples/cms-prepr/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-prismic/next.config.js b/examples/cms-prismic/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   images: {
     domains: ['images.prismic.io'],

diff --git a/examples/cms-prismic/tailwind.config.js b/examples/cms-prismic/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-sanity/next.config.js b/examples/cms-sanity/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   experimental: {
     images: {

diff --git a/examples/cms-sanity/tailwind.config.js b/examples/cms-sanity/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-storyblok/tailwind.config.js b/examples/cms-storyblok/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-strapi/next.config.js b/examples/cms-strapi/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   images: {
     domains: ['localhost'],

diff --git a/examples/cms-strapi/tailwind.config.js b/examples/cms-strapi/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-takeshape/tailwind.config.js b/examples/cms-takeshape/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-tina/tailwind.config.js b/examples/cms-tina/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./components/**/*.js', './pages/**/*.js'],
   theme: {

diff --git a/examples/cms-umbraco-heartcore/next.config.js b/examples/cms-umbraco-heartcore/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   images: {
     domains: ['media.umbraco.io'],

diff --git a/examples/cms-umbraco-heartcore/tailwind.config.js b/examples/cms-umbraco-heartcore/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/cms-wordpress/next.config.js b/examples/cms-wordpress/next.config.js
@@ -5,6 +5,7 @@ if (!process.env.WORDPRESS_API_URL) {
   `)
 }
 
+/** @type {import('next').NextConfig} */
 module.exports = {
   images: {
     domains: [

diff --git a/examples/cms-wordpress/tailwind.config.js b/examples/cms-wordpress/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/github-pages/next.config.js b/examples/github-pages/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   basePath: '/gh-pages-test',
 }
diff --git a/examples/headers/next.config.js b/examples/headers/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   async headers() {
     return [

diff --git a/examples/i18n-routing/next.config.js b/examples/i18n-routing/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   i18n: {
     locales: ['en', 'fr', 'nl'],

diff --git a/examples/image-component/next.config.js b/examples/image-component/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   images: {
     domains: ['assets.vercel.com'],

diff --git a/examples/modularize-imports/next.config.js b/examples/modularize-imports/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   experimental: {
     modularizeImports: {

diff --git a/examples/react-remove-properties/next.config.js b/examples/react-remove-properties/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   experimental: {
     reactRemoveProperties: true,

diff --git a/examples/redirects/next.config.js b/examples/redirects/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   // Uncomment the line below to enable basePath, pages and
   // redirects will then have a path prefix (`/app` in this case)

diff --git a/examples/remove-console/next.config.js b/examples/remove-console/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   experimental: {
     removeConsole: {

diff --git a/examples/reproduction-template/next.config.js b/examples/reproduction-template/next.config.js
@@ -1,6 +1,4 @@
 /** @type {import("next").NextConfig} */
-const config = {
+module.exports = {
   reactStrictMode: true,
 }
-
-module.exports = config
diff --git a/examples/rewrites/next.config.js b/examples/rewrites/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   async rewrites() {
     return [

diff --git a/examples/with-compiled-css/next.config.js b/examples/with-compiled-css/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   webpack: (config) => {
     config.module.rules.push({

diff --git a/examples/with-docker-multi-env/next.config.js b/examples/with-docker-multi-env/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   output: 'standalone',
 }
diff --git a/examples/with-docker/next.config.js b/examples/with-docker/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   output: 'standalone',
 }
diff --git a/examples/with-firebase-hosting/src/next.config.js b/examples/with-firebase-hosting/src/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   distDir: '../.next',
 }
diff --git a/examples/with-http2/next.config.js b/examples/with-http2/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   /*  this needs to be set to false until a bug in the compression npm module gets fixed. 
 reference: https://github.com/expressjs/compression/issues/122

diff --git a/examples/with-i18n-next-intl/next.config.js b/examples/with-i18n-next-intl/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   i18n: {
     locales: ['en', 'de'],

diff --git a/examples/with-ionic-typescript/next.config.js b/examples/with-ionic-typescript/next.config.js
@@ -1,5 +1,7 @@
 const path = require('path')
 const CopyPlugin = require('copy-webpack-plugin')
+
+/** @type {import('next').NextConfig} */
 module.exports = {
   webpack: (config) => {
     config.plugins.push(

diff --git a/examples/with-lingui/next.config.js b/examples/with-lingui/next.config.js
@@ -1,5 +1,6 @@
 const { locales, sourceLocale } = require('./lingui.config.js')
 
+/** @type {import('next').NextConfig} */
 module.exports = {
   i18n: {
     locales,

diff --git a/examples/with-mysql/next.config.js b/examples/with-mysql/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
 }
diff --git a/examples/with-mysql/tailwind.config.js b/examples/with-mysql/tailwind.config.js
@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',

diff --git a/examples/with-netlify-cms/next.config.js b/examples/with-netlify-cms/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   webpack: (configuration) => {
     configuration.module.rules.push({

diff --git a/examples/with-react-native-web/next.config.js b/examples/with-react-native-web/next.config.js
@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   webpack: (config) => {
     config.resolve.alias = {