วิธีการใช้งานการทำให้รองรับหลายภาษาในแอปพลิเคชัน Next.js ที่ใช้งาน App Router
ทำให้แอปพลิเคชัน React ของคุณเข้าถึงได้มากขึ้นและขยายตลาดใหม่ด้วยการแปลภาษา (i18n)
ในขณะที่โลกมีการเชื่อมโยงกันมากขึ้นเรื่อยๆ การพัฒนาเว็บที่สามารถรองรับผู้ใช้จากประเทศและวัฒนธรรมที่แตกต่างกันจึงยิ่งมีความสำคัญ หนึ่งในวิธีหลักในการบรรลุเป้าหมายนี้คือการทำ internationalization (i18n) ซึ่งช่วยให้คุณปรับแอปพลิเคชันให้รองรับภาษาต่างๆ สกุลเงิน และรูปแบบวันที่ที่แตกต่างกัน
ในบทความนี้ เราจะสำรวจวิธีเพิ่ม internationalization ให้กับแอป React Next.js ของคุณ โดยมีการเรนเดอร์ฝั่งเซิร์ฟเวอร์ TL;DR: ดูตัวอย่างครบถ้วนได้ที่นี่
คำแนะนำนี้สำหรับแอปพลิเคชัน Next.js ที่ใช้ App Router เท่านั้น
หากคุณใช้ Pages Router โปรดดูคำแนะนำนี้แทน
ขั้นตอนที่ 1: ติดตั้งไลบรารี i18n
ในการใช้งานการแปลภาษาหลายภาษาในแอป Next.js ของคุณ เราจะเริ่มด้วยการเลือกไลบรารี i18n มีไลบรารียอดนิยมมากมาย รวมถึง next-intl อย่างไรก็ตาม ในตัวอย่างนี้ เราจะใช้ TacoTranslate
TacoTranslate แปลสตริงของคุณโดยอัตโนมัติเป็นทุกภาษาโดยใช้ AI ที่ล้ำสมัย และช่วยให้คุณไม่ต้องจัดการไฟล์ JSON ที่น่าเบื่อหน่าย
ให้เราติดตั้งโดยใช้ npm ในเทอร์มินัลของคุณ:
npm install tacotranslate
ขั้นตอนที่ 2: สร้างบัญชี TacoTranslate ฟรี
ตอนนี้ที่คุณได้ติดตั้งโมดูลแล้ว ก็ถึงเวลาสร้างบัญชี TacoTranslate ของคุณ โครงการแปล และคีย์ API ที่เกี่ยวข้อง สร้างบัญชีที่นี่ ฟรี และ ไม่จำเป็นต้องใส่บัตรเครดิต
ภายในส่วนติดต่อผู้ใช้ของแอปพลิเคชัน TacoTranslate ให้สร้างโปรเจกต์ และไปที่แท็บ API keys ของโปรเจกต์นั้น สร้างกุญแจ read
หนึ่งอัน และกุญแจ read/write
หนึ่งอัน เราจะบันทึกกุญแจเหล่านี้เป็นตัวแปรสภาพแวดล้อม กุญแจ read
คือสิ่งที่เราเรียกว่ากุญแจ public
และกุญแจ read/write
คือกุญแจ secret
ตัวอย่างเช่น คุณสามารถเพิ่มกุญแจพวกนี้ลงในไฟล์ .env
ที่อยู่ในโฟลเดอร์หลักของโปรเจกต์ของคุณได้
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
โปรดระวังอย่าให้ read/write
API key ความลับหลุดสู่สภาพแวดล้อมฝั่งไคลเอนต์ในระบบโปรดักชันเด็ดขาด
เราจะเพิ่มตัวแปรสภาพแวดล้อมอีกสองตัว: TACOTRANSLATE_DEFAULT_LOCALE
และ TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: รหัสภาษาค่าตกกลับเริ่มต้น ในตัวอย่างนี้ เราจะตั้งค่าเป็นen
สำหรับภาษาอังกฤษTACOTRANSLATE_ORIGIN
: "โฟลเดอร์" ที่จะเก็บข้อความสตริงของคุณ เช่น URL ของเว็บไซต์ของคุณ อ่านเพิ่มเติมเกี่ยวกับ origins ได้ที่นี่
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
ขั้นตอนที่ 3: การตั้งค่า TacoTranslate
ในการรวม TacoTranslate เข้ากับแอปพลิเคชันของคุณ คุณจะต้องสร้าง client โดยใช้ API keys ที่ได้จากขั้นตอนก่อนหน้า เช่น สร้างไฟล์ชื่อ /tacotranslate-client.js
const {default: createTacoTranslateClient} = require('tacotranslate');
const tacoTranslate = createTacoTranslateClient({
apiKey:
process.env.TACOTRANSLATE_SECRET_API_KEY ??
process.env.TACOTRANSLATE_PUBLIC_API_KEY ??
process.env.TACOTRANSLATE_API_KEY,
projectLocale:
process.env.TACOTRANSLATE_IS_PRODUCTION === 'true'
? process.env.TACOTRANSLATE_PROJECT_LOCALE
: undefined,
});
module.exports = tacoTranslate;
เราจะทำการกำหนดค่า TACOTRANSLATE_API_KEY
และ TACOTRANSLATE_PROJECT_LOCALE
โดยอัตโนมัติในไม่ช้า
การสร้าง client ในไฟล์แยกออกมาต่างหากทำให้สามารถใช้งานใหม่ได้ง่ายขึ้นในภายหลัง getLocales
เป็นเพียงฟังก์ชันยูทิลิตี้ที่มีการจัดการข้อผิดพลาดในตัวอยู่แล้ว ตอนนี้ ให้สร้างไฟล์ชื่อ /app/[locale]/tacotranslate.tsx
ซึ่งเราจะทำการติดตั้ง TacoTranslate
provider
'use client';
import React, {type ReactNode} from 'react';
import {
type TranslationContextProperties,
TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';
export default function TacoTranslate({
locale,
origin,
localizations,
children,
}: TranslationContextProperties & {
readonly children: ReactNode;
}) {
return (
<ImportedTacoTranslate
client={tacoTranslateClient}
locale={locale}
origin={origin}
localizations={localizations}
>
{children}
</ImportedTacoTranslate>
);
}
โปรดสังเกต 'use client';
ซึ่งบ่งชี้ว่านี่เป็นส่วนประกอบของฝั่งไคลเอนต์
เมื่อ context provider พร้อมใช้งานแล้ว ให้สร้างไฟล์ชื่อ /app/[locale]/layout.tsx
ซึ่งเป็น root layout ในแอปพลิเคชันของเรา โปรดสังเกตว่าเส้นทางนี้มีโฟลเดอร์ที่ใช้ Dynamic Routes โดยที่ [locale]
คือพารามิเตอร์แบบไดนามิก
import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';
export async function generateStaticParams() {
const locales = await tacoTranslateClient.getLocales();
return locales.map((locale) => ({locale}));
}
type RootLayoutParameters = {
readonly params: Promise<{locale: Locale}>;
readonly children: ReactNode;
};
export default async function RootLayout({params, children}: RootLayoutParameters) {
const {locale} = await params;
const origin = process.env.TACOTRANSLATE_ORIGIN;
const localizations = await tacoTranslateClient.getLocalizations({
locale,
origins: [origin /* , other origins to fetch */],
});
return (
<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
<body>
<TacoTranslate
locale={locale}
origin={origin}
localizations={localizations}
>
{children}
</TacoTranslate>
</body>
</html>
);
}
สิ่งแรกที่ควรทราบที่นี่คือ เรากำลังใช้พารามิเตอร์ Dynamic Route
[locale]
ของเราเพื่อดึงคำแปลสำหรับภาษานั้น นอกจากนี้ generateStaticParams
ยังช่วยให้แน่ใจว่าโค้ดภาษาทั้งหมดที่คุณเปิดใช้งานสำหรับโปรเจกต์ของคุณถูกเรนเดอร์ล่วงหน้าแล้ว
ตอนนี้ มาสร้างหน้าแรกของเรากันเถอะ! สร้างไฟล์ชื่อ /app/[locale]/page.tsx
import React from 'react';
import {Translate} from 'tacotranslate/react';
export const revalidate = 60;
export default async function Page() {
return (
<Translate string="Hello, world!" />
);
}
โปรดสังเกตตัวแปร revalidate
ซึ่งบอก Next.js ให้สร้างหน้าขึ้นมาใหม่หลังจาก 60 วินาที และทำให้การแปลของคุณเป็นปัจจุบันอยู่เสมอ
ขั้นตอนที่ 4: การใช้งานการเรนเดอร์ฝั่งเซิร์ฟเวอร์
TacoTranslate รองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ ซึ่งช่วยปรับปรุงประสบการณ์ผู้ใช้เป็นอย่างมากโดยแสดงเนื้อหาที่แปลแล้วทันที แทนที่จะเป็นการแสดงเนื้อหาที่ไม่ได้แปลก่อน นอกจากนี้ เรายังสามารถข้ามการร้องขอข้อมูลเครือข่ายบนฝั่งไคลเอนต์ได้ เพราะเรามีการแปลที่ต้องการสำหรับหน้าที่ผู้ใช้กำลังดูอยู่แล้ว
ในการตั้งค่า server side rendering ให้สร้างหรือแก้ไขไฟล์ /next.config.js
:
const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');
module.exports = async () => {
const config = await withTacoTranslate(
{},
{
client: tacoTranslateClient,
isProduction:
process.env.TACOTRANSLATE_ENV === 'production' ||
process.env.VERCEL_ENV === 'production' ||
(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
process.env.NODE_ENV === 'production'),
}
);
// NOTE: Remove i18n from config when using the app router
return {...config, i18n: undefined};
};
ปรับแต่งการตรวจสอบ isProduction
ให้เหมาะสมกับการตั้งค่าของคุณ หากเป็น true
TacoTranslate จะใช้กุญแจ API สาธารณะ หากเราอยู่ในสภาพแวดล้อมท้องถิ่น, ทดสอบ หรือการเตรียมการ (isProduction
is false
) เราจะใช้กุญแจ API ลับ read/write
เพื่อให้แน่ใจว่าสตริงใหม่จะถูกส่งไปเพื่อแปล
เพื่อให้การกำหนดเส้นทางและการเปลี่ยนเส้นทางทำงานตามที่คาดไว้ เราจำเป็นต้องสร้างไฟล์ที่ชื่อว่า /middleware.ts
โดยใช้ Middleware เราสามารถเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าที่แสดงในภาษาที่ผู้ใช้นิยมได้
import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';
export const config = {
matcher: ['/((?!api|_next|favicon.ico).*)'],
};
export async function middleware(request: NextRequest) {
return tacoTranslateMiddleware(tacoTranslate, request);
}
อย่าลืมตั้งค่า matcher
ให้สอดคล้องกับ เอกสาร Next.js Middleware ด้วยนะคะ
บนฝั่งไคลเอนต์ คุณสามารถเปลี่ยนค่า locale
คุกกี้เพื่อเปลี่ยนภาษาที่ผู้ใช้ต้องการได้ โปรดดู โค้ดตัวอย่างแบบสมบูรณ์ เพื่อดูแนวทางการทำเช่นนี้!
ขั้นตอนที่ 5: ทำการปรับใช้และทดสอบ!
เราเสร็จเรียบร้อยแล้ว! แอป React ของคุณจะถูกแปลโดยอัตโนมัติเมื่อคุณเพิ่มสตริงใด ๆ ลงในคอมโพเนนต์ Translate
. โปรดสังเกตว่าเฉพาะสภาพแวดล้อมที่มีสิทธิ์ read/write
บน API key เท่านั้นที่จะสามารถสร้างสตริงใหม่เพื่อแปลได้ เราขอแนะนำให้มีสภาพแวดล้อม staging ที่ปิดและปลอดภัยซึ่งคุณสามารถทดสอบแอปพลิเคชัน production ของคุณด้วย API key แบบนั้น โดยเพิ่มสตริงใหม่ก่อนที่จะเปิดใช้งานจริง วิธีนี้จะช่วยป้องกันไม่ให้ใครก็ตามขโมย API key ลับของคุณ และอาจทำให้โครงการแปลของคุณบวมโดยการเพิ่มสตริงใหม่ที่ไม่เกี่ยวข้อง
โปรดอย่าลืม ดูตัวอย่างสมบูรณ์ ที่โปรไฟล์ GitHub ของเรา ที่นั่นคุณจะพบตัวอย่างการทำเช่นนี้โดยใช้ Pages Router ด้วยเช่นกัน! หากคุณพบปัญหาใดๆ โปรดอย่าลังเลที่จะ ติดต่อเรา เรายินดีเป็นอย่างยิ่งที่จะช่วยเหลือคุณ
TacoTranslate ช่วยให้คุณแปลแอป React ของคุณโดยอัตโนมัติอย่างรวดเร็วในทุกภาษา เริ่มต้นวันนี้!