Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/canary' into patch-3
Browse files Browse the repository at this point in the history
  • Loading branch information
ijjk committed Jun 17, 2021
2 parents 4a6eba4 + 6fd207f commit ed8ee80
Show file tree
Hide file tree
Showing 12 changed files with 106 additions and 116 deletions.
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

0 comments on commit ed8ee80

Please sign in to comment.