- vừa được xem lúc

Cài đặt chuyển đổi ngôn ngữ trong một project NextJS

0 0 55

Người đăng: Nguyen Kieu Ngan

Theo Viblo Asia

Ở phiên bản Nextjs Version 10 mới đây, việc sử dụng i18n đã trở nên dễ dàng hơn qua tính nâng cao là Internationalized Routing. Trong bài viết này sẽ sử dụng Sub-path Routing (ví dụ: http://abc.com/en/) thay vì Domain Routing (ví dụ: http://abc.en).

Cài đặt cấu hình cơ bản

Tại file next.config.js

module.exports = { i18n: { locales: ['vi', 'en'], defaultLocale: 'vi', }, }

Đây là thiết lập cẩn thiết để bật chế độ phát hiện ngôn ngữ. Chế độ này sẽ chuyển hướng user đến đường dẫn có tiền tố /vi nếu như trình duyệt hiện tại đang dùng đang cài đặt ngôn ngữ là tiếng Việt làm ngôn ngữ mặc định. NextJs sẽ dựa vào Accept-Language HTTP Header để cố gắng setup đúng ngôn ngữ.

Tuy nhiên, nếu ngôn ngữ không chính xác thì nó sẽ sử dụng ngôn ngữ mặc định. Ví dụ, do đã config ngôn ngữ mặc định là VI (Vietnam), nên nếu trình duyệt hiện tại user sử dụng đang để ngôn ngữ là DE (German), tuy nhiên nó không xác định được theo ngôn ngữ trình duyệt đang cài đặt, nên nó sẽ mặc định cho về VI.

Quản lý Locale Files

NextJS không có quy định nào với việc quản lý locale data hay việc bạn nên sử dụng thư viện i18n nào (hoặc bất kì một thư viện nào khác) phù hợp nhất. Với project nhỏ, thì chỉ cần 1 file .JSON là đủ. Nhưng với những project lớn, việc chia nhỏ lẻ và tránh gộp chung chỉ một file là điều vô cùng cần thiết.

Ở đây chúng ta sẽ tạo một folder với tên là locale và tạo riêng 1 file .JSON cho từng ngôn ngữ. Tức là locale/vi.json và locale/en.json.

{ "greeting": "Xin chào!"
}

Có thể sử dụng từ khoá để hiển thị giá trị của ngôn ngữ đã dịch mà không cần bất kì thư viện nào. Tuy nhiên, chúng ta nên sử dụng react-intl vì nó là thư viện i18n khá phổ biến hiện có.

Cấu hình thêm như này trong file _app.js

import '../styles/index.css'
import { IntlProvider } from 'react-intl';
import { useRouter } from "next/router" const languages = { vi: require('../locale/vi.json'), en: require('../locale/en.json')
}; function MyApp({ Component, pageProps }) { const router = useRouter() const { locale, defaultLocale } = router; const messages = languages[locale]; return <IntlProvider messages={messages} locale={locale} defaultLocale={defaultLocale}> <Component {...pageProps} /> </IntlProvider>
} export default MyApp

Như trên, nghĩa là chúng ta đang đóng gói toàn bộ ứng dụng của mình bằng IntProvider, đồng thời pass qua các message và ngôn ngữ đã nhận được từ useRouter(). Giờ có thể sử dụng các component trong react-intl như FormatedMessage xuyên suốt app.

import { FormattedMessage } from 'react-intl' export default function Greeting() {
return ( <h1><FormattedMessage id="greeting" /></h1>
)}

Thay đổi ngôn ngữ

Khi chuyển đổi qua lại giữa các ngôn ngữ, cần phải duy trì được đúng ngôn ngữ mà user đã lựa chọn, khi user reload hay quay lại website vào lần sau. Nghĩa là sẽ setup giúp user ngôn ngữ ưa thích mà họ đã chọn, thay vì để NextJS tự phát hiện thay. Để làm được điều này, chúng ta có thể sử dụng Locale Cookie trong NextJS:

import { useRouter } from "next/router"
import { useCookies } from 'react-cookie'; export default function LanguageSwitcher() { const [ cookie, setCookie ] = useCookies(['NEXT_LOCALE']); const router = useRouter(); const { locale } = router; const switchLanguage = (e) => { const locale = e.target.value; router.push('/','/', { locale }); if(cookie.NEXT_LOCALE !== locale){ setCookie("NEXT_LOCALE", locale, { path: "/" }); } } return ( <select onChange={switchLanguage} defaultValue={locale} > <option value="vi">VI</option> <option value="en">EN</option> </select> );
}

getStaticProps với từng locale

Để hiển thị danh sách các bài đăng bằng ngôn ngữ đã chọn, locale params sẽ có sẵn trong getStaticProps, vì thế có thể pass chúng ngay trong chức năng fetching data.

Ví dụ:

export async function getStaticProps({ locale }) { const allPosts = await getAllPostsForHome(locale) return { props: { allPosts }, }
}

Tối ưu hoá phần tìm kiếm

NextJS sẽ thêm một thuộc tính ngôn ngữ toàn cục vào website cùng với locale hiện tại. Tuy nhiên, nếu có thêm file _document.js, thì cần đảm bảo rằng các giá trị ngôn ngữ được cố định sẵn trong đó phải được xoá hết đi.

Để cho các công cụ tìm kiếm tìm được bản bài đăng mới nhất bằng các ngôn ngữ khác nhau, chúng ta phải đặt thêm một thẻ meta là hreflang cho từng ngôn ngữ (bao gồm cả ngôn ngữ gốc), thẻ này sẽ đặt ở phần đầu của bài đăng trên website.

Ví dụ:

import Head from 'next/head' export default function Post({ post }) {
return (
... <article> <Head> <link rel="alternate" hreflang={locale} href={`${SITE_URL}${locale}/${post?.slug}`} /> <link rel="alternate" hreflang={altLocale} href={`${SITE_URL}${altLocale}/${altPost?.slug}`} /> </Head> </article>
...
)}

Kết luận

Trước đây cứ nghĩ rằng việc sử dụng i18n là một thứ gì đó khá phức tạp. Tuy nhiên với sự hỗ trợ của NextJS và các công cụ như react-intl, việc cung cấp một bản dịch hợp lý với user lại chưa bao giờ dễ dàng đến thế. Bài viết chỉ nằm ở mức cơ bản, và hi vọng có thể giúp ích được gì đó cho các member mới tìm hiểu về NextJS.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Viết một chiếc app quản lý Hạn sử dụng của thực phẩm

Mở đầu. Tôi là 1 kỹ sư công nghệ thông tin mới ra trường. Trong thời gian học Đại học, từ năm 1 tới năm 4, tôi đi làm thêm tại TSUTAYA (chuỗi cửa hàng bán sách, video...v.v nổi tiếng bên Nhật). Về chiếc App tôi đã phát triển. App tôi phát triển là Web App giúp quản lý hạn sử dụng của đồ ăn.

0 0 38

- vừa được xem lúc

Routing trong Next.js

Trước đó bạn có thể đang tò mò về Next.js, vào đây luôn bạn ơi. (go). .

1 0 44

- vừa được xem lúc

Cấu hình eslint airbnb, prettier cho dự next.js sử dụng typescript

Chào mọi, mình đã quay lại đây. Hôm nay mình sẽ đem đến một chủ đề linter cụ thể cấu hình eslint cho dự án next.

0 0 177

- vừa được xem lúc

Handling custom page navigation on Next.js

Last month we discussed about different kind of routing on Next.js. Here's a short example of creating a component that moves the user to next page. import { useRouter } from 'next/router'.

0 0 71

- vừa được xem lúc

Next Image một feature, một nâng cấp tuyệt vời version nextjs 10

NextJS đã cho ra mắt version 10 cách đây 2 tháng với hơn 20 fearture nâng cấp đáng giá. Chúng ta có thể kể ra những features nổi bật như. . Next/Image: với khẳ năng render image cho các kích thước màn hình tương ứng.

0 0 49

- vừa được xem lúc

Ứng dụng web kết hợp API Laravel và next.js từ a-Z (Phần 1- hiển thị dữ liệu)

1. Lời nói đầu:. Chào mọi người, chắc hẳn với lập trình viên chúng ta, API là một cụm từ rất quen thuộc với chúng ta. Thông thường, với những ứng dụng web lớn, chúng ta thường chia thành 2 thành phần là API và Web.

0 0 133