From 4620dcc7595358c1b604eeeb33e74e250d6c56f8 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Tue, 3 Nov 2020 08:44:12 -0600 Subject: [PATCH 1/3] Update Gatsby migration guide to include next/image. (#18741) Updates https://nextjs.org/docs/migrating/from-gatsby to mention the new `next/image` component released in Next.js 10. --- docs/migrating/from-gatsby.md | 65 +++++++++++++++++++++++++++++++++-- 1 file changed, 62 insertions(+), 3 deletions(-) diff --git a/docs/migrating/from-gatsby.md b/docs/migrating/from-gatsby.md index 79d59c6b1c2c7..4601a7850ad8f 100644 --- a/docs/migrating/from-gatsby.md +++ b/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 blog +} +``` + +```jsx +// Next.js -```js import Link from 'next/link' + +export default function Home() { + return ( + + blog + + ) +} ``` -Next, you can find and replace usages of `to="/route"` with `href="/route"`. +Update any import statements, switch `to` to `href`, and add an `` 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 `` 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 ( + <> +

My Homepage

+ Picture of the author +

Welcome to my homepage!

+ + ) +} +``` + ## 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. From 44ea598f8872962526c0a550b8d58a7c424cbbdd Mon Sep 17 00:00:00 2001 From: Aral Roca Gomez Date: Tue, 3 Nov 2020 15:48:26 +0100 Subject: [PATCH 2/3] Update next-translate example to support Next 10 with i18n routing (#18480) Co-authored-by: Joe Haddad --- examples/with-next-translate/_pages/index.js | 6 +++--- examples/with-next-translate/i18n.json | 4 ++-- examples/with-next-translate/next.config.js | 8 ++++++++ examples/with-next-translate/package.json | 8 ++++---- 4 files changed, 17 insertions(+), 9 deletions(-) create mode 100644 examples/with-next-translate/next.config.js diff --git a/examples/with-next-translate/_pages/index.js b/examples/with-next-translate/_pages/index.js index d523b5e3500cc..95e5bc831cb2e 100644 --- a/examples/with-next-translate/_pages/index.js +++ b/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() {

- +

{t('home:english')}

{t('home:change-english')}

- +

{t('home:catalan')}

{t('home:change-catalan')}

diff --git a/examples/with-next-translate/i18n.json b/examples/with-next-translate/i18n.json index ddcf1b31fd6e0..203c87de82968 100644 --- a/examples/with-next-translate/i18n.json +++ b/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", diff --git a/examples/with-next-translate/next.config.js b/examples/with-next-translate/next.config.js new file mode 100644 index 0000000000000..35cc22eb4f6ca --- /dev/null +++ b/examples/with-next-translate/next.config.js @@ -0,0 +1,8 @@ +const { locales, defaultLocale } = require('./i18n.json') + +module.exports = { + i18n: { + locales, + defaultLocale, + }, +} diff --git a/examples/with-next-translate/package.json b/examples/with-next-translate/package.json index 93cc8bafb8d04..439b5880f2dea 100644 --- a/examples/with-next-translate/package.json +++ b/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" } From b87b2d46eacccc09cc81e37e7904427d4fcc990b Mon Sep 17 00:00:00 2001 From: Eric Burel Date: Tue, 3 Nov 2020 15:50:59 +0100 Subject: [PATCH 3/3] add rewrites in storybook preset (#18364) --- packages/next-plugin-storybook/preset.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/next-plugin-storybook/preset.js b/packages/next-plugin-storybook/preset.js index 83b84429c4721..57f3605ea321b 100644 --- a/packages/next-plugin-storybook/preset.js +++ b/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]