introduce vercel next-international implementation

Author: adambarath

next-international.js

@@ -0,0 +1,8 @@
+// https://next-international.vercel.app/docs/app-setup
+// locales/index.ts
+import { createI18n } from 'next-international'
+ 
+export const { useI18n, useScopedI18n, I18nProvider, getLocaleProps } = createI18n({
+  hu: () => import('./hu'),
+  en: () => import('./en')
+})

package-lock.json

@@ -38,6 +38,7 @@
     "lodash": "^4.17.21",
     "medusa-react": "^9.0.0",
     "next": "^14.0.0",
+    "next-international": "^1.2.4",
     "pg": "^8.11.3",
     "react": "^18.2.0",
     "react-country-flag": "^3.0.2",

package.json

@@ -0,0 +1,9 @@
+// https://next-international.vercel.app/docs/app-setup
+// locales/client.ts
+"use client"
+import { createI18nClient } from 'next-international/client'
+ 
+export const { useI18n, useScopedI18n, I18nProviderClient } = createI18nClient({
+  us: () => import('./us'),
+  hu: () => import('./hu')
+})

src/locales/client.ts

@@ -0,0 +1,16 @@
+export default {
+  "generic.somethingwrong": "Hiba történt",
+  "nav.title": "Üzlet",
+  hello: "Hello",
+  welcome: "Hello {name}!",
+  "about.you": "Hello {name}! You have {age} yo",
+  "scope.test": "A scope",
+  "scope.more.test": "A scope",
+  "scope.more.param": "A scope with {param}",
+  "scope.more.and.more.test": "A scope",
+  "scope.more.stars#one": "1 star on GitHub",
+  "scope.more.stars#other": "{count} stars on GitHub",
+  "missing.translation.in.fr": "This should work",
+  "cows#one": "A cow",
+  "cows#other": "{count} cows",
+} as const

src/locales/hu.ts

@@ -0,0 +1,8 @@
+// https://next-international.vercel.app/docs/app-setup
+// locales/server.ts
+import { createI18nServer } from 'next-international/server'
+ 
+export const { getI18n, getScopedI18n, getStaticParams } = createI18nServer({
+  us: () => import('./us'),
+  hu: () => import('./hu')
+})

src/locales/server.ts

@@ -0,0 +1,16 @@
+export default {
+  "generic.somethingwrong": "Something went wrong",
+  "nav.title": "Store",
+  hello: "Hello",
+  welcome: "Hello {name}!",
+  "about.you": "Hello {name}! You have {age} yo",
+  "scope.test": "A scope",
+  "scope.more.test": "A scope",
+  "scope.more.param": "A scope with {param}",
+  "scope.more.and.more.test": "A scope",
+  "scope.more.stars#one": "1 star on GitHub",
+  "scope.more.stars#other": "{count} stars on GitHub",
+  "missing.translation.in.fr": "This should work",
+  "cows#one": "A cow",
+  "cows#other": "{count} cows",
+} as const

src/locales/us.ts

@@ -1,5 +1,6 @@
 import { Region } from "@medusajs/medusa"
 import { notFound } from "next/navigation"
+import { createI18nMiddleware } from 'next-international/middleware'
 import { NextRequest, NextResponse } from "next/server"
 
 const BACKEND_URL = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL
@@ -10,6 +11,11 @@ const regionMapCache = {
   regionMapUpdated: Date.now(),
 }
 
+const I18nMiddleware = createI18nMiddleware({
+  locales: ['us', 'hu'],
+  defaultLocale: 'us',
+})
+
 async function getRegionMap() {
   const { regionMap, regionMapUpdated } = regionMapCache
 
@@ -104,7 +110,7 @@ export async function middleware(request: NextRequest) {
     (!isOnboarding || onboardingCookie) &&
     (!cartId || cartIdCookie)
   ) {
-    return NextResponse.next()
+    return I18nMiddleware(request)
   }
 
   const redirectPath =

src/middleware.ts

@@ -1,5 +1,6 @@
 import { Suspense } from "react"
 
+import { getI18n } from '../../../../locales/server'
 import { listRegions } from "@lib/data"
 import LocalizedClientLink from "@modules/common/components/localized-client-link"
 import CartButton from "@modules/layout/components/cart-button"
@@ -8,6 +9,8 @@ import SideMenu from "@modules/layout/components/side-menu"
 export default async function Nav() {
   const regions = await listRegions().then((regions) => regions)
 
+  const t = await getI18n()
+
   return (
     <div className="sticky top-0 inset-x-0 z-50 group">
       <header className="relative h-16 mx-auto border-b duration-200 bg-white border-ui-border-base">
@@ -24,7 +27,7 @@ export default async function Nav() {
               className="txt-compact-xlarge-plus hover:text-ui-fg-base uppercase"
               data-testid="nav-store-link"
             >
-              Medusa Store
+              {t("nav.title")}
             </LocalizedClientLink>
           </div>