M

MLOG

ไทย

เรียนรู้วิธีการทำ Internationalization (i18n) อย่างราบรื่นในแอปพลิเคชัน Next.js ของคุณเพื่อเข้าถึงผู้ใช้ทั่วโลก ครอบคลุมเรื่อง routing, การแปลเนื้อหา และแนวทางปฏิบัติที่ดีที่สุด

การทำ Internationalization ใน Next.js: สร้างแอปหลายภาษาเพื่อเข้าถึงผู้ใช้ทั่วโลก

ในโลกที่เชื่อมต่อถึงกันในปัจจุบัน การสร้างแอปพลิเคชันที่ตอบสนองต่อผู้ใช้ทั่วโลกไม่ใช่เรื่องฟุ่มเฟือยอีกต่อไป แต่เป็นสิ่งจำเป็น Next.js ซึ่งเป็นเฟรมเวิร์ก React ที่ทรงพลัง มีฟีเจอร์ที่แข็งแกร่งสำหรับการทำ Internationalization (i18n) ช่วยให้คุณสร้างแอปพลิเคชันหลายภาษาที่มอบประสบการณ์ที่ปรับให้เข้ากับท้องถิ่นแก่ผู้ใช้ทั่วโลก คู่มือฉบับสมบูรณ์นี้จะแนะนำคุณเกี่ยวกับแนวคิด เทคนิค และแนวทางปฏิบัติที่ดีที่สุดที่จำเป็นสำหรับการสร้างแอปพลิเคชัน Next.js ที่รองรับหลายภาษา

ทำความเข้าใจ Internationalization และ Localization

ก่อนที่จะลงลึกในรายละเอียดของ Next.js i18n เรามาทำความเข้าใจคำศัพท์สำคัญกันก่อน:

โดยพื้นฐานแล้ว i18n เป็นการเตรียมแอปพลิเคชันของคุณสำหรับ localization การแยกองค์ประกอบที่ขึ้นอยู่กับภาษาออกจากโค้ดหลักจะทำให้การปรับแอปพลิเคชันให้เข้ากับตลาดต่างๆ ทำได้ง่ายขึ้น

ทำไมต้องทำ Internationalization ใน Next.js?

การทำ i18n ในแอปพลิเคชัน Next.js ของคุณมีประโยชน์มากมาย:

ฟีเจอร์และการตั้งค่า i18n ของ Next.js

Next.js มีการรองรับ i18n ในตัวผ่านฟีเจอร์การกำหนดเส้นทาง (routing) และการจัดการเนื้อหา ต่อไปนี้คือรายละเอียดของฟีเจอร์ที่สำคัญ:

1. การตั้งค่า i18n ใน next.config.js

การกำหนดค่าหลักสำหรับ i18n อยู่ในไฟล์ next.config.js นี่คือตัวอย่าง:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // อาร์เรย์ของภาษาที่รองรับ (รหัสภาษา)
    defaultLocale: 'en', // ภาษาเริ่มต้นที่จะใช้
    localeDetection: true, // เปิด/ปิดการตรวจจับภาษาอัตโนมัติตามการตั้งค่าของเบราว์เซอร์ (เป็นทางเลือก)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

คำอธิบาย:

2. การกำหนดเส้นทางด้วย Locale Prefixes

Next.js จะเพิ่มคำนำหน้า (prefix) ที่เป็น locale ให้กับเส้นทางโดยอัตโนมัติ ตัวอย่างเช่น หากคุณมีเพจที่ /about และ locale คือ 'es' (ภาษาสเปน) URL จะกลายเป็น /es/about ซึ่งจะช่วยให้มีหน้าเว็บเวอร์ชันภาษาต่างๆ และทำให้เครื่องมือค้นหาสามารถจัดทำดัชนีเนื้อหาสำหรับแต่ละ locale ได้ เฟรมเวิร์กจะจัดการการเปลี่ยนเส้นทางและการกำหนดเส้นทางให้คุณเอง

3. การใช้ useRouter Hook

useRouter hook จาก next/router ช่วยให้สามารถเข้าถึง locale ปัจจุบันและข้อมูลการกำหนดเส้นทางอื่นๆ ได้


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Current locale: {locale}

      
Available locales: {locales.join(', ')}

      
Default locale: {defaultLocale}

    

  );
}

export default MyComponent;

อ็อบเจ็กต์ router มีคุณสมบัติที่สำคัญดังต่อไปนี้:

กลยุทธ์การแปลเนื้อหา

เมื่อคุณกำหนดค่าแอปพลิเคชัน Next.js สำหรับ i18n แล้ว คุณจะต้องนำกลยุทธ์สำหรับการแปลเนื้อหาของคุณมาใช้ นี่คือแนวทางยอดนิยมหลายวิธี:

1. การใช้ระบบจัดการการแปลโดยเฉพาะ (TMS)

