i18n next-intl

.env.example

@@ -29,7 +29,7 @@ IS_PREVIEW_DEPLOY=false
 # Build pages only for the specified langs. Leave it empty to build all the langs
 # e.g. `en,fr` will only build English and French pages
 # Note: always include `en` as it is the default lang of the site
-BUILD_LOCALES=
+NEXT_PUBLIC_BUILD_LOCALES=
 
 # If resource constraints are being hit during builds, change LIMIT_CPUS to a
 # fixed number of CPUs (e.g. 2) to limit the demand during build time

.eslintrc.json

@@ -63,17 +63,6 @@
         "varsIgnorePattern": "^_$"
       }
     ],
-    "unused-imports/no-unused-imports-ts": "warn",
-    "no-restricted-imports": [
-      "warn",
-      {
-        "paths": [
-          {
-            "name": "react-i18next",
-            "message": "Please use next-i18next instead of react-i18next."
-          }
-        ]
-      }
-    ]
+    "unused-imports/no-unused-imports-ts": "warn"
   }
 }

.github/labeler.yml

@@ -16,7 +16,6 @@
 "config ⚙️":
   - i18n.config.json
   - next.config.js
-  - next-i18next.config,js
   - next-sitemap.config.js
   - tsconfig.json
   - .nvmrc

.storybook/main.ts

@@ -28,9 +28,9 @@ const config: StorybookConfig = {
       },
     },
     "@storybook/addon-interactions",
-    "storybook-react-i18next",
     "@storybook/addon-themes",
     "@chromatic-com/storybook",
