سایت خبرکاو

جستجوگر هوشمند اخبار و مطالب فناوری

بین المللی سازی پیشرفته (i18n) در Next.js 14

در این مقاله، به این موضوع می پردازیم که چرا بین المللی سازی (i18n) برای توسعه وب حیاتی است، ویژگی های جدید Next.js 14 را تحلیل می کنیم و یاد می گیریم که چگونه تجربه های چند زبانه وب را بدون زحمت ایجاد کنید. فهرست مطالب تصور کنید در وب سایتی فرود آمده اید که در آن نیاز به استخراج اطلاعات مهم دارید و ناگهان به یک مانع زبانی برخورد می کنید. ناامید کننده، درست است؟ اینجاست ...

در این مقاله، به این موضوع می پردازیم که چرا بین المللی سازی (i18n) برای توسعه وب حیاتی است، ویژگی های جدید Next.js 14 را تحلیل می کنیم و یاد می گیریم که چگونه تجربه های چند زبانه وب را بدون زحمت ایجاد کنید.

فهرست مطالب

تصور کنید در وب سایتی فرود آمده اید که در آن نیاز به استخراج اطلاعات مهم دارید و ناگهان به یک مانع زبانی برخورد می کنید. ناامید کننده، درست است؟ اینجاست که بین‌المللی‌سازی (i18n) وارد می‌شود و وب‌سایت‌ها را برای مردم سراسر جهان قابل دسترس می‌کند.

Next.js 14 توسعه وب چند زبانه را با ابزارهایی مانند مسیریابی زبان و بارگذاری پویا پیام ساده می کند. این طراحی شده است تا به توسعه دهندگان کمک کند تا به راحتی برنامه های وب پویا و چند زبانه ایجاد کنند.

در پایان این مقاله، بینش‌های عملی در مورد بین‌المللی‌سازی در Next.js 14، از راه‌اندازی یک پروژه جدید تا اضافه کردن تغییر زبان، خواهیم داشت.

راه اندازی یک پروژه Next.js 14

بیایید با راه اندازی پروژه خود با i18n داخلی شروع کنیم.

مرحله 1. با اجرای دستور زیر یک پروژه Next.js جدید ایجاد کنید. به خاطر این مقاله، نام آن را i18n-next-app می گذاریم:

 npx create-next-app i18n-next-app

مرحله 2. به پوشه پروژه خود بروید و Next.js (نسخه 14) و بسته next-intl را نصب کنید:

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

دستور بالا Next.js را به همراه جدیدترین آپشن های آن مانند i18n نصب می‌کند و next-intl شامل می‌شود. دلیل استفاده از next-intl ادغام یکپارچه آن با App Router از طریق یک بخش پویا [locale] است. این ادغام به ما امکان می دهد محتوا را به زبان های مختلف ارائه دهیم.

مرحله 3. پشتیبانی i18n را در Next.js 14 در پروژه خود با گفت ن پیکربندی زیر در next.config.js خود فعال کنید:

 const withNextIntl = require ( 'next-intl/plugin' ) ( ) ; module . exports = withNextIntl ( { } ) ;

این کد بالا Next.js را با افزونه next-intl برای قابلیت های بین المللی سازی پیشرفته پیکربندی می کند. این افزونه را وارد می‌کند و آن را در پیکربندی Next.js اعمال می‌کند و به توسعه‌دهندگان اجازه می‌دهد تا به راحتی آپشن های بین‌المللی را در پروژه‌های خود بگنجانند. این در حالی انجام می شود که فضایی برای حفظ سایر پیکربندی های پروژه وجود دارد.

مرحله 4: یک پوشه content در ریشه پروژه ایجاد کنید. در داخل، فایل های JSON را برای هر محلی ایجاد کنید ( en.json ، es.json ، de.json )، حاوی رشته های ترجمه شده شما. این رویکرد محدودیت فعلی Next.js در ترجمه خودکار را جبران می کند.

به خاطر این پروژه، می‌خواهیم از انگلیسی، اسپانیایی و آلمانی استفاده کنیم، اما در صورت نیاز به نیازهای پروژه خود، زبان‌های محلی بیشتری اضافه کنید:

 { "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." } }

محتوای بالا محتوای صفحه فرود پروژه‌های ما را نشان می‌دهد که برای سه زبان متمایز طراحی شده است.

مسیریابی زبان و اسلاگ

در یک برنامه وب چند زبانه، مسیریابی زبان تضمین می کند که کاربران بر اساس ترجیحات زبانی خود به نسخه مناسب سایت هدایت می شوند. علاوه بر این، اسلاگ ها امکان تولید پویا مسیرها را فراهم می کنند، به ویژه برای صفحات پر محتوا مانند وبلاگ ها یا فهرست محصولات مفید است.

با نهایی شدن پیکربندی، اجازه دهید مسیریابی مخصوص زبان را پیاده سازی کنیم. بیایید بدون اتکا به کتابخانه های اضافی، زبانه های زبان را نیز راه اندازی کنیم.

مرحله 1. در پوشه src/ ، یک فایل جدید ایجاد کنید و نام آن را i18n.ts بگذارید. آن را برای بارگیری پویا پیام ها مطابق با منطقه پیکربندی کنید:

 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 } ; } ) ;

