Next.js-də next-intl ilə i18n Konfiqurasiyası

İnkişaf etdirdiyimiz tətbiqlərin qlobal auditoriyaya xitab etməsi üçün beynəlxalqlaşdırma (i18n) mühüm rol oynayır. Bu yazıda Next.js və next-intl kitabxanasından istifadə edərək i18n sisteminin necə qurulacağını izah edəcəyik.

Addım 1: Paketlərin Qurulması

npm install next-intl

Əgər TypeScript istifadə edirsinizsə, aşağıdakıları da əlavə edin:

npm install -D @types/react

Layihə Strukturu

Aşağıdakı kimi bir qovluq strukturu qurmağınız tövsiyə olunur:

/locales
  ├── en.json
  └── az.json

/app
  └── [locale]
      ├── page.tsx
      └── layout.tsx

/i18n
  ├── request.ts
  └── routing.ts

/middleware.ts
/next.config.mjs

Addım 2: next.config.mjs Faylı

// next.config.mjs
import createNextIntlPlugin from "next-intl/plugin";

const withNextIntl = createNextIntlPlugin({
  defaultLocale: "en",
  locales: ["en", "az"],
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    formats: ["image/avif", "image/webp"],
  },
};

export default withNextIntl(nextConfig);

Addım 3: i18n/routing.ts Konfiqurasiya Faylı

// i18n/routing.ts
import { defineRouting } from "next-intl/routing";

export const routing = defineRouting({
  locales: ["en", "az"],
  defaultLocale: "en",
  localePrefix: "always",
});

Addım 4: middleware.ts

// middleware.ts
import createMiddleware from "next-intl/middleware";
import { routing } from "@/i18n/routing";

export default createMiddleware({
  ...routing,
});

export const config = {
  matcher: ["/", "/(en|az)/:path*"],
};

Addım 5: i18n/request.ts - Dinamik Tərcümələrin Yüklənməsi

// i18n/request.ts
import { getRequestConfig } from "next-intl/server";
import { routing } from "@/i18n/routing";
import { notFound } from "next/navigation";

export default getRequestConfig(async ({ locale }) => {
  if (!routing.locales.includes(locale as any)) notFound();

  return {
    locale,
    messages: (await import(`@/locales/${locale}.json`)).default,
  };
});

Addım 6: Layout Faylı

// app/[locale]/layout.tsx
import { getMessages } from "next-intl/server";
import { NextIntlClientProvider } from "next-intl";

export default async function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const messages = await getMessages();

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider locale={locale} messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Addım 7: Tərcümələrdən İstifadə (Client Komponentində)

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

export default function HomePage() {
  const t = useTranslations("Home");

  return <h1>{t("title")}</h1>;
}

Nümunə Tərcümə Faylı (locales/en.json)

{
  "Home": {
    "title": "Welcome to my site!"
  }
}

// locales/az.json
{
  "Home": {
    "title": "Saytıma xoş gəlmisiniz!"
  }
}

elchinabilov.