สำหรับโครงการขนาดใหญ่ที่มีหลายภาษา ขอแนะนำให้ใช้ TMS เป็นอย่างยิ่ง ตัวเลือกยอดนิยม ได้แก่:

ประโยชน์:

2. การสร้างไฟล์แปลภาษาแบบ JSON

สำหรับโครงการขนาดเล็ก การใช้ไฟล์ JSON เพื่อจัดเก็บคำแปลเป็นวิธีที่ง่ายและมีประสิทธิภาพ

ตัวอย่างโครงสร้างไดเร็กทอรี:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

ตัวอย่าง en.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

ตัวอย่าง es.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

ตัวอย่าง MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

แนวทางนี้ให้ความยืดหยุ่นและตรงไปตรงมาสำหรับโครงการขนาดเล็ก โดยทั่วไปแล้วง่ายต่อการอัปเดตและบำรุงรักษา

3. การใช้ไลบรารีการแปล

ไลบรารี JavaScript หลายตัวช่วยให้การแปลเนื้อหาภายในคอมโพเนนต์ React ของคุณง่ายขึ้น

ตัวอย่างการใช้ next-i18next (การติดตั้ง: npm install next-i18next i18next react-i18next):

สร้างไฟล์การกำหนดค่า i18n (เช่น i18n.js ในไดเร็กทอรีรากของคุณ):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

สร้างการกำหนดค่า Next.js ของคุณสำหรับ next-i18next


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // other configuration
}

module.exports = nextConfig

เพิ่มการกำหนดค่าและการนำเข้าคำแปลไปยัง _app.js ของคุณ:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

สร้างโฟลเดอร์และใส่ locale สำหรับคำแปลของคุณ


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

ตัวอย่าง en/common.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

การใช้คำแปลในคอมโพเนนต์:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

ตัวอย่างนี้ใช้ useTranslation hook เพื่อดึงคำแปลตาม locale ปัจจุบัน

การจัดการ Dynamic Routes และ Static Site Generation (SSG)

Internationalization จะซับซ้อนมากขึ้นเมื่อต้องจัดการกับ dynamic routes (เช่น บล็อกโพสต์, หน้าผลิตภัณฑ์) และ Static Site Generation (SSG)

1. Dynamic Routes (เช่น /blog/[slug])

สำหรับ dynamic routes คุณจะต้องสร้างเส้นทางที่ถูกต้องสำหรับแต่ละ locale ในช่วงเวลา build โดยใช้ getStaticPaths ฟังก์ชันนี้จะส่งคืนอาร์เรย์ของเส้นทางที่ Next.js ควร pre-render


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // ดึงข้อมูลบล็อกโพสต์

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // หรือ 'blocking' หากคุณต้องการแสดงสถานะกำลังโหลด
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

คำอธิบาย:

2. Static Site Generation (SSG) ด้วย getStaticProps

ใน getStaticProps คุณสามารถดึงเนื้อหาที่แปลตามพารามิเตอร์ locale ได้


