Javascript – Nextjs 13 App Router internalization without sub-routing or domain

You should take a different path Because there is a server components too
First Download the following packages with this command:

npm install @formatjs/intl-localematcher negotiator next-int && npm install -D @types/negotiator server-only

I will separate the config Because it will be easier to change it later

i18n.config.ts

export const i18n = {
  defaultLocale: "en",
  locales: ["en", "de"], /* All locales you have */
} as const

export type Locale = (typeof i18n)["locales"][number]

Then we will make the configuration for the server:

dictionary.ts

import "server-only"

import type { Locale } from "@/config/i18n.config"

const dictionaries = {
  "en": () => import("pathToJsonFile/en.json").then((module) => module.default),
  "de": () => import("pathToJsonFile/de.json").then((module) => module.default),
}

/* We will use getDictionary function for server components*/
export const getDictionary = async (locale: Locale) => dictionaries[locale]() 

We need to create a function to detect locale

import { NextRequest } from "next/server"
import { match as matchLocale } from "@formatjs/intl-localematcher"
import Negotiator from "negotiator"

function getLocale(request: NextRequest): string | undefined {
  const languageCookie = request.cookies.get("NEXT_LOCALE")?.value
  if (languageCookie) {
    return languageCookie
  }
  const negotiatorHeaders: Record<string, string> = {}
  request.headers.forEach((value, key) => (negotiatorHeaders[key] = value))

  // @ts-ignore locales are readonly
  const locales: string[] = i18n.locales
  const languages = new Negotiator({ headers: negotiatorHeaders }).languages()

  const locale = matchLocale(languages, locales, i18n.defaultLocale)
  return locale
}

Than we need middleware:

middleware.ts

import { type NextRequest } from "next/server"
import createIntlMiddleware from "next-intl/middleware"

/* I am creating a new function because if you have more than 1 middleware it will be easier to manage but You can directly use it with default export */
export const MultiLanguageMiddleware = (request: NextRequest) => {
  const defaultLocale =
    getLocale(request) || request.headers.get("x-default-locale") || "en"

  const intlMiddleware = createIntlMiddleware({
    /* @ts-ignore */
    locales: i18n.locales,
    localePrefix: "never", /* we will give "never" value because we don't want domain or prefix based locale. */
    defaultLocale: defaultLocale || "en-US", 
    localeDetection: false,
  })

  return intlMiddleware(request)
}

export async function middleware(request: NextRequest) {

 /* Then you can can create custom logic or directly call here */

return MultiLanguageMiddleware
}

export const config = {
  // Skip all paths that should not be internationalized. This example skips the
  // folders "api", "_next" and all files with an extension (e.g. favicon.ico)
  matcher: ['/((?!api|_next|.*\..*).*)']
};

Then we have to define types for server component IntelliSense:

global.d.ts

type Messages = typeof import("pathToYourFile/en.json")
declare interface IntlMessages extends Messages {}

Now we need a provider for client components:

providers.tsx

"use client"

import { FC, useEffect, useState } from "react"
import { NextIntlClientProvider } from "next-intl"

interface ProvidersProps {
  children: React.ReactNode
  lang: string
  messages: any
}

const Providers: FC<ProvidersProps> = ({ children, lang, messages }) => {
  /* We are ensuring we are in client because of avoiding next.js 13 hydration errors */
  const [isMounted, setIsMounted] = useState(false)
  useEffect(() => {
    setIsMounted(true)
  }, [])
  if (!isMounted) return null

  return (
    
      <NextIntlClientProvider locale={formatLanguage(lang)} messages={messages}>
      {children}
      </NextIntlClientProvider>
    
  )
}

export default Providers

before we add our layout file we have to move every route in the app directory to the [lang] folder like this:

layout.tsx

import { i18n, Locale } from "pathToConfig/i18n.config"
import Providers from "pathToProvidersComponent/providers"

export default async function RootLayout({
  children,
  params: { lang },
}: {
  children: React.ReactNode
  params: { lang: Locale }
}) {
  let messages
  try {
    messages = (await import(`pathToFile/lang.json`)).default
  } catch (error) {
    console.error(error)
/* our fallback locale */
    messages = (await import(`pathToFile/en.json`)).default
  }
  return (
    <html lang={lang}>
      <body>
          <Providers lang={lang} messages={messages}>
           {children}
          </Providers>
      </body>
    </html>
  )
}

client component usage:

"use client"
import { useTranslations } from "next-intl"

const Page = () => {
  const t = useTranslations("yours")


return (
<div>
{t("path.to.message")}
</div>
)

}

server component usage:

import { getDictionary } from "filePath/dictionary"
import { useTranslations } from "next-intl"
import { Locale } from "pathToI18nConfig/i18n.config"

interface pageProps {
  params: {
    lang: Locale
  }
}

const Page: FC<pageProps> = async ({ params: { lang } }) => {
  const translation = await getDictionary(lang)

return (
<div>
{translation.yours}
</div>
)

}