Skip to content

Commit

Permalink
Merge branch 'canary' into fix/update-runtime-hot-chunk-name
Browse files Browse the repository at this point in the history
  • Loading branch information
kodiakhq[bot] authored Jun 18, 2021
2 parents ff261d8 + 98acfaf commit c715d51
Show file tree
Hide file tree
Showing 69 changed files with 11,739 additions and 441 deletions.
3 changes: 1 addition & 2 deletions docs/api-reference/create-next-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,7 @@ yarn create next-app --typescript
- **--ts, --typescript** - Initialize as a TypeScript project.
- **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/master/examples) or a GitHub URL. The URL can use any branch and/or subdirectory.
- **--example-path [path-to-example]** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar`
- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend to run `yarn create next-app`
- **--typescript or --ts** - Creates the default template with TypeScript instead of JavaScript.
- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend running `yarn create next-app`

### Why use Create Next App?

Expand Down
4 changes: 3 additions & 1 deletion docs/api-reference/next/image.md
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,9 @@ Should only be used when the image is visible above the fold. Defaults to

A placeholder to use while the image is loading, possible values are `blur` or `empty`. Defaults to `empty`.

When `blur`, the [`blurDataURL`](#blurdataurl) property will be used as the placeholder. If `src` is an object from a static import and the imported image is jpg, png, or webp, then `blurDataURL` will automatically be populated. Otherwise you must provide the [`blurDataURL`](#blurdataurl) property.
When `blur`, the [`blurDataURL`](#blurdataurl) property will be used as the placeholder. If `src` is an object from a static import and the imported image is jpg, png, or webp, then `blurDataURL` will automatically be populated.

For dynamic images, you must provide the [`blurDataURL`](#blurdataurl) property. Solutions such as [Plaiceholder](https://github.com/joe-bell/plaiceholder) can help with `base64` generation.

When `empty`, there will be no placeholder while the image is loading, only empty space.

Expand Down
2 changes: 1 addition & 1 deletion docs/basic-features/image-optimization.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ function Home() {
}
```

For dynamic images you have to provide `width`, `height` and `blurDataURL` manually.
For dynamic or remote images, you'll have to provide [`width`](/docs/api-reference/next/image#width), [`height`](/docs/api-reference/next/image#height) and [`blurDataURL`](/docs/api-reference/next/image#blurdataurl) manually.

## Properties

Expand Down
2 changes: 1 addition & 1 deletion docs/basic-features/script.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function Home() {
<Head>
<script async src="https://www.google-analytics.com/analytics.js" />
</Head>
</Head>
</>
)
}

Expand Down
8 changes: 7 additions & 1 deletion docs/upgrading.md
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,13 @@ There were no breaking changes between version 9 and 10.
To upgrade run the following command:

```
npm install next@latest
npm install next@10
```

Or using `yarn`:

```
yarn add next@10
```

