next-intl多言語対応で踏んだ落とし穴まとめ

// src/middleware.ts
export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

// src/middleware.ts
import createMiddleware from "next-intl/middleware";
import { routing } from "./i18n/routing";

export default createMiddleware(routing);

export const config = {
  matcher: [
    "/",
    "/(ja|en|es)/:path*",
    "/((?!api|_next|_vercel|.*\\..*).*)"],
};

// これは言語プレフィックスが付かない
import Link from "next/link";

export function ArticleCard({ slug, category }) {
  return (
    <Link href={`/${category}/${slug}`}>
      記事を読む
    </Link>
  );
}

// next-intlのLinkは自動でロケールプレフィックスを付ける
import { Link } from "@/i18n/routing";

export function ArticleCard({ slug, category }) {
  return (
    <Link href={`/${category}/${slug}`}>
      記事を読む
    </Link>
  );
}

// 素のNext.jsのhooksではロケールが失われる
import { useRouter } from "next/navigation";

// next-intlのhooksを使う
import { useRouter, redirect } from "@/i18n/routing";

// ⚠️ 動くが、動的レンダリングになる
// "use client" がない = Server Component
import { useTranslations } from "next-intl";

export default function HomePage() {
  const t = useTranslations("home");
  // このページは静的レンダリングされなくなる
  return <h1>{t("title")}</h1>;
}

// ✅ 静的レンダリングをサポートするgetTranslationsを使う
import { getTranslations } from "next-intl/server";

export default async function HomePage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  // getTranslations はawait必須
  const t = await getTranslations({ locale, namespace: "home" });

  return <h1>{t("title")}</h1>;
}

// app/[locale]/[category]/[slug]/page.tsx

// ロケールが"ja"のみ生成される
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({
    // locale がない！
    category: post.category,
    slug: post.slug,
  }));
}

export async function generateStaticParams() {
  const locales = ["ja", "en", "es"] as const;
  const paths = [];

  for (const locale of locales) {
    const posts = await getPostsByLocale(locale);
    for (const post of posts) {
      paths.push({
        locale,
        category: post.category,
        slug: post.slug,
      });
    }
  }

  return paths;
}

export async function generateMetadata({ params }) {
  const { locale, category, slug } = await params;

  return {
    alternates: {
      languages: {
        "ja": `https://32blog.com/ja/${category}/${slug}`,
        "en": `https://32blog.com/en/${category}/${slug}`,
        "es": `https://32blog.com/es/${category}/${slug}`,
        // x-defaultがない！
      },
    },
  };
}

export async function generateMetadata({ params }) {
  const { locale, category, slug } = await params;
  const baseUrl = "https://32blog.com";

  return {
    alternates: {
      canonical: `${baseUrl}/${locale}/${category}/${slug}`,
      languages: {
        "ja": `${baseUrl}/ja/${category}/${slug}`,
        "en": `${baseUrl}/en/${category}/${slug}`,
        "es": `${baseUrl}/es/${category}/${slug}`,
        // 言語が判定できないユーザーをデフォルト言語へ
        "x-default": `${baseUrl}/ja/${category}/${slug}`,
      },
    },
  };
}

app/
├── not-found.tsx          ← [locale]の外 → 翻訳できない
└── [locale]/
    └── not-found.tsx      ← ここに置くと翻訳が効く

// next-intlが提供するtransを使えない
export default function NotFound() {
  return (
    <div>
      <h1>404 - ページが見つかりません</h1>
      {/* 英語ユーザーにも日本語が表示される */}
    </div>
  );
}

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

export default async function NotFound() {
  const t = await getTranslations("notFound");

  return (
    <div>
      <h1>{t("title")}</h1>
      <p>{t("description")}</p>
    </div>
  );
}

"use client";

import { useLocale } from "next-intl";
import { useMemo } from "react";

export function LocalizedDate({ date }: { date: Date }) {
  const locale = useLocale();

  const formatted = useMemo(
    () => date.toLocaleDateString(locale),
    [] // localeがdepsにない
  );

  return <time>{formatted}</time>;
}

"use client";

import { useLocale } from "next-intl";
import { useMemo } from "react";

export function LocalizedDate({ date }: { date: Date }) {
  const locale = useLocale();

  const formatted = useMemo(
    () => date.toLocaleDateString(locale),
    [date, locale] // localeを含める
  );

  return <time>{formatted}</time>;
}

{
  "rules": {
    "no-restricted-imports": ["error", {
      "paths": [{
        "name": "next/link",
        "message": "Link は '@/i18n/routing' からインポートしてください"
      }, {
        "name": "next/navigation",
        "importNames": ["useRouter", "redirect"],
        "message": "'@/i18n/routing' からインポートしてください"
      }]
    }]
  }
}