next-intl

pnpm add next-intl

２つの実装方法：[ with i18n routing / without i18n routing ]
- 試したのはwithの方 --> URLに /ja や /en が表示される
- i18nという単語はnext-intlに固有ではない。i18n = internationalization（国際化）

docs通りに進めてエラーが出る場合：

next-intlに関連したファイル間のパスがずれていることが原因であることが多い

基本的な使い方

i18n/messages/ja.json：

ja:{
  "homepage": {
    "searchInput": "タグを検索"
  },
 "clearBtn":"クリア"
}

i18n/messages/en.json ：

{
  "homepage": {
    "searchInput": "Search tags"
  },
  "clearBtn": "Clear"
}

page.tsx：

// クライアント

"use client";
import { useTranslations } from "next-intl";
import React from "react";

const Home = () => {
  const t = useTranslations("homepage");
  return (
    <div>
      {t("searchInput")} 
    </div>
  );
};

export default Home;

---

// サーバー

const Home = async () => {
  const t = await getTranslations(""); 
  
  return (
    <div>
      {t("clearBtn")} 
    </div>
  );

localeの取得：

クライアント： useLocale()
サーバー： await getLocale()

localeはブラウザの言語設定から決まる

= 自前で仕組みを用意する必要は無い

middleware.tsのexport default createMiddleware(routing);

この部分で内部的にリクエストからブラウザの優先言語（Accept-Language）を読み取っている

defaultLocale：「常にデフォルト」という意味合いではない

routing.ts：

import { defineRouting } from "next-intl/routing";

export const routing = defineRouting({
  locales: ["en", "ja"],

  defaultLocale: "en",
});

routing.tsの defaultLocaleは「この言語をデフォルトに」という意味ではなく、「ブラウザの優先言語（accept-language）がlocales配列に含まれていない場合の代替」といえる。
例えば Accept-Language: zh-CN,zh;q=0.9,ja;q=0.8,en-US;q=0.7,en;q=0.6 だと、優先言語の3番目に routing.tsのlocales配列に含まれる ja がヒットするので、localeは ja になる
Accept-Language: zh-CN,zh;q=0.9 だとlocales配列でヒットしないので、defaultLocaleの en になる

クライアント/サーバーにおける優先言語の取得

知識として

クライアント：

  const router = useRouter();

  useEffect(() => {
    const lang = navigator.languages[0];

navigator.languagesでブラウザの優先言語の配列を取得（['ja', 'en-US', 'en'] ）

サーバー：

// middleware.ts

export default function middleware(request: NextRequest) {
  const acceptLangs = request.headers.get("accept-language");
  const lang = acceptLangs?.split(",")[0].split("-")[0].toLowerCase();

acceptLangsの中身：
- [ ja,en-US;q=0.9,en;q=0.8 ] （１に近いほど優先）
langの中身：
- ブラウザの第一言語（ ja や en-US ）

metadataのtitleとdescriptionをlocaleに応じて変える

import { getTranslations } from "next-intl/server";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "metadata" });
  return {
    title: t("title"),
    description: t("description"),
  };
}

A . page.tsx から
page.tsx：現在のlocaleと一致するlocale.json からデータを持ってくるので、localeが/ja ならMetadata.description = "サイト説明" という日本語を取得できる
namespace: "Metadata"：この部分は en.json や ja.json の"Metadata"オブジェクトを意味。Metadataオブジェクトでラップしていないなら空文字でよい

// ja.json
 {
  "Metadata": {
    "title": "",
    "description": ""
  },

layout / page：どちらに置いてもよい

page.tsxの場合はサーバーページであることが条件なので、 page.tsx がクライアントページの場合は layout.tsx で動的metadataを実装する
layout.tsxでは既存の metadataを消し、その中身をgenerateMetadata に移す

page.tsx ：

import { getTranslations } from "next-intl/server";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "metadata" });
  return {
    title: t("title"),
    description: t("description"),
  };
}

layout.tsxの title / description よりも優先される

layout.tsx ：

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "metadata" });
  return {
    title: t("title"),
    description: t("description"),
    metadataBase: new URL(BASE_URL),
    openGraph: {
      images: "/logo.png",
    },
    icons: {
      icon: "/logo.png",
      shortcut: "/logo.png",
    },
  };
}

middleware.ts

docsのmiddleware.ts ：

import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';
 
export default createMiddleware(routing);
 
export const config = {
  matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)'
};

next-intl の処理だけをmiddlewareにする構成なので、他のmiddleware処理をどこに書けばいいのかわかりづらい

-->

import createMiddleware from "next-intl/middleware";
import { routing } from "./next-intl/i18n/routing";
import { NextRequest } from "next/server";

const intlMiddleware = createMiddleware(routing);

export default async function middleware(req: NextRequest) {
  return intlMiddleware(req);
}

export const config = {
  matcher: ["/", "/(ja|en)/:path*"],
};

middleware(){} の中に他の処理を書いていく

Nextjs：next-intl 言語追加

Nextjs：next-intl 言語追加