## Upgrading from version 8 to 9
Expand Down
4 changes: 2 additions & 2 deletions examples/api-routes-rate-limit/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
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 api-routes api-routes-rate-limit
npx create-next-app --example api-routes-rate-limit api-routes-rate-limit-app
# or
yarn create next-app --example api-routes api-routes-rate-limit
yarn create next-app --example api-routes-rate-limit api-routes-rate-limit-app
```

Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
6 changes: 6 additions & 0 deletions examples/with-lingui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@ It adds a webpack loader for the messages to avoid having to manually compile wh

The example also uses a Higher order Component which can be added to all pages which will be translated and that checks for a `?lang` query string switch the language. Next.js will dynamically load in the messages for the locale when navigating using a Next.js `<Link />` component.

## Preview

Preview the example live on [StackBlitz](http://stackblitz.com/):

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-lingui)

## Deploy your own

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
Expand Down
43 changes: 10 additions & 33 deletions examples/with-lingui/components/LangSwitcher.js
Original file line number Diff line number Diff line change
@@ -1,44 +1,21 @@
import Router from 'next/router'
import { I18n } from '@lingui/react'
import { t, Trans } from '@lingui/macro'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { t } from '@lingui/macro'

const availableLanguageNames = {
en: t`English`,
sv: t`Swedish`,
}
const availableLanguages = Object.keys(availableLanguageNames)

export default function LangSwitcher() {
function onSubmit(evt) {
evt.preventDefault()
Router.push({
pathname: window.location.pathname,
query: { lang: evt.currentTarget.lang.value },
})
}
const { locale, locales, route } = useRouter()
const otherLocale = locales?.find((cur) => cur !== locale)

return (
<I18n>
{({ i18n }) => (
<form onSubmit={onSubmit}>
<select
key={i18n.language}
name="lang"
defaultValue={availableLanguages.find(
(lang) => lang !== i18n.language
)}
>
{availableLanguages.map((lang) => (
<option key={lang} value={lang} disabled={i18n.language === lang}>
{i18n._(availableLanguageNames[lang])}
</option>
))}
</select>
<button>
<Trans>Switch language</Trans>
</button>
</form>
)}
</I18n>
<Link href={route} locale={otherLocale}>
<a style={{ display: 'block', marginBottom: '20px' }}>
{availableLanguageNames[otherLocale]}
</a>
</Link>
)
}
32 changes: 0 additions & 32 deletions examples/with-lingui/components/withLang.js

This file was deleted.

11 changes: 11 additions & 0 deletions examples/with-lingui/lingui.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
module.exports = {
locales: ['en', 'sv'],
sourceLocale: 'en',
catalogs: [
{
path: '<rootDir>/locale/{locale}/messages',
include: ['<rootDir>/'],
exclude: ['**/node_modules/**'],
},
],
}
12 changes: 6 additions & 6 deletions examples/with-lingui/locale/en/messages.po
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ msgstr ""
"Language-Team: \n"
"Plural-Forms: \n"

#: pages/two.js:9
msgid "Back home"
msgstr "Back home"

#: components/LangSwitcher.js:6
msgid "English"
msgstr "English"
Expand All @@ -21,18 +25,14 @@ msgstr "English"
msgid "Go to page 2"
msgstr "Go to page 2"

#: pages/index.js:8
#: pages/index.js:6
msgid "Hello World."
msgstr "Hello World. "

#: pages/two.js:8
#: pages/two.js:6
msgid "Page two."
msgstr "Page two."

#: components/LangSwitcher.js:7
msgid "Swedish"
msgstr "Swedish"

#: components/LangSwitcher.js:26
msgid "Switch language"
msgstr "Switch language"
13 changes: 6 additions & 7 deletions examples/with-lingui/locale/sv/messages.po
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ msgstr ""
"Language-Team: \n"
"Plural-Forms: \n"

#: pages/two.js:9
msgid "Back home"
msgstr "Tillbaka hem"

#: components/LangSwitcher.js:6
msgid "English"
msgstr "Engelska"
Expand All @@ -21,19 +25,14 @@ msgstr "Engelska"
msgid "Go to page 2"
msgstr "Gå till sida 2"

#: pages/index.js:8
#: pages/index.js:6
msgid "Hello World."
msgstr "Hej Världen. "

#: pages/two.js:8
#: pages/two.js:6
msgid "Page two."
msgstr "Sida två."

#: components/LangSwitcher.js:7
msgid "Swedish"
msgstr "Svenska"

#: components/LangSwitcher.js:26
msgid "Switch language"
msgstr "Byt Språk"

15 changes: 9 additions & 6 deletions examples/with-lingui/next.config.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
const { locales, sourceLocale } = require('./lingui.config.js')

module.exports = {
webpack: (config, options) => {
i18n: {
locales,
defaultLocale: sourceLocale,
},
webpack: (config) => {
config.module.rules.push({
test: /\.po/,
use: [
{
loader: '@lingui/loader',
},
],
use: ['@lingui/loader'],
})

return config
},
}
34 changes: 13 additions & 21 deletions examples/with-lingui/package.json
Original file line number Diff line number Diff line change
@@ -1,34 +1,26 @@
{
"name": "with-lingui",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"dev": "next",
"build": "lingui compile && next build",
"dev": "next dev",
"build": "next build",
"start": "next start",
"add-locale": "lingui add-locale",
"extract": "lingui extract"
"extract": "lingui extract",
"compile": "lingui compile"
},
"dependencies": {
"@lingui/react": "latest",
"@lingui/react": "^3.10.2",
"next": "latest",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@lingui/cli": "latest",
"@lingui/loader": "latest",
"@lingui/macro": "latest",
"babel-core": "^7.0.0-bridge.0",
"babel-plugin-macros": "^2.4.0"
},
"lingui": {
"sourceLocale": "en",
"localeDir": "./locale",
"srcPathDirs": [
"./pages/",
"./components/"
],
"format": "po"
},
"license": "MIT"
"@babel/core": "7.14.5",
"@lingui/cli": "^3.10.2",
"@lingui/core": "3.10.2",
"@lingui/loader": "3.10.2",
"@lingui/macro": "^3.10.2",
"babel-plugin-macros": "^3.1.0"
}
}
34 changes: 34 additions & 0 deletions examples/with-lingui/pages/_app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { useEffect } from 'react'

import { I18nProvider } from '@lingui/react'
import { i18n } from '@lingui/core'
import { useRouter } from 'next/router'
import { en, sv } from 'make-plural/plurals'
import LangSwitcher from '../components/LangSwitcher'

i18n.loadLocaleData('en', { plurals: en })
i18n.loadLocaleData('sv', { plurals: sv })

export default function Page({ Component, pageProps }) {
const { locale } = useRouter()

useEffect(() => {
async function load(locale) {
const { messages } = await import(`../locale/${locale}/messages.po`)

i18n.load(locale, messages)
i18n.activate(locale)
}

load(locale)
}, [locale])

return (
<I18nProvider i18n={i18n}>
<div>
<LangSwitcher />
<Component {...pageProps} />
</div>
</I18nProvider>
)
}
5 changes: 1 addition & 4 deletions examples/with-lingui/pages/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import Link from 'next/link'
import { Trans } from '@lingui/macro'
import withLang from '../components/withLang'
import LangSwitcher from '../components/LangSwitcher'

const Index = () => (
<div>
Expand All @@ -12,8 +10,7 @@ const Index = () => (
</a>
</Link>
<br />
<LangSwitcher />
</div>
)

export default withLang(Index)
export default Index
13 changes: 8 additions & 5 deletions examples/with-lingui/pages/two.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import { Trans } from '@lingui/macro'
import withLang from '../components/withLang'
import LangSwitcher from '../components/LangSwitcher'
import Link from 'next/link'

const Two = () => (
<div>
<Trans>Page two. </Trans>
<Trans>Page two.</Trans>{' '}
<Link href="/">
<a>
<Trans>Back home</Trans>
</a>
</Link>
<br />
<LangSwitcher />
</div>
)

export default withLang(Two)
export default Two
2 changes: 1 addition & 1 deletion lerna.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,5 @@
"registry": "https://registry.npmjs.org/"
}
},
"version": "11.0.1-canary.2"
"version": "11.0.1-canary.4"
}
Loading

0 comments on commit c715d51

Please sign in to comment.