- setCount(state => state + 1)}>
+ setCount((state) => state + 1)}>
Increment
- setCount(state => state - 1)}>
+ setCount((state) => state - 1)}>
Decrement
@@ -34,21 +46,24 @@ function App() {
one={"There's one book"}
other={"There are # books"}
/>
-
Date formatter example:
+
+ Date formatter example:
+
-
- Today is {i18n.date(new Date(), {})}
-
+ Today is {i18n.date(new Date(), {})}
-
Number formatter example:
+
+ Number formatter example:
+
- I have a balance of {i18n.number(1_000_000, { style: "currency", currency: "EUR" })}
+ I have a balance of{" "}
+ {i18n.number(1_000_000, { style: "currency", currency: "EUR" })}
- );
+ )
}
-export default App;
+export default App
diff --git a/examples/nextjs-swc/README.md b/examples/nextjs-swc/README.md
index 0eeda00f1..54d0e7c33 100644
--- a/examples/nextjs-swc/README.md
+++ b/examples/nextjs-swc/README.md
@@ -2,6 +2,13 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+## SWC Compatibility
+SWC Plugin support is still experimental. Semver backwards compatibility between different `next-swc` versions is not guaranteed.
+
+Therefore, you need to select an appropriate version of the Lingui plugin to match compatible `NextJs` version.
+
+For more information on compatibility, please refer to the [Compatibility section](https://github.com/lingui/swc-plugin#compatibility).
+
## Getting Started
First, run the development server:
diff --git a/examples/nextjs-swc/package.json b/examples/nextjs-swc/package.json
index 7294480a9..ad383211e 100644
--- a/examples/nextjs-swc/package.json
+++ b/examples/nextjs-swc/package.json
@@ -7,13 +7,13 @@
"debug": "NODE_OPTIONS='--inspect' next dev",
"build": "yarn lang:extract && next build",
"start": "next start",
- "lang:extract": "lingui extract --clean",
+ "lingui:extract": "lingui extract --clean",
"test": "yarn build"
},
"dependencies": {
"@lingui/core": "^4.1.2",
"@lingui/react": "^4.1.2",
- "next": "13.2.3",
+ "next": "13.3.1",
"react": "18.2.0",
"react-dom": "18.2.0"
},
diff --git a/examples/nextjs-swc/src/components/Developers.tsx b/examples/nextjs-swc/src/components/Developers.tsx
index 17c24e2e4..027f5bf4d 100644
--- a/examples/nextjs-swc/src/components/Developers.tsx
+++ b/examples/nextjs-swc/src/components/Developers.tsx
@@ -1,5 +1,5 @@
import { useState } from 'react'
-import { Trans, plural } from '@lingui/macro'
+import { Trans, Plural } from '@lingui/macro'
export default function Developers() {
const [selected, setSelected] = useState('1')
@@ -17,10 +17,7 @@ export default function Developers() {
diff --git a/examples/nextjs-swc/src/locales/en.po b/examples/nextjs-swc/src/locales/en.po
index ecaddcb52..8cf61f511 100644
--- a/examples/nextjs-swc/src/locales/en.po
+++ b/examples/nextjs-swc/src/locales/en.po
@@ -13,34 +13,35 @@ msgstr ""
"Language-Team: \n"
"Plural-Forms: \n"
-#: src/components/Switcher.tsx:14
+#: src/components/Developers.tsx:20
+msgid "{selected, plural, one {Developer} other {Developers}}"
+msgstr "{selected, plural, one {Developer} other {Developers}}"
+
+#: src/components/Switcher.tsx:10
msgid "English"
msgstr "English"
+#. js-lingui-explicit-id
+#: src/components/AboutText.tsx:6
+msgid "next-explanation"
+msgstr "Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React based web applications. It is a production-ready framework that allows developers to quickly create static and dynamic JAMstack websites and is used widely by many large companies."
+
#: src/components/Developers.tsx:9
msgid "Plural Test: How many developers?"
msgstr "Plural Test: How many developers?"
-#: src/components/Switcher.tsx:15
+#: src/components/Switcher.tsx:11
msgid "Serbian"
msgstr "Serbian"
-#: src/components/Switcher.tsx:16
+#: src/components/Switcher.tsx:12
msgid "Spanish"
msgstr "Spanish"
-#: src/pages/index.tsx:25
+#: src/pages/index.tsx:28
msgid "Translation Demo"
msgstr "Translation Demo"
-#: src/pages/index.tsx:32
+#: src/pages/index.tsx:35
msgid "Welcome to <0>Next.js!0>"
msgstr "Welcome to <0>Next.js!0>"
-
-#: src/components/AboutText.tsx:6
-msgid "next-explanation"
-msgstr "Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React based web applications. It is a production-ready framework that allows developers to quickly create static and dynamic JAMstack websites and is used widely by many large companies."
-
-#: src/components/Developers.tsx:20
-msgid "{selected, plural, one {Developer} other {Developers}}"
-msgstr "{selected, plural, one {Developer} other {Developers}}"
diff --git a/examples/nextjs-swc/src/locales/es.po b/examples/nextjs-swc/src/locales/es.po
index c63b92f21..663b3ddd0 100644
--- a/examples/nextjs-swc/src/locales/es.po
+++ b/examples/nextjs-swc/src/locales/es.po
@@ -13,34 +13,35 @@ msgstr ""
"Language-Team: \n"
"Plural-Forms: \n"
-#: src/components/Switcher.tsx:14
+#: src/components/Developers.tsx:20
+msgid "{selected, plural, one {Developer} other {Developers}}"
+msgstr "{selected, plural, one {Programador} other {Programadores}}"
+
+#: src/components/Switcher.tsx:10
msgid "English"
msgstr "Inglés"
+#. js-lingui-explicit-id
+#: src/components/AboutText.tsx:6
+msgid "next-explanation"
+msgstr "Next.js es un marco de trabajo web de desarrollo front-end de React de código abierto que permite funciones como la representación del lado del servidor y la generación de sitios web estáticos para aplicaciones web basadas en React. Es un marco listo para producción que permite a los desarrolladores crear rápidamente sitios web JAMstack estáticos y dinámicos y es ampliamente utilizado por muchas grandes empresas."
+
#: src/components/Developers.tsx:9
msgid "Plural Test: How many developers?"
msgstr "Prueba Plural: Cuantos programadores?"
-#: src/components/Switcher.tsx:15
+#: src/components/Switcher.tsx:11
msgid "Serbian"
msgstr "Serbio"
-#: src/components/Switcher.tsx:16
+#: src/components/Switcher.tsx:12
msgid "Spanish"
msgstr "Español"
-#: src/pages/index.tsx:25
+#: src/pages/index.tsx:28
msgid "Translation Demo"
msgstr "Demostración de Traducción"
-#: src/pages/index.tsx:32
+#: src/pages/index.tsx:35
msgid "Welcome to <0>Next.js!0>"
msgstr "Bienvenido a <0>Next.js!0>"
-
-#: src/components/AboutText.tsx:6
-msgid "next-explanation"
-msgstr "Next.js es un marco de trabajo web de desarrollo front-end de React de código abierto que permite funciones como la representación del lado del servidor y la generación de sitios web estáticos para aplicaciones web basadas en React. Es un marco listo para producción que permite a los desarrolladores crear rápidamente sitios web JAMstack estáticos y dinámicos y es ampliamente utilizado por muchas grandes empresas."
-
-#: src/components/Developers.tsx:20
-msgid "{selected, plural, one {Developer} other {Developers}}"
-msgstr "{selected, plural, one {Programador} other {Programadores}}"
diff --git a/examples/nextjs-swc/src/locales/pseudo.po b/examples/nextjs-swc/src/locales/pseudo.po
index 334742b49..c2158ba7a 100644
--- a/examples/nextjs-swc/src/locales/pseudo.po
+++ b/examples/nextjs-swc/src/locales/pseudo.po
@@ -13,34 +13,35 @@ msgstr ""
"Language-Team: \n"
"Plural-Forms: \n"
-#: src/components/Switcher.tsx:14
+#: src/components/Developers.tsx:20
+msgid "{selected, plural, one {Developer} other {Developers}}"
+msgstr ""
+
+#: src/components/Switcher.tsx:10
msgid "English"
msgstr ""
+#. js-lingui-explicit-id
+#: src/components/AboutText.tsx:6
+msgid "next-explanation"
+msgstr ""
+
#: src/components/Developers.tsx:9
msgid "Plural Test: How many developers?"
msgstr ""
-#: src/components/Switcher.tsx:15
+#: src/components/Switcher.tsx:11
msgid "Serbian"
msgstr ""
-#: src/components/Switcher.tsx:16
+#: src/components/Switcher.tsx:12
msgid "Spanish"
msgstr ""
-#: src/pages/index.tsx:25
+#: src/pages/index.tsx:28
msgid "Translation Demo"
msgstr ""
-#: src/pages/index.tsx:32
+#: src/pages/index.tsx:35
msgid "Welcome to <0>Next.js!0>"
msgstr ""
-
-#: src/components/AboutText.tsx:6
-msgid "next-explanation"
-msgstr ""
-
-#: src/components/Developers.tsx:20
-msgid "{selected, plural, one {Developer} other {Developers}}"
-msgstr ""
diff --git a/examples/nextjs-swc/src/locales/sr.po b/examples/nextjs-swc/src/locales/sr.po
index 3eb565a48..748509afa 100644
--- a/examples/nextjs-swc/src/locales/sr.po
+++ b/examples/nextjs-swc/src/locales/sr.po
@@ -13,34 +13,35 @@ msgstr ""
"Language-Team: \n"
"Plural-Forms: \n"
-#: src/components/Switcher.tsx:14
+#: src/components/Developers.tsx:20
+msgid "{selected, plural, one {Developer} other {Developers}}"
+msgstr "{selected, plural, one {Програмер} other {Програмера}}"
+
+#: src/components/Switcher.tsx:10
msgid "English"
msgstr "Енглески"
+#. js-lingui-explicit-id
+#: src/components/AboutText.tsx:6
+msgid "next-explanation"
+msgstr "Некст.јс је отворени изворни Реацт-ов развојни вебоквир који омогућава функционалност као што је приказивање на страни сервера и генерисање статичких веблокација за веб апликације засноване на Реацт-у."
+
#: src/components/Developers.tsx:9
msgid "Plural Test: How many developers?"
msgstr "Тест за Множину: Колико програмера?"
-#: src/components/Switcher.tsx:15
+#: src/components/Switcher.tsx:11
msgid "Serbian"
msgstr "Српски"
-#: src/components/Switcher.tsx:16
+#: src/components/Switcher.tsx:12
msgid "Spanish"
msgstr "Шпански"
-#: src/pages/index.tsx:25
+#: src/pages/index.tsx:28
msgid "Translation Demo"
msgstr "Демо Превод"
-#: src/pages/index.tsx:32
+#: src/pages/index.tsx:35
msgid "Welcome to <0>Next.js!0>"
msgstr "Добродошли у <0>Нект.јс!0>"
-
-#: src/components/AboutText.tsx:6
-msgid "next-explanation"
-msgstr "Некст.јс је отворени изворни Реацт-ов развојни вебоквир који омогућава функционалност као што је приказивање на страни сервера и генерисање статичких веблокација за веб апликације засноване на Реацт-у."
-
-#: src/components/Developers.tsx:20
-msgid "{selected, plural, one {Developer} other {Developers}}"
-msgstr "{selected, plural, one {Програмер} other {Програмера}}"
diff --git a/examples/nextjs-swc/src/pages/index.tsx b/examples/nextjs-swc/src/pages/index.tsx
index 9ead1d52b..21c3cc420 100644
--- a/examples/nextjs-swc/src/pages/index.tsx
+++ b/examples/nextjs-swc/src/pages/index.tsx
@@ -6,6 +6,7 @@ import Developers from '../components/Developers'
import { Switcher } from '../components/Switcher'
import styles from '../styles/Index.module.css'
import { loadCatalog } from '../utils'
+import { useLingui } from '@lingui/react'
export const getStaticProps: GetStaticProps = async (ctx) => {
const translation = await loadCatalog(ctx.locale!)
@@ -17,9 +18,20 @@ export const getStaticProps: GetStaticProps = async (ctx) => {
}
const Index: NextPage = () => {
+ /**
+ * This hook is needed to subscribe your
+ * component for changes if you use t`` macro
+ */
+ useLingui()
+
return (