Patobulintas internacionalizavimas (i18n) programoje Next.js 14 – SitePoint

Šiame straipsnyje mes pasinersime į tai, kodėl internacionalizavimas (i18n) yra labai svarbus kuriant internetą, tyrinėkite Next.js 14's naujų funkcijų ir išmokite be vargo kurti daugiakalbį žiniatinklio turinį.

Įsivaizduokite, kad patenkate į svetainę, kurioje reikia išgauti svarbią informaciją, ir staiga atsitrenkiate į kalbos barjerą. Apmaudu, tiesa? Štai čia atsiranda internacionalizacija (i18n), todėl svetainės tampa prieinamos žmonėms visame pasaulyje.

„Next.js 14“ supaprastina daugiakalbį žiniatinklio kūrimą naudojant tokius įrankius kaip kalbos maršruto parinkimas ir dinaminis pranešimų įkėlimas. Jis skirtas padėti kūrėjams lengvai kurti dinamines daugiakalbes žiniatinklio programas.

Šio straipsnio pabaigoje turėsime praktinių įžvalgų apie Next.js 14 internacionalizavimą, pradedant naujo projekto sukūrimu ir baigiant kalbos perjungimu.

Next.js 14 projekto nustatymas

Pradėkime nuo projekto nustatymo su įmontuotu i18n.

1 žingsnis. Sukurkite naują Next.js projektą vykdydami toliau pateiktą komandą. Dėl šio straipsnio mes jį pavadinsime i18n-next-app:

npx create-next-app i18n-next-app

2 žingsnis. Eikite į projekto aplanką ir įdiekite Next.js (14 versija) ir next-intl paketas:

cd i18n-next-app
npm install next@latest next-intl

Aukščiau pateikta komanda įdiegia Next.js kartu su naujausiomis funkcijomis, tokiomis kaip i18n, ir apima next-intl. Naudojimo priežastis next-intl yra sklandžiai integruoti su App Router per a [locale] dinaminis segmentas. Ši integracija leidžia mums pateikti turinį įvairiomis kalbomis.

3 veiksmas. Įgalinkite i18n palaikymą Next.js 14 savo projekte pridėdami toliau nurodytą konfigūraciją next.config.js:

const withNextIntl = require('next-intl/plugin')();

module.exports = withNextIntl({
  
});

Šis kodas aukščiau sukonfigūruoja Next.js su next-intl papildinys, skirtas patobulintoms internacionalizavimo galimybėms. Jis importuoja papildinį ir pritaiko jį Next.js konfigūracijai, todėl kūrėjai gali lengvai įtraukti internacionalizavimo funkcijas į savo projektus. Tai daroma suteikiant vietos išsaugoti kitas projekto konfigūracijas.

4 veiksmas: Sukurti content aplanką projekto šaknyje. Viduje sukurkite JSON failus kiekvienai lokalei (en.json, es.json, de.json), kuriame yra jūsų išverstos eilutės. Šis metodas kompensuoja dabartinį Next.js automatinio vertimo apribojimą.

Vykdydami šį projektą naudosime anglų, ispanų ir vokiečių kalbas, tačiau nedvejodami pridėkite daugiau lokalių, jei reikia pagal jūsų projekto reikalavimus:

{
  "Home": {
    "navigation": {
      "home": "Heim",
      "about": "Über uns",
      "contact": "Kontakt"
    },
    "title": "Internationalisierung (i18n) in Next.js 14",
    "description": "Next.js 14 führt erweiterte Internationalisierungs (i18n)-Funktionen ein, die Entwicklern ermöglichen, Übersetzungen, lokalisierungsbasiertes Routing und Inhaltslokalisierung für weltweit zugängliche Webanwendungen mühelos zu verwalten. <br /> <br />Darüber hinaus bietet es integrierte Unterstützung für mehrere Sprachvarianten, dynamisches Inhaltsladen und robuste Fallback-Behandlung."
  }
}

{
  "Home": {
    "navigation": {
      "home": "Inicio",
      "about": "Acerca de",
      "contact": "Contacto"
    },
    "title": "Internacionalización (i18n) en Next.js 14",
    "description": "Next.js 14 introduce características avanzadas de internacionalización (i18n), capacitando a los desarrolladores para gestionar fácilmente traducciones, enrutamiento basado en localización y localización de contenido para aplicaciones web globalmente accesibles. <br /> <br />Esto también aprovecha el soporte incorporado para múltiples locales, carga dinámica de contenido y manejo de respaldo robusto."
  }
}

{
  "Home": {
    "navigation": {
      "home": "Home",
      "about": "About",
      "contact": "Contact Us"
    },
    "title": "Internationalization(i18n) in Next.js 14",
    "description": "Next.js 14 introduces enhanced internationalization (i18n) features, empowering developers to effortlessly manage translations, locale-based routing, and content localization for globally accessible web applications. <br /> <br />This also piggy-backs built-in support for multiple locales, dynamic content loading, and robust fallback handling."
  }
}

