Nextjs+next-intl 多言語国際化のベスト プラクティス (APP ルーター)
Nextjs には APP ルーターと Page ルーターの 2 つのルーターがあります。
少し前に、Page ルーターの下で、nextjs が国際化され、要約されました。
ただし、Page ルーターは Nextjs によって段階的に廃止されるルーターになります。そこで最近、NextjsはAPPルーターをベースに国際化されています。
1. Nextjs 国際化ソリューションの選択
1. i18next + 反応 i18next + i18next リソースからバックエンド + next-i18n-router
ほとんどの人がこれを使っているようですが、やってみたのですが、かなり複雑で、まだ成功せず、諦めました。
2. next-i18n-router 反応-intl
かなり難しそうだったのですが、1の影のせいで断念しました。
3.next-intl
next-intl は nextjs の完全な国際化ソリューションであり、他のソフトウェア パッケージを必要としません。そして構成は比較的シンプルです。さらに重要なのは、構成が正常に完了し、説明できない問題が発生することはありませんでした。
ということで、これです。
2. ディレクトリ構造
|app ..[locale] ...layout.js ...page.js |components ..LangSwitcher.js |public ..locales ...en ....common.json ...es .... common.json |i18n.js |navigation.js |middleware.js |next.config.js3. 国際ルーティング
1.ナビゲーション.js
これは設定ファイルであり、このファイルで設定された項目は他のファイルで呼び出されます。
import { createSharedPathnamesNavigation } from 'next-intl/navigation'; import const locales = ['en', 'de', 'es', 'ja','ko','it','pt']; import const localePrefix = '必要に応じて';export constdefaultLocale= "en";export const localeItems= [ { name: "English",code: "en", iso: "en-US", dir: "ltr" }, { name : "español",code: "es", iso: "es-ES", dir: "ltr" }, { name: "中文",code: "zh_cn", iso: "zh-CN", dir: " ltr" }, { 名前: "Deutsch"、コード: "de"、iso: "de-DE"、ディレクトリ: "ltr" }、{ 名前: "Italiano"、コード: "it"、iso: "it- IT", dir: "ltr" }, { name: "日本语",code: "ja", iso: "ja-JP", dir: "ltr" }, { name: "한국인",code: "ko ", iso: "ko-KR", dir: "ltr" }, { name: "Português",code: "pt", iso: "pt-PT", dir: "ltr" }, ] export const { リンク、リダイレクト、usePathname、useRouter } = createSharedPathnamesNavigation({ locales, localePrefix });2. [ロケール]ディレクトリ
app ディレクトリ内のすべてのページ ファイルは、[locale] ディレクトリに配置されます。
3. ミドルウェア: middleware.js
例証します:
次のスタイルの URL を実装します。
デフォルトの言語の URL:
ホームページは次のとおりです: www.xxx.com
内部ページは次のとおりです: www.xxx.com/about
他の言語の URL: (スペイン語を例に挙げます)
ホームページは次のとおりです: www.xxx.com/es
内部ページは次のとおりです: www.xxx.com/es/about
さらに、デフォルトの言語が URL に入力されている場合 (たとえば、デフォルトの言語が英語である場合)、ユーザーは URL: www.xxx.com/en を入力します。
その後、自動的に www.xxx.com に移動します。
コード：
import createMiddleware from "next-intl/middleware"; import {defaultLocale, localePrefix, locales } from '@/navigation'; import default createMiddleware({ locales, localePrefix ,defaultLocale, localeDetection: false, }); import const config = { / / 国際化すべきではないすべてのパスをスキップします。 // これにより、フォルダー「api」、「_next」、および拡張子 (favicon.ico など) を持つすべてのファイルがスキップされます。 // matcher: ["/((?!api|_next| .*\\..*).*)"], };4. 翻訳ファイルをロードする
1. ファイルを翻訳する
説明する
私の翻訳ファイルは「public」ディレクトリに配置されていますが、実際には、対応するパスが i18n.js ファイルに設定されている限り、翻訳ファイルは他のディレクトリに配置することもできます。
翻訳ファイルは json ファイルであり、json ファイルはネストされた形式であってもなくても構いません。最終的には、この 2 つは若干異なる方法で参照されます。
コード (ネストされていない)
{ "ああ": "こんにちは", }コード (ネスト)
{ "bbb":{ "aaa":"こんにちは", } }2.i18n.jsファイル
例証します:
このファイルは、翻訳ファイルのインポートに使用されます。重要なのは、翻訳ファイルのパスを設定することです。このファイルは、翻訳ファイルが配置されているパスと一致している必要があります。
パス内の ${locale} は言語を示します。
コード
import { getRequestConfig } from "next-intl/server"; // この構成をリクエストごとに 1 回作成し、 // すべてのサーバー コンポーネントで使用できるようにします。アクティブなロケールのメッセージ: (await import(`./public/locales/${locale}/common.json`)).default, }));3. next.config.jsの設定
/** @type {import('next').NextConfig} */ const nextConfig = {} const withNextIntl = require("next-intl/plugin")("./i18n.js"); module.exports =withNextIntl (nextConfig)5. 翻訳を実装する
layout.jsのコード:
import "./globals.css"; import { NextIntlClientProvider, useMessages } from 'next-intl'; import { locales } from '@/navigation'; import Header from '@/components/Header' import Footer from '@/components /Footer' デフォルト関数のエクスポート RootLayout({ Children, params: { locale } }) { if (!locales.includes(locale)) { notFound(); } constmessages = useMessages(); return (
<html lang="{locale}">
<nextintlclientprovider locale="{locale}" messages="{messages}">
<body><header />{子供たち}<footer /></body>
</nextintlclientprovider>
</html>
);
}
page.js のコード:
パラメータ locale は現在の言語を表します。
翻訳ファイルがネストされていない場合は、 const t = useTranslations(); となります。
翻訳ファイルがネストされている場合は、ファイル構造と実際のニーズに基づいて、 const t = useTranslations("bbb"); のようなものを使用します。
import { useTranslations } from 'next-intl'; import { Link } from '@/navigation'; import デフォルト関数 Home({ params: { locale } }) { const t = useTranslations(); return (<>
<link href="{"/"}"><h1>{t("ああ")}</h1></Link>
</>)6. 言語スイッチャー
1.効果
プルダウンして言語を選択すると、現在のページが選択した言語のページに切り替わります。
2. コード
"use client";
import { useLocale } from "next-intl";
import { localeItems, useRouter, usePathname, defaultLocale } from '@/navigation';
export default function LangSwitcher() {
const locale = useLocale();
const router = useRouter();
const pathname = usePathname();
console.log(locale)
const handleChange = (e) => {
router.push(pathname, { locale: e.target.value });
};
return (
<div>
<select
value={locale}
onChange={handleChange}
className="h-8 m-2 p-1 rounded border-current"
>
<option value={locale} > {GetLangData(locale).name}</option>
{localeItems.map((item) => {
if (item.code === locale) return null
return (<option key={item.code} value={item.code}>
{item.name}
</option>)
})}
</select>
</div>
);
}
export function GetLangData(defaultLocale) {
var res = {}
{
localeItems.map(locale => {
if (locale.code === defaultLocale) {
console.log(locale)
res = locale
}
})
}
return res
}7. SEO と検索エンジンに優しい
1. メタデータ
Nextjs APP ルーターがページのタイトルとメタデータを生成するため、次の 3 つの方法を試しました。
1 つ目の方法:layout.js で直接使用します:expert const metadata={}
2 番目の方法: page.js で動的に生成されたメタデータを使用する
参考のために：最適化: メタデータ | Next.js (nextjs.org)
この 2 つの点で、多言語タイトルとメタデータで失敗しました。最後に、3 番目の方法が使用されました。これも最も単純で簡単な方法です。
3 番目の方法: title タグと Meta タグを page.js に直接記述します。
したがって、page.js のコードは次のように変更されました。
import { useTranslations } from 'next-intl'; import { Link } from '@/navigation'; import デフォルト関数 Home({ params: { locale } }) { const t = useTranslations(); return (<>
<title>{t("サイト名")}</title>
<meta name="keyword" content="{t("site-name")}"></meta>
<meta name="description" content="{t("サイトの説明")}"></meta>
<meta property="og:type" content="website"></meta>
<meta property="og:title" content="{t("サイト名")}"></meta>
<meta property="og:description" content="{t("サイトの説明")}"></meta>
<meta property="og:site_name" content="{t("サイト名")}"></meta>
<meta property="og:image" content="/images/xxx.png"></meta>
<meta property="og:image:width" content="512"></meta>
<meta property="og:image:height" content="512"></meta>
<meta property="og:image:alt" content=""></meta>
<link href="{"/"}"><h1>{t("ああ")}</h1></Link>
</>)2. 多言語ナビゲーション: 検索エンジンが多言語 URL を見つけやすくします。
説明する
言語スイッチャーはフロントエンドでレンダリングされるため、ページの下部にバックエンドでレンダリングされる多言語ナビゲーション (コンポーネント Footer.js) を追加しました。対応する言語をクリックすると、その言語の Web サイトのホームページが表示されます。
Footer.jsのコードは次のとおりです。
import Link from 'next/link'
import { localeItems,defaultLocale } from '@/navigation';
export default function Footer(){
return (<>
<div className="divider"></div>
<footer className="footer footer-center p-10 bg-base-200 text-base-content rounded">
<nav className="flex flex-wrap gap-4">
{localeItems.map(locale => {
if (locale.code === defaultLocale) return(<Link className="link link-hover" href="/" key={locale.code}>{locale.name}</Link>)
const thehref="/"+locale.code
return (<Link className="link link-hover" href={thehref} key={locale.code}> {locale.name}</Link>)
})}
</nav>
<aside className='p-6 text-center'>
<p>Copyright © 2024 - All right reserved by xxx.com</p>
</aside>
</footer>
</>
)
}
8. まとめ
国際ルーティング、翻訳ファイルの構造と導入、および翻訳の実装。どのような国際化計画であっても、これら 3 つの側面が関係します。面倒ではありませんが、一般的に next-intl は比較的簡単です。
