Profile PictureBalazs Farago Dev
Open menu

Többnyelvű nextjs

February 1, 2024

Egyszerű Nextjs projekt a next-intl 3.0 bemutatásához

A projekt során implementáljuk a next-intl 3.0 újítását egy egyszerű példán keresztül. A fő nagy előnye az oldalak url címének a könnyű lokalizációjának a beállítása és annak a kezelése. A next-intl működik page és app roterrel is, de igazán app router-rel hozza ki az erejét. Amennyiben lokalizálnád a nextjs weboldalad mindenképp érdemes lehet kipróbálni.

Instalálás

A projekt során 0-ról indulunk és az alap nextjs-et használjuk majd typescript környezetbe.

POWERSHELL
npx create-next-app@latest

Typescript, Tailwindcss, src/ folder és az App router legyen bekapcsolva

(Amennyiben src/ folder-t nem szeretnél akkor a kód annyiban változik, hogy az src foldert nem kell hozzáadni a helyekhez)

A több nyelvűség eléréséhez letöltjük a next-intl csomagot

POWERSHELL
npm i next-intl

Szükséges alapbeállítások

Az egységesség és az egyszerűség miatt app/page.tsx-et módosítjuk és hozzáadunk egy app/about/page.tsx fájlt a későbbi tesztelésekhez.

TYPESCRIPT
//src/app/page.tsx
import Link from "next/link";


export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
			Get started by editing
      <Link href="/about">about</Link>
    </main>
  );
}
TYPESCRIPT
//src/app/about/page.tsx
import Link from "next/link";


export default function About() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
			The 'About' page provides essential information about our company or project, including our mission and values. Join us to shape the future together!
      <Link href="/">back to home</Link>
    </main>
  );
}

Több nyelvűség alap beállítása

next.Config.mjs módosítása a következő képpen:

JAVASCRIPT
//next.Config.mjs
import createNextIntlPlugin from 'next-intl/plugin';


const withNextIntl = createNextIntlPlugin();


/** @type {import('next').NextConfig} */
const nextConfig = {};


export default withNextIntl(nextConfig);

middleware.ts hozzáadása

TYPESCRIPT
//src/middleware.ts
import createMiddleware from "next-intl/middleware";
import { locales, defaultLocale } from "./navigation";


export default createMiddleware({
  locales,
  defaultLocale,
});


export const config = {
  // Match only internationalized pathnames
  matcher: ["/", "/(hu|en)/:path*"],
};

i18n.ts hozzáadása

TYPESCRIPT
//src/i18n.ts
import { notFound } from "next/navigation";
import { getRequestConfig } from "next-intl/server";
import {locales} from "./navigation"


export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale as any)) notFound();


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

navigation.ts hozzáadása