در این مرحله، بارگذاری پیام پویا را بر اساس منطقه انتخابی تنظیم می کنیم. تابع getRequestConfig به صورت پویا فایل‌های JSON مربوط به زبان محلی را از پوشه content وارد می‌کند. این تضمین می کند که برنامه به راحتی محتوای خود را با ترجیحات زبانی مختلف تطبیق می دهد.

مرحله 2. یک فایل middleware.ts در داخل src/ ایجاد کنید تا با زبان‌های محلی مطابقت داشته باشد و امکان هدایت مجدد کاربر بر اساس منطقه را فراهم کند:

 import createMiddleware from 'next-intl/middleware' ; const middleware = createMiddleware ( { locales : [ 'en' , 'de' , 'es' ] , defaultLocale : 'en' } ) ; export default middleware ; export const config = { matcher : [ '/' , '/(de|es|en)/:page*' ] } ;

در این مرحله، ما یک میان‌افزار تعریف می‌کنیم که با زبان‌های محلی مطابقت دارد و کاربران را بر اساس زبان دلخواهشان هدایت می‌کند. ما مناطق پشتیبانی شده را مشخص می کنیم و در صورت عدم تطابق، یک محلی پیش فرض تعیین می کنیم.

مرحله 3. در مرحله بعد، زبان برنامه را پیکربندی می کنیم و طرح و اجزای صفحه را تغییر می دهیم. یک دایرکتوری [locale] در app/ ایجاد کنید و layout.tsx و page.tsx را به داخل آن منتقل کنید.

ساختار پوشه

 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 > < / > ) ; }

از کد بالا، حذف استایل‌ها (نسخه استایل‌شده را می‌توانید در اینجا پیدا کنید) برای وضوح، از قلاب useTranslations from next-intl برای بازیابی content ترجمه شده استفاده کرده‌ایم که رویکرد بهتری برای مدیریت محتوای چند زبانه ارائه می‌دهد.

این قلاب به ما امکان می‌دهد ترجمه‌های کلیدهای خاص، مانند title یا description از فایل‌های پیام JSON خود بازیابی کنیم. با این پیاده سازی ها، برنامه Next.js 14 ما اکنون به مسیرهای زبانی و اسلاگ مجهز شده است.

مرحله 4. وقتی برنامه را اجرا می کنیم و از URL هایی مانند localhost:port/en ، localhost:port/es ، localhost:port/de بازدید می کنیم، خروجی را به زبان های مختلف می بینیم.

با این مراحل، ما مسیریابی زبان و اسلاگ‌ها را در برنامه Next.js 14 خود با موفقیت پیاده‌سازی کرده‌ایم و تجربه چندزبانه یکپارچه را برای کاربران فراهم می‌کنیم.

مسیر صفحه با زبان ها

پیاده سازی تغییر زبان

در اینجا ما یک جزء تغییر زبان LangSwitch.tsx ایجاد می کنیم. این جزء به عنوان دروازه ای برای کاربران برای انتخاب زبان مورد نظر خود عمل می کند:

 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 ;

مؤلفه LangSwitcher در بالا از router Next.js و استفاده از قلاب‌های usePathname برای مدیریت مسیریابی و ردیابی pathname فعلی استفاده می‌کند. این حالت با استفاده از قلاب useState مدیریت می‌شود تا نمایان بودن گزینه‌های زبان کشویی را تغییر دهید. آرایه‌ای به نام options گزینه‌های زبان را ذخیره می‌کند، که هر شی یک زبان را نشان می‌دهد و دارای آپشن های مربوطه است.

تابع setOption برای مدیریت انتخاب زبان تعریف شده است. هنگامی که یک گزینه زبان کلیک می شود، URL با کد زبان انتخاب شده به روز می کند. اگر یک گزینه زبان با زبان فعلی انتخاب شده مطابقت داشته باشد، یک نماد علامت در کنار آن نمایش داده می شود.

مولفه LangSwitcher که با Tailwind CSS طراحی شده است، تجربه کاربر را با ارائه یک رابط بصری برای انتخاب زبان در برنامه های چند زبانه Next.js 14 افزایش می دهد.

تغییر زبان

اکنون که مؤلفه تعویض‌کننده زبان خود را آماده کرده‌ایم، آن را در فایل header.tsx خود در طرح‌بندی ادغام می‌کنیم تا در تمام صفحات برنامه‌مان قابل دسترسی باشد. پس در اینجا ما آن را داریم: کاربران بدون توجه به اینکه در کدام صفحه هستند می توانند بدون زحمت زبان خود را تغییر دهند.

مسیریابی صفحه با سوییچرها

نتیجه

به طور خلاصه، بین المللی شدن نقش مهمی در دستیابی به مخاطبان جهانی و بهبود تجربه کاربر با ارائه محتوا به زبان های دلخواه کاربران دارد. با Next.js 14، توسعه‌دهندگان ابزارهای قدرتمندی برای ایجاد وب‌سایت‌های چندزبانه پویا در اختیار دارند.

Next.js 14 پیچیدگی های توسعه وب چندزبانه را از راه اندازی اولیه با استفاده از next-intl تا ایجاد مسیریابی خاص زبان و اسلاگ های پویا سازماندهی می کند. علاوه بر این، ما ایجاد یک تغییر زبان پویا را برای ارتقای تجربه کاربر تحلیل کردیم.

برای مشاهده این پروژه در عمل، نمایش زنده میزبانی شده در Vercel را تحلیل کنید. علاوه بر این، اطلاعات و راهنمایی های ارزشمندی برای پایگاه کد در مخزن GitHub موجود است.

خبرکاو