export async function getStaticProps({ params, locale }) {
  // ดึงเนื้อหาตาม locale และ params
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

ฟังก์ชัน getPostBySlug ควรดึงเนื้อหาที่แปลสำหรับ slug และ locale ที่กำหนด ซึ่งอาจดึงมาจากไฟล์แปลภาษา ฐานข้อมูล หรือ CMS ของคุณ

3. Server-Side Rendering (SSR) ด้วย getServerSideProps

สำหรับเนื้อหาที่ต้องดึงข้อมูล ณ เวลาที่ร้องขอ ให้ใช้ getServerSideProps ซึ่งมีประโยชน์หากเนื้อหามีการเปลี่ยนแปลงบ่อยครั้งหรือเป็นแบบส่วนตัวสำหรับผู้ใช้แต่ละคน


export async function getServerSideProps({ params, locale, req, res }) {
  // ดึงข้อมูลตาม locale และ params (เช่น จากฐานข้อมูล)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

แนวทางปฏิบัติที่ดีที่สุดสำหรับ Internationalization ใน Next.js

การปฏิบัติตามแนวทางเหล่านี้จะช่วยให้คุณสร้างแอปพลิเคชันหลายภาษาที่แข็งแกร่ง บำรุงรักษาง่าย และเป็นมิตรกับผู้ใช้:

ข้อควรพิจารณาด้าน SEO สำหรับเว็บไซต์ที่รองรับหลายภาษา

การปรับปรุงเว็บไซต์ที่รองรับหลายภาษาของคุณสำหรับเครื่องมือค้นหาเป็นสิ่งจำเป็นสำหรับการขับเคลื่อนปริมาณการเข้าชมแบบออร์แกนิกจากทั่วโลก นี่คือแนวทางปฏิบัติที่ดีที่สุดด้าน SEO ที่สำคัญบางประการ:

ตัวอย่าง: การสร้างบล็อกหลายภาษาแบบง่ายๆ

เรามาสร้างตัวอย่างบล็อกหลายภาษาแบบง่ายๆ โดยใช้ Next.js กัน ซึ่งจะให้ภาพประกอบที่เป็นรูปธรรมมากขึ้นเกี่ยวกับวิธีการนำแนวคิดที่กล่าวถึงข้างต้นไปใช้

1. การตั้งค่าโครงการ

สร้างโครงการ Next.js ใหม่:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

2. กำหนดค่า i18n (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. สร้างไฟล์แปลภาษา

สร้างโฟลเดอร์ locales ในไดเร็กทอรีรากและเพิ่มไฟล์ JSON ต่อไปนี้:

locales/en.json:


{
  "title": "ยินดีต้อนรับสู่บล็อกของฉัน",
  "postTitle": "โพสต์แรกของฉัน",
  "postContent": "นี่คือเนื้อหาของบล็อกโพสต์แรกของฉัน"
}

locales/es.json:


{
  "title": "ยินดีต้อนรับสู่บล็อกของฉัน",
  "postTitle": "โพสต์แรกของฉัน",
  "postContent": "นี่คือเนื้อหาของบล็อกโพสต์แรกของฉัน"
}

locales/fr.json:


{
  "title": "ยินดีต้อนรับสู่บล็อกของฉัน",
  "postTitle": "บทความแรกของฉัน",
  "postContent": "นี่คือเนื้อหาของบทความบล็อกแรกของฉัน"
}

4. สร้างคอมโพเนนต์บล็อกโพสต์ (เช่น components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. สร้างหน้า Index (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

ตัวอย่างแบบง่ายนี้แสดงให้เห็นถึงหลักการพื้นฐานของ internationalization ใน Next.js คุณสามารถขยายกรอบพื้นฐานนี้เพื่อรวมฟีเจอร์ที่ซับซ้อนมากขึ้น เช่น dynamic routes และการผสานรวมกับระบบจัดการการแปล ลองพิจารณาปรับปรุงลิงก์ด้านบนด้วยคอมโพเนนต์ Link และเพิ่มแอตทริบิวต์ locale ที่เหมาะสม

6. รันแอปพลิเคชัน

รันแอปพลิเคชันด้วย:


npm run dev

ตอนนี้คุณสามารถเข้าถึงบล็อกของคุณได้ที่ http://localhost:3000 (ภาษาอังกฤษ), http://localhost:3000/es (ภาษาสเปน) และ http://localhost:3000/fr (ภาษาฝรั่งเศส) คุณควรเห็นชื่อเรื่องและเนื้อหาบล็อกโพสต์ที่แปลตาม locale ที่เลือก

สรุป

Next.js มีชุดฟีเจอร์ที่ครอบคลุมสำหรับการทำ internationalization ในเว็บแอปพลิเคชันของคุณ โดยการปฏิบัติตามหลักการและเทคนิคที่ระบุไว้ในคู่มือนี้ คุณสามารถสร้างแอปพลิเคชันหลายภาษาที่มอบประสบการณ์ที่แปลเป็นภาษาท้องถิ่นให้กับผู้ใช้ทั่วโลก อย่าลืมวางแผนกลยุทธ์ i18n ของคุณแต่เนิ่นๆ เลือกวิธีการแปลที่เหมาะสมกับความต้องการของคุณ และให้ความสำคัญกับประสบการณ์ของผู้ใช้ ด้วยการวางแผนและการดำเนินการอย่างรอบคอบ คุณสามารถสร้างแอปพลิเคชันที่โดนใจผู้ชมทั่วโลกและปลดล็อกโอกาสใหม่ๆ ในการเติบโต การเรียนรู้อย่างต่อเนื่อง การติดตามข่าวสารล่าสุดและแนวทางปฏิบัติที่ดีที่สุดจะช่วยให้แน่ใจว่าคุณใช้เครื่องมือและเทคโนโลยีของคุณอย่างมีประสิทธิภาพ

ในขณะที่เทคโนโลยีก้าวหน้า คาดว่าจะได้เห็นฟีเจอร์ i18n ที่ล้ำหน้ายิ่งขึ้น ความสามารถในการเข้าถึงผู้ใช้ในวัฒนธรรมและกลุ่มภาษาที่แตกต่างกันจะยังคงเป็นสิ่งสำคัญอันดับต้นๆ สำหรับนักพัฒนาแอปพลิเคชันทั่วโลก ดังนั้น การเรียนรู้พื้นฐานของ i18n จึงเป็นทักษะที่มีค่าซึ่งจะช่วยเพิ่มมูลค่าของคุณในภูมิทัศน์การพัฒนาที่เป็นสากลในปัจจุบัน