Next Intl là một thư viện mạnh mẽ được thiết kế cho Next.js giúp đơn giản hóa quy trình thiết lập trang web đa ngôn ngữ. Nó cung cấp một khuôn khổ mạnh mẽ cho quốc tế hóa (i18n) bằng cách tích hợp bản địa hóa trực tiếp vào các trang và thành phần của ứng dụng Next.js của bạn.
Với các tính năng như định tuyến tự động dựa trên ngôn ngữ, tải bản dịch phía máy chủ và xử lý bản dịch hiệu quả, Next Intl cho phép các nhà phát triển tạo ra các trang web phục vụ cho nhiều ngôn ngữ và nền văn hóa khác nhau một cách liền mạch. Nó cũng cung cấp một API linh hoạt để quản lý bản dịch, định dạng ngày tháng, số và nhiều hơn nữa, đảm bảo trải nghiệm người dùng mượt mà, được bản địa hóa.
1. Cài Đặt Next Intl
Hiện tại NextJS đang hỗ trợ 2 loại Router đó là App Router và Pages Router, trong bài viết này mình sẽ hướng dẫn các bạn về App Router, vì đây là định hướng phát triển của NextJS sau này và Pages Router sẽ dẫn được loại bỏ và không được cập nhật trong tương lai.
trong cửa sổ terminal bạn chạy lệnh sau:
npm install next-intlkế tiếp ở thư mục root bạn tạo một thư mục lang (bạn có thể đặt tên theo ý của bạn), trong thư mục này sẽ chứa file ngôn ngữ, mình sẽ hướng dẫn cách cơ bản, bạn có thể tạo lang/en.json:
{
"HomePage": {
"title": "Hello world!",
"about": "Go to the about page"
}
}Tiếp theo bạn cần cài đặt nextjs.config file này nằm ở root, chỉnh lại như sau:
import createNextIntlPlugin from 'next-intl/plugin';
const withNextIntl = createNextIntlPlugin();
/** @type {import('next').NextConfig} */
const nextConfig = {};
export default withNextIntl(nextConfig);Định tuyến của Next.js ở hai nơi, Để chia sẻ cấu hình giữa hai nơi này, chúng ta sẽ thiết lập routing.ts:
src/i18n/routing.ts
import {defineRouting} from 'next-intl/routing';
import {createSharedPathnamesNavigation} from 'next-intl/navigation';
export const routing = defineRouting({
// A list of all locales that are supported
locales: ['en', 'de'],
// Used when no locale matches
defaultLocale: 'en'
});
// Lightweight wrappers around Next.js' navigation APIs
// that will consider the routing configuration
export const {Link, redirect, usePathname, useRouter} =
createSharedPathnamesNavigation(routing);Sau khi đã thiết lập xong cấu hình định tuyến, chúng ta có thể sử dụng nó để thiết lập phần mềm trung gian (middleware).
src/middleware.ts
import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';
export default createMiddleware(routing);
export const config = {
// Match only internationalized pathnames
matcher: ['/', '/(de|en)/:path*']
};Next Intl tạo một đối tượng cấu hình có phạm vi yêu cầu, mà bạn có thể sử dụng để cung cấp thông báo và các tùy chọn khác dựa trên ngôn ngữ của người dùng cho Server Components.
src/i18n/request.ts
import {notFound} from 'next/navigation';
import {getRequestConfig} from 'next-intl/server';
import {routing} from './routing';
export default getRequestConfig(async ({locale}) => {
// Validate that the incoming `locale` parameter is valid
if (!routing.locales.includes(locale as any)) notFound();
return {
messages: (await import(`../../messages/${locale}.json`)).default
};
});Ngôn ngữ được khớp với phần mềm trung gian có sẵn thông qua tham số ngôn ngữ và có thể được sử dụng để cấu hình ngôn ngữ tài liệu. Ngoài ra, chúng ta có thể sử dụng vị trí này để chuyển cấu hình từ i18n/request.ts đến Client Components thông qua NextIntlClientProvider.
src/app/[locale]/layout.tsx
import {NextIntlClientProvider} from 'next-intl';
import {getMessages} from 'next-intl/server';
export default async function LocaleLayout({
children,
params: {locale}
}: {
children: React.ReactNode;
params: {locale: string};
}) {
// Providing all messages to the client
// side is the easiest way to get started
const messages = await getMessages();
return (
<html lang={locale}>
<body>
<NextIntlClientProvider messages={messages}>
{children}
</NextIntlClientProvider>
</body>
</html>
);
}Và thế là xong! Bây giờ bạn có thể sử dụng bản dịch và chức năng khác từ Next Intl trong các thành phần của mình:
app/[locale]/page.tsx
import {useTranslations} from 'next-intl';
import {Link} from '@/i18n/routing';
export default function HomePage() {
const t = useTranslations('HomePage');
return (
<div>
<h1>{t('title')}</h1>
<Link href="/about">{t('about')}</Link>
</div>
);
}Video hướng dẫn: Mẹo Vặt Công Nghệ – Youtube
Bài viết khác: Mẹo Vặt Công Nghệ – Webiste