Aukščiau pateiktas turinys atspindi mūsų projektų nukreipimo puslapio turinį, pritaikytą trims skirtingoms kalboms.

Kalbos nukreipimas ir šliužai

Daugiakalbėje žiniatinklio programoje kalbos maršruto parinkimas užtikrina, kad vartotojai būtų nukreipti į atitinkamą svetainės versiją pagal jų kalbos nuostatas. Be to, šliužai leidžia dinamiškai generuoti maršrutus, ypač naudingus puslapiuose, kuriuose yra daug turinio, pavyzdžiui, tinklaraščiuose ar produktų sąrašuose.

Kai konfigūracija bus baigta, įdiegkime konkrečiai kalbai pritaikytą maršrutą. Taip pat nustatykime kalbos šliužus, nepasitikėdami papildomomis bibliotekomis.

1 žingsnis. Viduje src/ kataloge, sukurkite naują failą ir pavadinkite jį i18n.ts. Sukonfigūruokite, kad pranešimai būtų dinamiškai įkelti pagal lokalę:

import { notFound } from "next/navigation";
import { getRequestConfig } from 'next-intl/server';

const locales: string[] = ['en', 'de', 'es'];

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

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

Šiame žingsnyje mes nustatome dinaminį pranešimų įkėlimą pagal pasirinktą lokalę. The getRequestConfig funkcija dinamiškai importuoja JSON failus, atitinkančius lokalę iš content aplanką. Tai užtikrina, kad programa lengvai pritaiko savo turinį prie skirtingų kalbos nuostatų.

2 žingsnis. Sukurti middleware.ts failas viduje src/ kad atitiktų lokales ir leistų peradresuoti vartotoją pagal lokalę:

import createMiddleware from 'next-intl/middleware';

const middleware = createMiddleware({
  
  locales: ['en', 'de', 'es'],

  
  defaultLocale: 'en'
});

export default middleware;

export const config = {
  
  matcher: ["https://www.sitepoint.com/", '/(de|es|en)/:page*']
};

Šiame žingsnyje apibrėžiame tarpinę programinę įrangą, kuri atitinka lokales ir peradresuoja vartotojus pagal jų pageidaujamą kalbą. Nurodome palaikomas lokales ir nustatome numatytąją lokalę, jei neatitikimų.

3 veiksmas. Tada sukonfigūruojame programos kalbą ir modifikuojame išdėstymą bei puslapio komponentus. Įsteigti a [locale] viduje esantį katalogą app/ ir judėti layout.tsx ir page.tsx jo viduje

interface RootLayoutProps {
  children: React.ReactNode;
  locale: never;
}

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

import Header from "@/components/Header";
import { useTranslations } from "next-intl";
import Image from "next/image";
import heroImage from "../../assets/img/intl_icon.png";

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

  
  const navigationKeys = Object.keys(t.raw("navigation"));

  return (
    <>
      <Header />
      <nav>
        <ul>
          {navigationKeys.map((key) => (
            <li key={key}>
              <a href={`#/${key}`}>{t(`navigation.${key}`)}</a>
            </li>
          ))}
        </ul>
      </nav>
      <main>
        <div>
          <aside>
            <h2>{t("title")}</h2>
            <p dangerouslySetInnerHTML={{ __html: t("description") }}></p>
          </aside>
          <aside>
            <Image src={heroImage} width={"600"} height={"600"} alt="" />
          </aside>
        </div>
      </main>
    </>
  );
}

Iš aukščiau pateikto kodo, be stilių (galima rasti stilizuotą versiją čia) aiškumo dėlei naudojome useTranslations kabliukas iš next-intl gauti išverstą contentsuteikiantis geresnį požiūrį į daugiakalbio turinio valdymą.

Šis kabliukas leidžia mums nuskaityti konkrečių raktų vertimus, pvz., title arba description, iš mūsų JSON pranešimų failų. Įdiegus šiuos diegimus, mūsų Next.js 14 programėlėje dabar yra kalbos maršrutai ir šliužai.

4 veiksmas. Kai paleidžiame programą ir lankomės tokiuose URL adresuose kaip localhost:port/en, localhost:port/es, localhost:port/dematome išvestį skirtingomis kalbomis.

Atlikdami šiuos veiksmus sėkmingai įdiegėme kalbos maršruto parinkimą ir „Next.js 14“ programėlę, suteikdami naudotojams sklandžią daugiakalbę patirtį.

Kalbos keitimo įgyvendinimas