+    "storybook-next-intl",
   ],
   staticDirs: ["../public"],
   framework: {

.storybook/modes.ts

@@ -1,6 +1,6 @@
 import pickBy from "lodash/pickBy"
 
-import { baseLocales } from "./i18next"
+import { baseLocales } from "./next-intl"
 import { breakpointSet } from "./preview"
 
 export const viewportModes = breakpointSet.reduce<{

.storybook/i18next.ts → .storybook/next-intl.ts

@@ -1,7 +1,3 @@
-import i18n, { Resource } from "i18next"
-// eslint-disable-next-line no-restricted-imports
-import { initReactI18next } from "react-i18next"
-
 export const baseLocales = {
   en: { title: "English", left: "En" },
   zh: { title: "中国人", left: "Zh" },
@@ -32,7 +28,7 @@ const supportedLngs = Object.keys(baseLocales)
 /**
  * Taking the ns array and generating those files for each language available.
  */
-const resources: Resource = ns.reduce((acc, n) => {
+const messagesByLocale = ns.reduce((acc, n) => {
   supportedLngs.forEach((lng) => {
     if (!acc[lng]) acc[lng] = {}
 
@@ -57,16 +53,18 @@ const resources: Resource = ns.reduce((acc, n) => {
 
   return acc
 }, {})
-console.log("🚀 ~ constresources:Resource=ns.reduce ~ resources:", resources)
+console.log(
+  "🚀 ~ constresources:Resource=ns.reduce ~ resources:",
+  messagesByLocale
+)
 
-i18n.use(initReactI18next).init({
-  debug: true,
-  fallbackLng: "en",
-  interpolation: { escapeValue: false },
-  react: { useSuspense: false },
-  supportedLngs,
-  resources,
-  defaultNS: "common",
-})
+const nextIntl = {
+  defaultLocale: "en",
+  messagesByLocale,
+  getMessageFallback: ({ key }: { key: string }) => {
+    const keyOnly = key.split(".").pop()
+    return keyOnly || key
+  },
+}
 
-export default i18n
+export default nextIntl

.storybook/preview.tsx

@@ -5,7 +5,7 @@ import type { Preview } from "@storybook/react"
 import ThemeProvider from "@/components/ThemeProvider"
 import { TooltipProvider } from "@/components/ui/tooltip"
 
-import i18n, { baseLocales } from "./i18next"
+import nextIntl, { baseLocales } from "./next-intl"
 import { withNextThemes } from "./withNextThemes"
 
 import "../src/styles/global.css"
@@ -47,7 +47,7 @@ const preview: Preview = {
     ),
   ],
   parameters: {
-    i18n,
+    nextIntl,
     controls: {
       matchers: {
         color: /(background|color)$/i,

README.md

@@ -95,9 +95,9 @@ yarn dev
 - Open this directory in your favorite text editor / IDE, and see your changes live by visiting `localhost:3000` from your browser
 - Pro Tip:
   - Explore scripts within `package.json` for more build options
-  - Get **faster** production builds by building only one language. E.g. in your `.env` file, set `BUILD_LOCALES=en` to build the content only in English
-  - To build the site in other selected languages too, you need to set them in `BUILD_LOCALES`, eg: `BUILD_LOCALES=en,es` if you also want to build only English (required) and Spanish.
-  - To build all languages, simply comment this line out with a hash mark, eg: `# BUILD_LOCALES=`
+  - Get **faster** production builds by building only one language. E.g. in your `.env` file, set `NEXT_PUBLIC_BUILD_LOCALES=en` to build the content only in English
+  - To build the site in other selected languages too, you need to set them in `NEXT_PUBLIC_BUILD_LOCALES`, eg: `NEXT_PUBLIC_BUILD_LOCALES=en,es` if you also want to build only English (required) and Spanish.
+  - To build all languages, simply comment this line out with a hash mark, eg: `# NEXT_PUBLIC_BUILD_LOCALES=`
 
 By default the script will build all the languages (complete list in `i18n.config.json`).
 
@@ -168,7 +168,7 @@ Learn more about how we review pull requests [here](docs/review-process.md).
 
 - To help with verification we request GitHub contributors connect their GitHub account with their Discord account (Discord > Settings > Connections > GitHub). Crowdin contributors will be verified directly through Crowdin by our team.
 
-If you haven't contributed yet and would like to earn a POAP/OATs to show your loyalty to the Ethereum space, head over to the [issues](https://github.com/ethereum/ethereum-org-website/issues/) tab to get started! If you would like to contribute to translations check out our [Translation Program](https://ethereum.org/en/contributing/translation-program/). 
+If you haven't contributed yet and would like to earn a POAP/OATs to show your loyalty to the Ethereum space, head over to the [issues](https://github.com/ethereum/ethereum-org-website/issues/) tab to get started! If you would like to contribute to translations check out our [Translation Program](https://ethereum.org/en/contributing/translation-program/).
 
 <hr style="margin-top: 3em; margin-bottom: 3em;">
 

docs/best-practices.md

@@ -52,7 +52,7 @@ Markdown will be translated as whole pages of content, so no specific action is
 
   - _tl;dr Each individual JSON entry should be a complete phrase by itself_
 
-- This is done using the `Translation` component. However there is an alternative method for regular JS: using the `t` function from `next-i18next`
+- This is done using the `Translation` component. However there is an alternative method for regular JS: using the `t` function from `@/hooks/useTranslation`
 
   - **Method one: `<Translation />` component (preferred if only needed in JSX)**
 
@@ -66,7 +66,7 @@ Markdown will be translated as whole pages of content, so no specific action is
   - **Method two: `t()`**
 
     ```tsx
-    import { useTranslation } from "next-i18next"
+    import { useTranslation } from "@/hooks/useTranslation"
 
     // Utilize anywhere in JS using
     const { t } = useTranslation()

next.config.js

@@ -5,7 +5,9 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 })
 
-const { i18n } = require("./next-i18next.config")
+const createNextIntlPlugin = require("next-intl/plugin")
+
+const withNextIntl = createNextIntlPlugin()
 
 const LIMIT_CPUS = Number(process.env.LIMIT_CPUS ?? 2)
 
@@ -59,7 +61,6 @@ module.exports = (phase, { defaultConfig }) => {
 
       return config
     },
-    i18n,
     trailingSlash: true,
     images: {
       deviceSizes: [640, 750, 828, 1080, 1200, 1504, 1920],
@@ -111,5 +112,5 @@ module.exports = (phase, { defaultConfig }) => {
     }
   }
 
-  return withBundleAnalyzer(nextConfig)
+  return withBundleAnalyzer(withNextIntl(nextConfig))
 }

package.json

@@ -58,12 +58,11 @@
     "framer-motion": "^10.13.0",
     "gray-matter": "^4.0.3",
     "htmr": "^1.0.2",
-    "i18next": "^23.6.0",
     "lodash.merge": "^4.6.2",
     "lodash.shuffle": "^4.2.0",
     "lodash.union": "^4.6.0",
     "next": "^14.2.21",
-    "next-i18next": "^14.0.3",
+    "next-intl": "^3.26.3",
     "next-mdx-remote": "^3.0.8",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.3.0",
@@ -74,7 +73,6 @@
     "react-dom": "^18.2.0",
     "react-emoji-render": "^2.0.1",
     "react-hook-form": "^7.52.1",
-    "react-i18next": "^13.3.1",
     "react-icons": "^4.10.1",
     "react-lite-youtube-embed": "^2.4.0",
     "react-select": "5.8.0",
@@ -130,7 +128,7 @@
     "prettier-plugin-tailwindcss": "^0.6.5",
     "raw-loader": "^4.0.2",
     "storybook": "8.1.10",
-    "storybook-react-i18next": "3.1.1",
+    "storybook-next-intl": "^1.2.5",
     "tailwindcss": "^3.4.4",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "4.1.0",

src/components/AdoptionChart.tsx

@@ -1,4 +1,3 @@
-import { useTranslation } from "next-i18next"
 import { useTheme } from "next-themes"
 
 import type { ChildOnlyProp } from "@/lib/types"
@@ -7,6 +6,8 @@ import { cn } from "@/lib/utils/cn"
 
 import { Flex } from "./ui/flex"
 
+import useTranslation from "@/hooks/useTranslation"
+
 type CellProps = ChildOnlyProp & {
   color?: string
   className?: string

src/components/AssetDownload/AssetDownloadArtist.tsx

@@ -1,12 +1,12 @@
-import { useTranslation } from "next-i18next"
-
 import Emoji from "@/components/Emoji"
 
 import { cn } from "@/lib/utils/cn"
 
 import { Flex } from "../ui/flex"
 import { BaseLink } from "../ui/Link"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 type AssetDownloadArtistProps = {
   artistName: string
   artistUrl?: string

src/components/AssetDownload/index.tsx

@@ -2,7 +2,6 @@ import { extname } from "path"
 
 import { BaseHTMLAttributes } from "react"
 import type { ImageProps, StaticImageData } from "next/image"
-import { useTranslation } from "next-i18next"
 
 import AssetDownloadArtist from "@/components/AssetDownload/AssetDownloadArtist"
 import AssetDownloadImage from "@/components/AssetDownload/AssetDownloadImage"
@@ -13,6 +12,8 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
 import { ButtonLink } from "../ui/buttons/Button"
 import { Flex, Stack } from "../ui/flex"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 type AssetDownloadProps = {
   title: string
   alt: string
@@ -55,22 +56,12 @@ const AssetDownload = ({
         )}
       </div>
       <Flex className="mt-4 gap-5">
-        <ButtonLink
-          href={imgSrc}
-          onClick={matomoHandler}
-          target="_blank"
-          locale={false}
-        >
+        <ButtonLink href={imgSrc} onClick={matomoHandler} target="_blank">
           {t("page-assets-download-download")} (
           {extname(imgSrc).slice(1).toUpperCase()})
         </ButtonLink>
         {svgUrl && (
-          <ButtonLink
-            href={svgUrl}
-            onClick={matomoHandler}
-            target="_blank"
-            locale={false}
-          >
+          <ButtonLink href={svgUrl} onClick={matomoHandler} target="_blank">
             {t("page-assets-download-download")} (SVG)
           </ButtonLink>
         )}

src/components/Banners/BugBountyBanner/index.tsx

@@ -9,11 +9,12 @@ const BugBountyBanner = () => (
   <BannerNotification shouldShow>
     <Center>
       <p>
-        Prague code is now in scope! The Prague Audit Competition is running on {" "}
+        Prague code is now in scope! The Prague Audit Competition is running on{" "}
         <a href="https://cantina.xyz/competitions/9ab19e33-b73c-4384-83a8-b905f508ce5e">
           Cantina
         </a>{" "}
-        during 21st of February - 21st of March, with up to $2,000,000 in rewards!
+        during 21st of February - 21st of March, with up to $2,000,000 in
+        rewards!
       </p>
     </Center>
   </BannerNotification>

src/components/Banners/DismissableBanner/index.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react"
-import { useTranslation } from "next-i18next"
 import { MdClose } from "react-icons/md"
 
 import { Button } from "@/components/ui/buttons/Button"
@@ -9,6 +8,8 @@ import { cn } from "@/lib/utils/cn"
 
 import BannerNotification from "../BannerNotification"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 type DismissableBannerProps = React.HTMLAttributes<HTMLDivElement> & {
   storageKey: string
 }