Merge branch 'canary' into canary

.github/labeler.json

@@ -24,6 +24,7 @@
       { "type": "user", "pattern": "shuding" },
       { "type": "user", "pattern": "sokra" },
       { "type": "user", "pattern": "styfle" },
+      { "type": "user", "pattern": "leerob" },
       { "type": "user", "pattern": "timneutkens" }
     ]
   }

docs/basic-features/data-fetching.md

@@ -185,9 +185,11 @@ You should use `getStaticProps` if:
 For TypeScript, you can use the `GetStaticProps` type from `next`:
 
 ```ts
-import { GetStaticProps } from 'next'
+import { GetStaticProps, GetStaticPropsContext } from 'next'
 
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async (
+  context: GetStaticPropsContext
+) => {
   // ...
 }
 ```

docs/basic-features/image-optimization.md

@@ -121,7 +121,7 @@ The following Image Optimization cloud providers are included:
 - [Imgix](https://www.imgix.com): `loader: 'imgix'`
 - [Cloudinary](https://cloudinary.com): `loader: 'cloudinary'`
 - [Akamai](https://www.akamai.com): `loader: 'akamai'`
-- dangerously-unoptimized: uses image directly from `src` prop without optimization (only needed with `next export` or when the built-in `_next/image` optimizer can not be leveraged) `loader: 'dangerously-unoptimized'`
+- Custom: `loader: 'custom'` use a custom cloud provider by implementing the [`loader`](/docs/api-reference/next/image.md#loader) prop on the `next/image` component
 - Default: Works automatically with `next dev`, `next start`, or a custom server
 
 If you need a different provider, you can use the [`loader`](/docs/api-reference/next/image.md#loader) prop with `next/image`.

docs/migrating/from-create-react-app.md

@@ -199,7 +199,7 @@ export default function SEO({ description, title, siteTitle }) {
 
 ## Single-Page App (SPA)
 
-If you want to move your existing Create React App to Next.js and keep a Single-Page App, you can move your old application's entry point to an [Optional Catch-All Route](/docs/routing/dynamic-routes.md#optional-catch-all-routes) named `pages/[[…app]].js`.
+If you want to move your existing Create React App to Next.js and keep a Single-Page App, you can move your old application's entry point to an [Optional Catch-All Route](/docs/routing/dynamic-routes.md#optional-catch-all-routes) named `pages/[[...app]].js`.
 
 ```jsx
 // pages/[[...app]].js

errors/manifest.json

@@ -249,6 +249,14 @@
           "title": "next-head-count-missing",
           "path": "/errors/next-head-count-missing.md"
         },
+        {
+          "title": "next-image-missing-loader",
+          "path": "/errors/next-image-missing-loader.md"
+        },
+        {
+          "title": "next-image-missing-loader-width",
+          "path": "/errors/next-image-missing-loader-width.md"
+        },
         {
           "title": "next-image-unconfigured-host",
           "path": "/errors/next-image-unconfigured-host.md"

errors/next-image-missing-loader-width.md

@@ -0,0 +1,17 @@
+# Missing `width` in the URL Returned by the Loader Prop on `next/image`
+
+#### Why This Error Occurred
+
+The [`loader`](https://nextjs.org/docs/api-reference/next/image#loader) prop on the `next/image` component allows you to override the built-in URL resolution with a custom implementation in order to support any 3rd party cloud provider that can perform Image Optimization.
+
+This error occurred because the provided `loader()` function did not use `width` in the returned URL string. This means that the image will likely not be resized and therefore degrade performance.
+
+#### Possible Ways to Fix It
+
+- Ensure your Image Optimization provider can resize images. Then use the `width` parameter from the [`loader()`](https://nextjs.org/docs/api-reference/next/image#loader) function to construct the correct URL string.
+- Add the [`unoptimized`](https://nextjs.org/docs/api-reference/next/image#unoptimized) prop.
+
+### Useful Links
+
+- [Image Optimization Documentation](https://nextjs.org/docs/basic-features/image-optimization)
+- [`next/image` Documentation](https://nextjs.org/docs/api-reference/next/image)

errors/next-image-missing-loader.md

@@ -0,0 +1,15 @@
+# Missing `loader` Prop on `next/image`
+
+#### Why This Error Occurred
+
+When using the `next/image` component with [`loader="custom"`](https://nextjs.org/docs/basic-features/image-optimization#loader) in `next.config.js`, you must provide the [`loader`](https://nextjs.org/docs/api-reference/next/image#loader) prop to the component with your custom implementation.
+
+#### Possible Ways to Fix It
+
+- Add the [`loader`](https://nextjs.org/docs/api-reference/next/image#loader) prop to all usages of the `next/image` component.
+- Change the [`loader`](https://nextjs.org/docs/basic-features/image-optimization#loader) configuration in `next.config.js`.
+
+### Useful Links
+
+- [Image Optimization Documentation](https://nextjs.org/docs/basic-features/image-optimization)
+- [`next/image` Documentation](https://nextjs.org/docs/api-reference/next/image)

examples/cms-agilitycms/components/avatar.js

@@ -1,11 +1,16 @@
+import Image from 'next/image'
+
 export default function Avatar({ name, picture }) {
   return (
     <div className="flex items-center">
-      <img
-        src={picture.url}
-        className="w-12 h-12 rounded-full mr-4"
-        alt={name}
-      />
+      <div className="w-12 h-12 relative mr-4">
+        <Image
+          src={picture.url}
+          layout="fill"
+          className="rounded-full"
+          alt={name}
+        />
+      </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
   )

examples/cms-agilitycms/components/cover-image.js

@@ -1,4 +1,3 @@
-//import { Image } from 'react-datocms'
 import Image from '../lib/components/image'
 import cn from 'classnames'
 import Link from 'next/link'
@@ -17,7 +16,7 @@ export default function CoverImage({ title, responsiveImage, slug }) {
   return (
     <div className="sm:mx-0">
       {slug ? (
-        <Link href="/[...slug]" as={`/posts/${slug}`}>
+        <Link href={`/posts/${slug}`}>
           <a aria-label={title}>{image}</a>
         </Link>
       ) : (

examples/cms-agilitycms/components/hero-post.js

@@ -23,7 +23,7 @@ export default function HeroPost({
       <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
-            <Link href="/[...slug]" as={`/posts/${slug}`}>
+            <Link href={`/posts/${slug}`}>
               <a className="hover:underline">{title}</a>
             </Link>
           </h3>

examples/cms-agilitycms/components/post-preview.js

@@ -21,7 +21,7 @@ export default function PostPreview({
         />
       </div>
       <h3 className="text-3xl mb-3 leading-snug">
-        <Link href="/[...slug]" as={`/posts/${slug}`}>
+        <Link href={`/posts/${slug}`}>
           <a className="hover:underline">{title}</a>
         </Link>
       </h3>

examples/cms-agilitycms/lib/components/image.js

@@ -1,39 +1,5 @@
 import React, { useCallback, useState } from 'react'
 import { useInView } from 'react-intersection-observer'
-//  type ResponsiveImageType = {
-//   aspectRatio: number;
-//   base64?: string | null;
-//   height?: number | null;
-//   width: number;
-//   sizes?: string | null;
-//   src?: string | null;
-//   srcSet?: string | null;
-//   webpSrcSet?: string | null;
-//   bgColor?: string | null;
-//   alt?: string | null;
-//   title?: string | null;
-// };
-
-// type ImagePropTypes = {
-//   data: ResponsiveImageType;
-//   className?: string;
-//   pictureClassName?: string;
-//   fadeInDuration?: number;
-//   intersectionTreshold?: number;
-//   intersectionMargin?: string;
-//   lazyLoad?: boolean;
-//   style?: React.CSSProperties;
-//   pictureStyle?: React.CSSProperties;
-//   explicitWidth?: boolean;
-// };
-
-// type State = {
-//   lazyLoad: boolean;
-//   isSsr: boolean;
-//   isIntersectionObserverAvailable: boolean;
-//   inView: boolean;
-//   loaded: boolean;
-// };
 
 const imageAddStrategy = ({
   lazyLoad,

examples/cms-agilitycms/package.json

@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "@agility/content-fetch": "^0.8.1",
-    "classnames": "2.2.6",
-    "date-fns": "2.10.0",
+    "classnames": "2.3.1",
+    "date-fns": "2.22.1",
     "isomorphic-unfetch": "3.0.0",
     "next": "latest",
     "react": "^17.0.2",
@@ -20,9 +20,9 @@
     "remark-html": "10.0.0"
   },
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^2.1.0",
-    "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^1.2.0"
+    "autoprefixer": "10.2.6",
+    "postcss": "8.3.5",
+    "tailwindcss": "^2.2.4"
   },
   "license": "MIT"
 }

examples/cms-agilitycms/postcss.config.js

@@ -1,19 +1,8 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
 module.exports = {
-  plugins: [
-    'tailwindcss',
-    process.env.NODE_ENV === 'production'
-      ? [
-          '@fullhuman/postcss-purgecss',
-          {
-            content: [
-              './pages/**/*.{js,jsx,ts,tsx}',
-              './components/**/*.{js,jsx,ts,tsx}',
-            ],
-            defaultExtractor: (content) =>
-              content.match(/[\w-/:]+(?<!:)/g) || [],
-          },
-        ]
-      : undefined,
-    'postcss-preset-env',
-  ],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 }

examples/cms-agilitycms/tailwind.config.js

@@ -1,4 +1,7 @@
 module.exports = {
+  mode: 'jit',
+  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
       colors: {
@@ -29,4 +32,8 @@ module.exports = {
       },
     },
   },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
 }

examples/cms-buttercms/components/avatar.js

@@ -1,11 +1,16 @@
+import Image from 'next/image'
+
 export default function Avatar({ name, picture }) {
   return (
     <div className="flex items-center">
-      <img
-        src={picture}
-        className="w-12 h-12 rounded-full mr-4 grayscale"
-        alt={name}
-      />
+      <div className="w-12 h-12 relative mr-4">
+        <Image
+          src={picture}
+          layout="fill"
+          className="rounded-full"
+          alt={name}
+        />
+      </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
   )

examples/cms-buttercms/components/cover-image.js

@@ -1,16 +1,28 @@
+import Image from 'next/image'
 import Link from 'next/link'
+import cn from 'classnames'
 
 export default function CoverImage({ title, url, slug }) {
+  const image = (
+    <Image
+      width={2000}
+      height={1000}
+      alt={`Cover Image for ${title}`}
+      className={cn('shadow-small', {
+        'hover:shadow-medium transition-shadow duration-200': slug,
+      })}
+      src={url}
+    />
+  )
+
   return (
     <div className="sm:mx-0">
       {slug ? (
-        <Link as={`/posts/${slug}`} href="/posts/[slug]">
-          <a aria-label={title}>
-            <img src={url} alt={title} />
-          </a>
+        <Link href={`/posts/${slug}`}>
+          <a aria-label={title}>{image}</a>
         </Link>
       ) : (
-        <img src={url} alt={title} />
+        image
       )}
     </div>
   )

examples/cms-buttercms/components/hero-post.js

@@ -19,7 +19,7 @@ export default function HeroPost({
       <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
-            <Link as={`/posts/${slug}`} href="/posts/[slug]">
+            <Link href={`/posts/${slug}`}>
               <a className="hover:underline">{title}</a>
             </Link>
           </h3>

examples/cms-buttercms/components/post-preview.js

@@ -17,7 +17,7 @@ export default function PostPreview({
         <CoverImage slug={slug} title={title} url={coverImage} />
       </div>
       <h3 className="text-3xl mb-3 leading-snug">
-        <Link as={`/posts/${slug}`} href="/posts/[slug]">
+        <Link href={`/posts/${slug}`}>
           <a className="hover:underline">{title}</a>
         </Link>
       </h3>

examples/cms-buttercms/package.json

@@ -7,18 +7,17 @@
     "start": "next start"
   },
   "dependencies": {
-    "buttercms": "1.2.2",
-    "classnames": "2.2.6",
-    "date-fns": "2.14.0",
-    "isomorphic-unfetch": "3.0.0",
+    "buttercms": "1.2.7",
+    "classnames": "2.3.1",
+    "date-fns": "2.22.1",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "postcss-flexbugs-fixes": "4.2.1",
-    "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^1.4.6"
+    "autoprefixer": "10.2.6",
+    "postcss": "8.3.5",
+    "tailwindcss": "^2.2.4"
   },
   "license": "MIT"
 }

examples/cms-buttercms/postcss.config.js

@@ -1,18 +1,8 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
 module.exports = {
-  plugins: [
-    'tailwindcss',
-    'postcss-flexbugs-fixes',
-    [
-      'postcss-preset-env',
-      {
-        autoprefixer: {
-          flexbox: 'no-2009',
-        },
-        stage: 3,
-        features: {
-          'custom-properties': false,
-        },
-      },
-    ],
-  ],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 }

examples/cms-buttercms/tailwind.config.js

@@ -1,11 +1,9 @@
 module.exports = {
-  purge: ['./components/**/*.js', './pages/**/*.js'],
+  mode: 'jit',
+  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
-      fontFamily: {
-        sans:
-          '-apple-system, "Helvetica Neue", "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-      },
       colors: {
         'accent-1': '#FAFAFA',
         'accent-2': '#EAEAEA',
@@ -34,4 +32,8 @@ module.exports = {
       },
     },
   },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
 }