Čia sukuriame kalbos perjungimo komponentą LangSwitch.tsx. Šis komponentas bus kaip vartai, kad vartotojai galėtų pasirinkti norimą kalbą:

 import React, { useState } from "react";
 import Image from "next/image";
 import { StaticImageData } from "next/image";
 import { useRouter } from "next/navigation";
 import { usePathname } from "next/navigation";
 import gbFlag from "../assets/img/bg_flag.png";
 import geFlag from "../assets/img/german_flag.png";
 import esFlag from "../assets/img/spain_flag.png";

 const LangSwitcher: React.FC = () => {
  interface Option {
    country: string;
    code: string;
    flag: StaticImageData;
}

 const router = useRouter();
 const pathname = usePathname();

 const [isOptionsExpanded, setIsOptionsExpanded] = useState(false);

 const options: Option[] = [
    { country: "English", code: "en", flag: gbFlag },
    { country: "Deutsch", code: "de", flag: geFlag },
    { country: "Spanish", code: "es", flag: esFlag },
  ];

  const setOption = (option: Option) => {
    setIsOptionsExpanded(false);
    router.push(`/${option.code}`);
  };

  return (
    <div className="flex items-center justify-center bg-gray-100">
      <div className="relative text-lg w-48">
        <button
          className=" justify-between w-full border border-gray-500 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
          onClick={() => setIsOptionsExpanded(!isOptionsExpanded)}
          onBlur={() => setIsOptionsExpanded(false)}
        >
          Select Language
          <svg
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            className={`h-4 w-4 transform transition-transform duration-200 ease-in-out ${
              isOptionsExpanded ? "rotate-180" : "rotate-0"
            }`}
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M19 9l-7 7-7-7"
            />
          </svg>
        </button>
        <div
          className={`transition-transform duration-500 ease-custom ${
            !isOptionsExpanded
              ? "-translate-y-1/2 scale-y-0 opacity-0"
              : "translate-y-0 scale-y-100 opacity-100"
          }`}
        >
          <ul className="absolute left-0 right-0 mb-4 bg-white divide-y rounded-lg shadow-lg overflow-hidden">
            {options.map((option, index) => (
              <li
                key={index}
                className="px-3 py-2 transition-colors duration-300 hover:bg-gray-200 flex items-center cursor-pointer"
                onMouseDown={(e) => {
                  e.preventDefault();
                  setOption(option);
                }}
                onClick={() => setIsOptionsExpanded(false)}
              >
                <Image
                  src={option.flag}
                  width={"20"}
                  height={"20"}
                  alt="logo"
                />
                &nbsp;&nbsp;{option.country}
                {pathname === `/${option.code}` && (
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    className="w-7 h-7 text-green-500 ml-auto"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={3}
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                )}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default LangSwitcher;

The LangSwitcher aukščiau esantis komponentas naudoja Next.js router ir usePathname kabliukai, skirti valdyti maršrutą ir sekti srovę pathname. Valstybė valdoma naudojant useState kabliukas, kad perjungtumėte kalbos parinkčių išskleidžiamojo meniu matomumą. Masyvas vadinamas options saugo kalbos parinktis, kuriose kiekvienas objektas reiškia kalbą ir turi atitinkamas jos savybes.

Funkcija setOption yra apibrėžtas taip, kad tvarkytų kalbos pasirinkimą. Spustelėjus kalbos parinktį, ji atnaujina URL su pasirinktu kalbos kodu. Jei kalbos parinktis atitinka šiuo metu pasirinktą kalbą, šalia jos rodoma varnelės piktograma.

Sukurta naudojant Tailwind CSS, LangSwitcher komponentas pagerina vartotojo patirtį suteikdamas intuityvią sąsają kalbai pasirinkti daugiakalbėse Next.js 14 programose.

Dabar, kai turime paruošę kalbos perjungimo komponentą, integruojame jį į savo header.tsx failą makete, kad jį būtų galima pasiekti visuose mūsų programos puslapiuose. Taigi, mes turime tai: vartotojai gali lengvai perjungti kalbas, nepaisant to, kuriame puslapyje jie yra.

Išvada

Apibendrinant galima teigti, kad internacionalizacija atlieka itin svarbų vaidmenį pasiekiant pasaulinę auditoriją ir gerinant naudotojų patirtį teikiant turinį vartotojų pageidaujamomis kalbomis. Naudodami Next.js 14, kūrėjai turi galingų įrankių, leidžiančių efektyviai kurti dinamines daugiakalbes svetaines.

Nuo pradinės sąrankos naudojant next-intl Norėdami sukurti konkrečiai kalbai būdingą maršruto parinkimą ir dinamiškus šliužus, Next.js 14 organizuoja daugiakalbio žiniatinklio kūrimo sudėtingumą. Be to, išnagrinėjome dinaminio kalbos perjungiklio sukūrimą, kad pagerintume naudotojų patirtį.

Norėdami pamatyti, kaip projektas veikia, peržiūrėkite tiesioginę demonstraciją, surengtą Vercel. Be to, vertingos įžvalgos ir kodų bazės gairės pateikiamos svetainėje GitHub saugykla.