(examples/with-lingui): update example (#26076)

Fixes one of the items from #25854

## Documentation / Examples

- [x] Make sure the linting passes
- [x] Add the StackBlitz button
- [x] [Live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/with-lingui-update/examples/with-lingui)

examples/with-lingui/README.md

@@ -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):

examples/with-lingui/components/LangSwitcher.js

@@ -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>
   )
 }

examples/with-lingui/lingui.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  locales: ['en', 'sv'],
+  sourceLocale: 'en',
+  catalogs: [
+    {
+      path: '<rootDir>/locale/{locale}/messages',
+      include: ['<rootDir>/'],
+      exclude: ['**/node_modules/**'],
+    },
+  ],
+}

examples/with-lingui/locale/en/messages.po

@@ -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"
@@ -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"

examples/with-lingui/locale/sv/messages.po

@@ -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"
@@ -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"
-

examples/with-lingui/next.config.js

@@ -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
   },
 }

examples/with-lingui/package.json

@@ -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"
+  }
 }

examples/with-lingui/pages/_app.js

@@ -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>
+  )
+}

examples/with-lingui/pages/index.js

@@ -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>
@@ -12,8 +10,7 @@ const Index = () => (
       </a>
     </Link>
     <br />
-    <LangSwitcher />
   </div>
 )
 
-export default withLang(Index)
+export default Index

examples/with-lingui/pages/two.js

@@ -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