feature: add i18n

ekaterinburgdev · Apr 2, 2023 · e9eba36 · e9eba36
1 parent b96047d
commit e9eba36
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 12 deletions.
diff --git a/next.config.js b/next.config.js
@@ -4,6 +4,10 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
+  i18n: {
+    locales: ["ru", "en"],
+    defaultLocale: "ru",
+  },
 };
 
 module.exports = nextConfig;
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "next": "13.2.4",
+    "next-intl": "^2.12.0",
     "postcss": "^8.4.21",
     "postcss-nesting": "^11.2.1",
     "react": "^18.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/header/Header.js b/src/components/header/Header.js
@@ -1,29 +1,29 @@
 import { useEffect } from "react";
+import { useTranslations } from "next-intl";
 import cn from "classnames";
 import styles from "./Header.module.css";
 import { initSmoothScroll } from "./smooth-scroll";
 
 export function Header() {
+  const t = useTranslations("Dev");
+
   useEffect(() => {
     initSmoothScroll();
   }, []);
 
   return (
     <header className={cn(styles.header)}>
       <div className={cn(styles.header__text)}>
-        <p data-id="header-text">
-          Это Код Екатеринбурга&nbsp;&mdash; команда, которая сделает
-          невозможное. Невыполнимое, сложное и&nbsp;безумное. Сделает&nbsp;то,
-          что никто не&nbsp;сможет. Это тот проект, о&nbsp;котором
-          вы&nbsp;мечтали. Это&nbsp;&mdash; проект судьбы.
-        </p>
+        <p
+          data-id="header-text"
+          dangerouslySetInnerHTML={{ __html: t.raw("header") }}
+        ></p>
         <a
           className={cn(styles.header__more)}
           href="#about"
           data-id="header-more"
-        >
-          Узнать, что мы&nbsp;будем делать
-        </a>
+          dangerouslySetInnerHTML={{ __html: t.raw("learnMore") }}
+        />
       </div>
     </header>
   );

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -0,0 +1,7 @@
+{
+  "Dev": {
+    "title": "Ekaterinburg code",
+    "header": "This is the Yekaterinburg Code - a team that will achieve the impossible. The unattainable, complex, and insane. They will do what no one else can. This is the project you've dreamed of. It is the project of destiny.",
+    "learnMore": "Find out what we will be doing"
+  }
+}
diff --git a/src/locales/ru.json b/src/locales/ru.json
@@ -0,0 +1,7 @@
+{
+  "Dev": {
+    "title": "Код Екатеринбурга",
+    "header": "Это Код Екатеринбурга&nbsp;&mdash; команда, которая сделает невозможное. Невыполнимое, сложное и&nbsp;безумное. Сделает&nbsp;то, что никто не&nbsp;сможет. Это тот проект, о&nbsp;котором вы&nbsp;мечтали. Это&nbsp;&mdash; проект судьбы.",
+    "learnMore": "Узнать, что мы&nbsp;будем делать"
+  }
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,8 +1,13 @@
+import { NextIntlProvider } from "next-intl";
+import type { AppProps } from "next/app";
 import "@/styles/globals.css";
 import "../../public/fonts/index.css";
 import "../../public/font-jetbrains-mono/index.css";
-import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <NextIntlProvider messages={pageProps.messages}>
+      <Component {...pageProps} />
+    </NextIntlProvider>
+  );
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
+import { useTranslations } from "next-intl";
 import cn from "classnames";
 import styles from "@/components/page/Page.module.css";
 import { Preview } from "@/components/preview/Preview";
@@ -9,12 +10,15 @@ import { Road } from "@/components/road/Road";
 import { Iframe } from "@/components/iframe/Iframe";
 import { Team } from "@/components/team/Team";
 import { MainAction } from "@/components/action/MainAction";
+import { GetStaticProps } from "next";
 
 export default function Home() {
+  const t = useTranslations("Dev");
+
   return (
     <>
       <Head>
-        <title>Код Екатеринбурга</title>
+        <title>{t("title")}</title>
       </Head>
       <Preview>
         <Header />
@@ -146,3 +150,11 @@ export default function Home() {
     </>
   );
 }
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return {
+    props: {
+      messages: (await import(`../locales/${context.locale}.json`)).default,
+    },
+  };
+};