Add next-i18next Example

next-i18next.config.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = {
+  i18n: {
+    locales: ['en', 'nl', 'no', 'es'],
+    defaultLocale: 'en',
+    defaultNS: 'CommonText',
+    localePath: path.resolve('./public/static/locales'),
+  },
+};

next.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const withPlugins = require('next-compose-plugins');
 const withBundleAnalyzer = require('@next/bundle-analyzer');
 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
+const { i18n } = require('./next-i18next.config');
 
 // https://medium.com/ne-digital/how-to-reduce-next-js-bundle-size-68f7ac70c375
 // https://medium.com/ne-digital/build-frontend-performance-monitor-dashboard-using-pagespeed-insights-e807a2caa6cf
@@ -15,6 +16,8 @@ module.exports = withPlugins(
   {
     reactStrictMode: true,
 
+    i18n,
+
     eslint: {
       dirs: ['src'],
     },

package.json

@@ -29,12 +29,17 @@
   "dependencies": {
     "axios": "0.21.1",
     "clsx": "1.1.1",
+    "luxon": "1.27.0",
     "next": "11.0.1",
+    "next-i18next": "8.5.1",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "semantic-ui-css": "2.4.1",
+    "semantic-ui-react": "2.0.3"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "10.2.3",
+    "@types/luxon": "1.27.0",
     "@types/react": "17.0.11",
     "duplicate-package-checker-webpack-plugin": "3.0.0",
     "eslint": "7.29.0",

public/static/locales/en/AboutPage.json

@@ -0,0 +1,3 @@
+{
+  "aboutMessage": "This is a demo application to show internationalization in Next.js."
+}

public/static/locales/en/CommonText.json

@@ -0,0 +1,5 @@
+{
+  "home": "Welcome",
+  "about": "About us",
+  "copyright": "copyright {{year}}"
+}

public/static/locales/en/IndexPage.json

@@ -0,0 +1,9 @@
+{
+  "welcomeMessage": "Hi, welcome!",
+  "nested": {
+    "one": "One It is",
+    "two": "Two There We Go"
+  },
+  "cartItems": "{{ count }} item in cart",
+  "cartItems_plural": "{{ count }} items in cart"
+}

public/static/locales/es/AboutPage.json

@@ -0,0 +1,3 @@
+{
+  "aboutMessage": "Esta es una aplicación para demostrar la internacionalización en Next.js."
+}

public/static/locales/es/CommonText.json

@@ -0,0 +1,5 @@
+{
+  "home": "Bienvenidos",
+  "about": "Sobre nosotros",
+  "copyright": "derechos de autor {{year}}"
+}

public/static/locales/es/IndexPage.json

@@ -0,0 +1,3 @@
+{
+  "welcomeMessage": "¡Hola, bienvenidos!"
+}

public/static/locales/nl/AboutPage.json

@@ -0,0 +1,3 @@
+{
+  "aboutMessage": "Dit is een demo-toepassing om vertalingen in Next.js te tonen."
+}

public/static/locales/nl/CommonText.json

@@ -0,0 +1,5 @@
+{
+  "home": "Welkom",
+  "about": "Over ons",
+  "copyright": "auteursrechten {{year}}"
+}

public/static/locales/nl/IndexPage.json

@@ -0,0 +1,3 @@
+{
+  "welcomeMessage": "Hoi, welkom!"
+}

public/static/locales/no/AboutPage.json

@@ -0,0 +1,3 @@
+{
+  "aboutMessage": "Dette er en demo applikasjon for å demonstrere internasjonalisering i Next.js."
+}

public/static/locales/no/CommonText.json

@@ -0,0 +1,5 @@
+{
+  "home": "Velkommen",
+  "about": "Om oss",
+  "copyright": "opphavsrett {{year}}"
+}

public/static/locales/no/IndexPage.json

@@ -0,0 +1,3 @@
+{
+  "welcomeMessage": "Hei, velkommen!"
+}

src/components/pages/about-page/AboutPage.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import Link from 'next/link';
-import { Routes } from '../../../constants/Routes';
+import { useTranslation } from 'next-i18next';
+import { Header } from 'semantic-ui-react';
 
 interface IProps {}
 
 export const AboutPage: React.FC<IProps> = (props) => {
+  const { t } = useTranslation(['CommonText', 'AboutPage']);
+
   return (
-    <div>
-      <h1>About</h1>
-      <p>This is the about page</p>
-      <p>
-        <Link href={Routes.Index}>
-          <a>Go home</a>
-        </Link>
-      </p>
-    </div>
+    <>
+      <Header as="h1">{t('CommonText:about')}</Header>
+      <div>{t('AboutPage:aboutMessage')}</div>
+    </>
   );
 };

src/components/pages/index-page/IndexPage.tsx

@@ -1,23 +1,20 @@
 import React from 'react';
-import Link from 'next/link';
-import { Routes } from '../../../constants/Routes';
+import { useTranslation } from 'next-i18next';
+import { Header } from 'semantic-ui-react';
 
 interface IProps {}
 
 export const IndexPage: React.FC<IProps> = (props) => {
+  const { t } = useTranslation(['CommonText', 'IndexPage']);
+
   return (
     <div>
-      <h1>
-        Hello Next.js{' '}
-        <span role="img" aria-label="hand waving">
-          👋
-        </span>
-      </h1>
-      <p>
-        <Link href={Routes.About}>
-          <a>About</a>
-        </Link>
-      </p>
+      <Header as="h1">{t('CommonText:home')}</Header>
+      <p>{t('IndexPage:welcomeMessage')}</p>
+      <p>{t('IndexPage:cartItems', { count: 1 })}</p>
+      <p>{t('IndexPage:cartItems', { count: 3 })}</p>
+      <p>{t('IndexPage:nested.one')}</p>
+      <p>{t('IndexPage:nested.two')}</p>
     </div>
   );
 };

src/components/shared/Currency.tsx

@@ -0,0 +1,17 @@
+import { Segment, Label } from 'semantic-ui-react';
+import React from 'react';
+import { formatCurrency } from '../../utils/number.utils';
+
+interface IProps {}
+
+export const Currency: React.FC<IProps> = (props) => {
+  return (
+    <Segment>
+      <Label content={formatCurrency(1000.234)} icon="currency outline" />
+    </Segment>
+  );
+};
+
+// Examples: $12.50; 12,50 €
+
+// Examples: $12.50 CAD; 12,50 € EUR

src/components/shared/CurrentDate.tsx

@@ -0,0 +1,40 @@
+import { Segment, Label } from 'semantic-ui-react';
+import { DateTime } from 'luxon';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+interface IProps {}
+
+export const CurrentDate: React.FC<IProps> = (props) => {
+  const router = useRouter();
+
+  const dateTime = DateTime.local()
+    .setLocale(router.locale!)
+    .setZone('utc')
+    .toLocaleString({
+      ...DateTime.DATETIME_HUGE,
+      timeZoneName: 'short',
+    });
+
+  return (
+    <Segment>
+      <Label content={dateTime} icon="clock outline" />
+    </Segment>
+  );
+};
+
+// Thursday, October 15, 2015
+// October 15, 2015
+// Oct 15, 2015
+
+/*
+https://www.shopify.com/partners/blog/liquid-date-format
+{{ article.published_at | date: format: 'default' }}
+<-- Tue, Apr 30, 2019, 6:55 am -0400 -->
+
+{{ article.published_at | date: format: 'short' }}
+<-- 30 Apr 06:55 -->
+
+{{ article.published_at | date: format: 'long' }}
+<-- April 30, 2019 06:55 -->
+*/

src/components/shared/Header.tsx

@@ -0,0 +1,34 @@
+import { Menu, Icon } from 'semantic-ui-react';
+import { LocalePicker } from './LocalePicker';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import { useTranslation } from 'next-i18next';
+import { Routes } from '../../constants/Routes';
+import { SemanticICONS } from 'semantic-ui-react/dist/commonjs/generic';
+import React from 'react';
+
+interface IProps {}
+
+export const Header: React.FC<IProps> = (props) => {
+  const { pathname } = useRouter();
+  const { t } = useTranslation(['CommonText']);
+
+  const buttons: { path: Routes; text: string; icon: SemanticICONS }[] = [
+    { path: Routes.Index, text: 'CommonText:home', icon: 'home' },
+    { path: Routes.About, text: 'CommonText:about', icon: 'question' },
+  ];
+
+  return (
+    <Menu inverted={true}>
+      {buttons.map((button) => (
+        <Link key={button.text} href={button.path} passHref={true}>
+          <Menu.Item active={pathname === button.path}>
+            <Icon name={button.icon} />
+            {t(button.text as any)}
+          </Menu.Item>
+        </Link>
+      ))}
+      <LocalePicker />
+    </Menu>
+  );
+};

src/components/shared/LocalePicker.tsx

@@ -0,0 +1,23 @@
+import { Menu, Flag, FlagNameValues } from 'semantic-ui-react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+interface IProps {}
+
+export const LocalePicker: React.FC<IProps> = (props) => {
+  const router = useRouter();
+
+  return (
+    <Menu.Menu position="right">
+      {router.locales!.map((locale) => (
+        <Link key={locale} href={router.asPath} locale={locale} passHref={true}>
+          <Menu.Item active={locale === router.locale} key={locale}>
+            <Flag name={(locale === 'en' ? 'us' : locale) as FlagNameValues} />
+            {` ${locale.toUpperCase()}`}
+          </Menu.Item>
+        </Link>
+      ))}
+    </Menu.Menu>
+  );
+};