Itt állítjuk be:

  • a szükséges nyelveket
  • az alap nyelvet
  • És hogy a különböző oldalak milyen neveket használjanak
    • TYPESCRIPT
    //src/navigation.ts
    import {
      createSharedPathnamesNavigation,
    } from "next-intl/navigation";
    

    export const defaultLocale = "en";
    

    export const locales = ["en", "hu"] as const;
    

    export const { Link, redirect, usePathname, useRouter } =
      createSharedPathnamesNavigation({ locales });

    A két nyelvű szövegek létrehozása Ez egy messages nevű mappába történik a főkönyvtárba. A mappába minden nyelvhez létre kell hozni a nyelvnek megfelelő json fájlt. Itt már előre bevittem a szükséges neveket 

    JSON
    //messages/en.json
    {
        "Index": {
            "title": "Hello world!",
            "getStarted": "Get started by editing",
            "about": "about"
        },
        "About": {
            "aboutText": "The 'About' page provides essential information about our company or project, including our mission and values. Join us to shape the future together!",
            "home": "back to home"
        }
    }
    JSON
    //messages/hu.json
    {
        "Index": {
            "title": "Szia Világ!",
            "getStarted": "Kezdd el a szerkesztést",
            "about": "rólunk"
        },
        "About": {
            "aboutText": "Az 'About' oldal bemutatja cégünk vagy projektünk alapvető információit, küldetését és értékeit. Csatlakozz hozzánk, hogy együtt formálhassuk a jövőt!",
            "home": "vissza a főoldalra"
        }
    }

    Az oldalak többnyevűvé tétele

    Az app mappa alatt a [locale] folder létrehozása és abba tegyük bele az “about mappát”, a page.tsx és a layout.tsx fájlt.

    A layout html language lokalizáció

    TYPESCRIPT
    //src/app/[locale]/layout.tsx
    

    ...
    

    export default function RootLayout({
      children,
      params: { locale },
    }: Readonly<{
      children: React.ReactNode;
      params: { locale: string };
    }>) {
      return (
        <html lang={locale}>
          <body className={inter.className}>{children}</body>
        </html>
      );
    }

    Az újonan létrehozott Link elem kicserélése a kódba amit a createSharedPathnamesNavigation segítségével hoztunk létre.

    A useTranslations használata. Az Index megnevezés alatt behívjuk a többi message elemet a fő oldalra. (Amennyiben async függvényünk van a useTranslations helyett a await getTranslations kell használni)

    TYPESCRIPT
    //src/app/[locale]/page.tsx
    import { useTranslations } from "next-intl";
    import { Link } from "@/navigation";
    

    export default function Home() {
      const t = useTranslations("Index");
      return (
        <main className="flex min-h-screen flex-col items-center justify-between p-24">
          {t("getStarted")}
          <Link href="/about">{t("about")}</Link>
        </main>
      );
    }

    Ugyanígy kicseréljük az “about” oldalt is

    TYPESCRIPT
    //src/app/[locale]/about/page.tsx
    import { useTranslations } from "next-intl";
    import { Link } from "@/navigation";
    

    export default function About() {
      const t = useTranslations("About");
      return (
        <main className="flex min-h-screen flex-col items-center justify-between p-24">
          {t("aboutText")}
          <Link href="/">{t("home")}</Link>
        </main>
      );
    }

    Az oldalakhoz még hozzá kell adni egy komponenst ami segítségevel tudunk nyelvet váltani

    TYPESCRIPT
    //src/components/localeSwitcher.tsx
    "use client";
    import { useLocale } from "next-intl";
    import { useRouter, usePathname } from "../navigation";
    

    export default function LocaleSwitcher() {
      const locale = useLocale();
      const router = useRouter();
      const pathName = usePathname();
    

      const alternativeLocale = locale === "en" ? "hu" : "en";
    

      const switchLocale = () => {
        router.push(pathName, { locale: alternativeLocale });
      };
    

      return (
        <div className="rounded-lg border bg-white px-4 py-2 text-sm text-black  dark:border-neutral-800 dark:bg-transparent dark:text-white ">
          <button onClick={switchLocale} className="">
            {locale}
          </button>
        </div>
      );
    }

    Utána hozzá kell adni a page.tsx fájlokhoz

    TYPESCRIPT
    //src/app/[locale]/page.tsx
    import LocaleSwitcher from "@/components/localeSwitcher";
    

    ...
    

    export default function Home() {
      const t = useTranslations("Index");
      return (
        <main className="flex min-h-screen flex-col items-center justify-between p-24">
          <LocaleSwitcher />
    

    			...
    

        </main>
      );
    }

    Az így létrejött weboldalunkon a nyelv állítható, de az url-ek nem több nyevűek.

    Több nyelvű slug-ok alaklmazása

    A módosítása nagyon egyszerű csak két elemet kell módosítani: navigation.ts-t és a middleware.ts-t

    TYPESCRIPT
    //src/navigation.ts
    import {
      Pathnames,
      createLocalizedPathnamesNavigation,
    } from "next-intl/navigation";
    

    ...
    

    export const pathnames = {
      "/": "/",
      "/about": {
        en: "/about",
        hu: "/rolunk",
      },
    } satisfies Pathnames<typeof locales>;
    

    export const { Link, redirect, usePathname, useRouter } =
      createLocalizedPathnamesNavigation({ locales, pathnames });
    TYPESCRIPT
    ...
    

    import { locales, pathnames, defaultLocale } from "./navigation";
    

    export default createMiddleware({
      // A list of all locales that are supported
      locales,
      pathnames,
      defaultLocale,
    });
    

    ...

    Az újban az “about” oldal már “rolunk” weboldal alatt talalható meg magyarul

    Hova haladhatunk tovább

    Ez egy elég alap program, de egy jó kezdő pont a next-intl nyelv beállításának a folyamatához. Nagyobb projekteken is hasonlóan egyszerűen működik a folyamat.

    Kód

    A teljes kész kód megtalálható:

    https://github.com/balazsfaragodev/Next.js---next-intl---TypeScript-Simple-Internationalization

    Oszd meg ezt a cikket

    Merülj el az izgalmas tudásban, amíg a buszra vársz!

    Indítsd a napod a legújabb technológiai áttörésekkel. Csatlakozz most, és merülj el az innovációban!

    Kapcsolódó Cikkek