Skip to content

Commit

Permalink
Merge branch 'canary' into i18n/gsp-default-locale
Browse files Browse the repository at this point in the history
  • Loading branch information
kodiakhq[bot] committed Oct 27, 2020
2 parents afdff44 + 11fce3a commit 2ab6e82
Show file tree
Hide file tree
Showing 65 changed files with 1,201 additions and 268 deletions.
7 changes: 7 additions & 0 deletions docs/advanced-features/module-path-aliases.md
Expand Up @@ -4,6 +4,13 @@ description: Configure module path aliases that allow you to remap certain impor

# Absolute Imports and Module path aliases

<details>
<summary><b>Examples</b></summary>
<ul>
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-absolute-imports">With env</a></li>
</ul>
</details>

Next.js automatically supports the `tsconfig.json` and `jsconfig.json` `"paths"` and `"baseUrl"` options since [Next.js 9.4](https://nextjs.org/blog/next-9-4).

> Note: `jsconfig.json` can be used when you don't use TypeScript
Expand Down
13 changes: 9 additions & 4 deletions docs/api-reference/next/image.md
@@ -1,5 +1,5 @@
---
description: Enable image optimization with the built-in Image component.
description: Enable Image Optimization with the built-in Image component.
---

# next/image
Expand Down Expand Up @@ -29,7 +29,12 @@ function Home() {
return (
<>
<h1>My Homepage</h1>
<Image src="/me.png" alt="me" width={200} height={200} />
<Image
src="/me.png"
alt="Picture of the author"
width={500}
height={500}
/>
<p>Welcome to my homepage!</p>
</>
)
Expand All @@ -48,6 +53,6 @@ export default Home
- `loading` - The loading behavior. When `lazy`, defer loading the image until it reaches a calculated distance from the viewport. When `eager`, load the image immediately. Default `lazy`. [More info](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)
- `priority` - When true, the image will be considered high priority and [preload](https://web.dev/preload-responsive-images/).
- `unoptimized` - When true, the source image will be served as-is instead of resizing and changing quality.
- `unsized` - When true, the `width` and `height` requirement can by bypassed. Should _not_ be used with `priority` or above-the-fold images.
- `unsized` - When true, the `width` and `height` requirement can by bypassed. Should _not_ be used with above-the-fold images. Should _not_ be used with `priority`.

Another other properties on the `<Image>` component be passed to the underlying `<img>` element.
All other properties on the `<Image>` component will be passed to the underlying `<img>` element.
49 changes: 28 additions & 21 deletions docs/basic-features/image-optimization.md
Expand Up @@ -2,7 +2,7 @@
description: Next.js supports built-in image optimization, as well as third party loaders for Imgix, Cloudinary, and more! Learn more here.
---

# Image Optimization
# Image Component and Image Optimization

<details open>
<summary><b>Examples</b></summary>
Expand All @@ -19,7 +19,7 @@ The Automatic Image Optimization allows for resizing, optimizing, and serving im

## Image Component

To add an image to your application, import the `next/image` component:
To add an image to your application, import the [`next/image`](/docs/api-reference/next/image.md) component:

```jsx
import Image from 'next/image'
Expand All @@ -31,8 +31,8 @@ function Home() {
<Image
src="/me.png"
alt="Picture of the author"
width={200}
height={200}
width={500}
height={500}
/>
<p>Welcome to my homepage!</p>
</>
Expand All @@ -44,19 +44,32 @@ export default Home

- `width` and `height` are required to prevent [Cumulative Layout Shift](https://web.dev/cls/), a [Core Web Vital](https://web.dev/vitals/) that Google is going to [use in their search ranking](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html)
- `width` and `height` are automatically responsive, unlike the HTML `<img>` element
- See [`next/image`](/docs/api-reference/next/image.md) for list of available props.

## Configuration

You can configure Image Optimization by using the `images` property in `next.config.js`.

### Sizes
### Device Sizes

You can specify a list of image widths to allow using the `sizes` property. Since images maintain their aspect ratio using the `width` and `height` attributes of the source image, there is no need to specify height in `next.config.js` – only the width. You can think of these as breakpoints.
You can specify a list of device width breakpoints using the `deviceSizes` property. Since images maintain their aspect ratio using the `width` and `height` attributes of the source image, there is no need to specify height in `next.config.js` – only the width. These values will be used by the browser to determine which size image should load.

```js
module.exports = {
images: {
sizes: [320, 420, 768, 1024, 1200],
deviceSizes: [320, 420, 768, 1024, 1200],
},
}
```

### Icon Sizes

You can specify a list of icon image widths using the `iconSizes` property. These widths should be smaller than the smallest value in `deviceSizes`. The purpose is for images that don't scale with the browser window, such as icons or badges. If `iconSizes` is not defined, then `deviceSizes` will be used.

```js
module.exports = {
images: {
iconSizes: [16, 32, 64],
},
}
```
Expand Down Expand Up @@ -89,25 +102,19 @@ module.exports = {

The following Image Optimization cloud providers are supported:

- Imgix: `loader: 'imgix'`
- Cloudinary: `loader: 'cloudinary'`
- Akamai: `loader: 'akamai'`
- Vercel: No configuration necessary
- When using `next start` or a custom server image optimization works automatically.
- [Vercel](https://vercel.com): Works automatically when you deploy on Vercel
- [Imgix](https://www.imgix.com): `loader: 'imgix'`
- [Cloudinary](https://cloudinary.com): `loader: 'cloudinary'`
- [Akamai](https://www.akamai.com): `loader: 'akamai'`

## Related

For more information on what to do next, we recommend the following sections:

<div class="card">
<a href="/docs/basic-features/built-in-css-support.md">
<b>CSS Support:</b>
<small>Use the built-in CSS support to add custom styles to your app.</small>
<a href="/docs/api-reference/next/image.md">
<b>next/image</b>
<small>See all available properties for the Image component</small>
</a>
</div>

<div class="card">
- When using `next start` or a custom server image optimization works automatically.
- [Vercel](https://vercel.com): Works automatically when you deploy on Vercel
- [Imgix](https://www.imgix.com): `loader: 'imgix'`
- [Cloudinary](https://cloudinary.com): `loader: 'cloudinary'`
- [Akamai](https://www.akamai.com): `loader: 'akamai'`
12 changes: 12 additions & 0 deletions docs/manifest.json
Expand Up @@ -21,6 +21,10 @@
"title": "Built-in CSS Support",
"path": "/docs/basic-features/built-in-css-support.md"
},
{
"title": "Image Optimization",
"path": "/docs/basic-features/image-optimization.md"
},
{
"title": "Fast Refresh",
"path": "/docs/basic-features/fast-refresh.md"
Expand Down Expand Up @@ -180,6 +184,10 @@
{
"title": "Codemods",
"path": "/docs/advanced-features/codemods.md"
},
{
"title": "Internationalized Routing",
"path": "/docs/advanced-features/i18n-routing.md"
}
]
},
Expand Down Expand Up @@ -216,6 +224,10 @@
"title": "next/link",
"path": "/docs/api-reference/next/link.md"
},
{
"title": "next/image",
"path": "/docs/api-reference/next/image.md"
},
{
"title": "next/head",
"path": "/docs/api-reference/next/head.md"
Expand Down
34 changes: 34 additions & 0 deletions examples/i18n-routing/.gitignore
@@ -0,0 +1,34 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel
23 changes: 23 additions & 0 deletions examples/i18n-routing/README.md
@@ -0,0 +1,23 @@
# Internationalized Routing

This example shows how to create internationalized pages using Next.js and the i18n routing feature. It shows a normal page, a non-dynamic `getStaticProps` page, a dynamic `getStaticProps` page, and a `getServerSideProps` page.

For further documentation on this feature see the documentation [here](https://nextjs.org/docs/advanced-features/i18n-routing)

## Deploy your own

Deploy the example using [Vercel](https://vercel.com):

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/amp)

## How to use

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:

```bash
npx create-next-app --example i18n-routing i18n-app
# or
yarn create next-app --example i18n-routing i18n-app
```

Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
6 changes: 6 additions & 0 deletions examples/i18n-routing/next.config.js
@@ -0,0 +1,6 @@
module.exports = {
i18n: {
locales: ['en', 'fr', 'nl'],
defaultLocale: 'en',
},
}
15 changes: 15 additions & 0 deletions examples/i18n-routing/package.json
@@ -0,0 +1,15 @@
{
"name": "i18n-routing",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
"license": "MIT"
}
59 changes: 59 additions & 0 deletions examples/i18n-routing/pages/gsp/[slug].js
@@ -0,0 +1,59 @@
import Link from 'next/link'
import { useRouter } from 'next/router'

export default function GspPage(props) {
const router = useRouter()
const { defaultLocale, isFallback, query } = router

if (isFallback) {
return 'Loading...'
}

return (
<div>
<h1>getServerSideProps page</h1>
<p>Current slug: {query.slug}</p>
<p>Current locale: {props.locale}</p>
<p>Default locale: {defaultLocale}</p>
<p>Configured locales: {JSON.stringify(props.locales)}</p>

<Link href="/gsp">
<a>To getStaticProps page</a>
</Link>
<br />

<Link href="/gssp">
<a>To getServerSideProps page</a>
</Link>
<br />

<Link href="/">
<a>To index page</a>
</Link>
<br />
</div>
)
}

export const getStaticProps = ({ locale, locales }) => {
return {
props: {
locale,
locales,
},
}
}

export const getStaticPaths = ({ locales }) => {
const paths = []

for (const locale of locales) {
paths.push({ params: { slug: 'first' }, locale })
paths.push({ params: { slug: 'second' }, locale })
}

return {
paths,
fallback: true,
}
}
40 changes: 40 additions & 0 deletions examples/i18n-routing/pages/gsp/index.js
@@ -0,0 +1,40 @@
import Link from 'next/link'
import { useRouter } from 'next/router'

export default function GspPage(props) {
const router = useRouter()
const { defaultLocale } = router

return (
<div>
<h1>getServerSideProps page</h1>
<p>Current locale: {props.locale}</p>
<p>Default locale: {defaultLocale}</p>
<p>Configured locales: {JSON.stringify(props.locales)}</p>

<Link href="/gsp/first">
<a>To dynamic getStaticProps page</a>
</Link>
<br />

<Link href="/gssp">
<a>To getServerSideProps page</a>
</Link>
<br />

<Link href="/">
<a>To index page</a>
</Link>
<br />
</div>
)
}

export const getStaticProps = ({ locale, locales }) => {
return {
props: {
locale,
locales,
},
}
}
40 changes: 40 additions & 0 deletions examples/i18n-routing/pages/gssp.js
@@ -0,0 +1,40 @@
import Link from 'next/link'
import { useRouter } from 'next/router'

export default function GsspPage(props) {
const router = useRouter()
const { defaultLocale } = router

return (
<div>
<h1>getServerSideProps page</h1>
<p>Current locale: {props.locale}</p>
<p>Default locale: {defaultLocale}</p>
<p>Configured locales: {JSON.stringify(props.locales)}</p>

<Link href="/gsp">
<a>To getStaticProps page</a>
</Link>
<br />

<Link href="/gsp/first">
<a>To dynamic getStaticProps page</a>
</Link>
<br />

<Link href="/">
<a>To index page</a>
</Link>
<br />
</div>
)
}

export const getServerSideProps = ({ locale, locales }) => {
return {
props: {
locale,
locales,
},
}
}

0 comments on commit 2ab6e82

Please sign in to comment.