Merge branch 'canary' into fix-parse-relative-url

docs/migrating/from-gatsby.md

@@ -60,13 +60,33 @@ With Gatsby, global CSS imports are included in `gatsby-browser.js`. With Next,
 
 ## Links
 
-The Gatsby `Link` and Next.js [`Link`](/docs/api-reference/next/link.md) component have a slightly different API. First, you will need to update any import statements referencing `Link` from Gatsby to:
+The Gatsby `Link` and Next.js [`Link`](/docs/api-reference/next/link.md) component have a slightly different API.
+
+```jsx
+// Gatsby
+
+import { Link } from 'gatsby'
+
+export default function Home() {
+  return <Link to="/blog">blog</Link>
+}
+```
+
+```jsx
+// Next.js
 
-```js
 import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <Link href="/blog">
+      <a>blog</a>
+    </Link>
+  )
+}
 ```
 
-Next, you can find and replace usages of `to="/route"` with `href="/route"`.
+Update any import statements, switch `to` to `href`, and add an `<a>` tag as a child of the element.
 
 ## Data Fetching
 
@@ -145,6 +165,45 @@ export function getAllPosts() {
 }
 ```
 
+## Image Component and Image Optimization
+
+Since version **10.0.0**, Next.js has a built-in [Image Component and Automatic Image Optimization](/docs/basic-features/image-optimization.md).
+
+The Next.js Image Component, [`next/image`](/docs/api-reference/next/image.md), is an extension of the HTML `<img>` element, evolved for the modern web.
+
+The Automatic Image Optimization allows for resizing, optimizing, and serving images in modern formats like [WebP](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats.
+
+### Migrating from Gatsby Image
+
+Instead of optimizing images at build time, Next.js optimizes images on-demand, as users request them. Unlike static site generators and static-only solutions, your build times aren't increased, whether shipping 10 images or 10 million images.
+
+This means you can remove common Gatsby plugins like:
+
+- `gatsby-image`
+- `gatsby-transformer-sharp`
+- `gatsby-plugin-sharp`
+
+Instead, use the built-in [`next/image`](/docs/api-reference/next/image.md) component and [Automatic Image Optimization](/docs/basic-features/image-optimization.md).
+
+```jsx
+import Image from 'next/image'
+
+export default function Home() {
+  return (
+    <>
+      <h1>My Homepage</h1>
+      <Image
+        src="/me.png"
+        alt="Picture of the author"
+        width={500}
+        height={500}
+      />
+      <p>Welcome to my homepage!</p>
+    </>
+  )
+}
+```
+
 ## Site Configuration
 
 With Gatsby, your site's metadata (name, description, etc) is located inside `gatsby-config.js`. This is then exposed through the GraphQL API and consumed through a `pageQuery` or a static query inside a component.

examples/with-next-translate/_pages/index.js

@@ -1,4 +1,4 @@
-import Link from 'next-translate/Link'
+import Link from 'next/link'
 import Trans from 'next-translate/Trans'
 import useTranslation from 'next-translate/useTranslation'
 import Layout from '../components/Layout'
@@ -22,14 +22,14 @@ export default function Home() {
         </p>
 
         <div className="grid">
-          <Link href="/" lang="en">
+          <Link href="/" locale="en">
             <div className="card">
               <h3>{t('home:english')}</h3>
               <p>{t('home:change-english')}</p>
             </div>
           </Link>
 
-          <Link href="/" lang="ca">
+          <Link href="/" locale="ca">
             <div className="card">
               <h3>{t('home:catalan')}</h3>
               <p>{t('home:change-catalan')}</p>

examples/with-next-translate/i18n.json

@@ -1,6 +1,6 @@
 {
-  "allLanguages": ["en", "ca"],
-  "defaultLanguage": "en",
+  "locales": ["en", "ca"],
+  "defaultLocale": "en",
   "currentPagesDir": "_pages",
   "finalPagesDir": "pages",
   "localesPath": "locales",

examples/with-next-translate/next.config.js

@@ -0,0 +1,8 @@
+const { locales, defaultLocale } = require('./i18n.json')
+
+module.exports = {
+  i18n: {
+    locales,
+    defaultLocale,
+  },
+}

examples/with-next-translate/package.json

@@ -6,10 +6,10 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "9.4.4",
-    "next-translate": "0.16.1",
-    "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "next": "10.0.0",
+    "next-translate": "0.19.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
   },
   "license": "MIT"
 }

packages/next-plugin-storybook/preset.js

@@ -15,6 +15,7 @@ async function webpackFinal(config) {
     target: 'server',
     config: nextConfig,
     buildId: 'storybook',
+    rewrites: [],
   })
 
   config.plugins = [...config.plugins, ...nextWebpackConfig.plugins]