元数据与国际化

这一课你将能做到

1. 用 generateMetadata 和静态 metadata 对象为任意页面配置 SEO 元数据
2. 用 generateStaticParams 为动态路由预生成所有静态页面
3. 用 app/i18n/ 目录或路由段实现多语言站点
4. 用 Middleware 实现基于地理位置或浏览器语言的重定向
5. 用 sitemap.ts 和 robots.ts 自动生成搜索引擎需要的文件

为什么要学

SEO 和国际化是商业网站的生死线。没有正确的 <title> 和 <meta name="description">，搜索引擎不会收录；没有多语言支持，海外市场直接放弃。Next.js 的 App Router 把元数据从「手写 <head>」变成了「声明式导出」，而且支持动态生成——商品详情页的标题自动带商品名，博客文章的分享卡片自动带封面图。

人话：元数据是网站的「名片」，国际化是网站的「翻译官」。名片印错了，客户找不到你；没有翻译官，外国客户进不来。

先建立图像

元数据生成方式:
├── 静态 metadata（export const metadata）     ← 固定内容页面
├── 动态 generateMetadata（async function）    ← 数据驱动页面
└── 文件约定（icon.png, opengraph-image.png）  ←  favicon、社交卡片

多语言路由结构:
app/
├── [lang]/
│   ├── layout.tsx          ← 接收 lang 参数，注入字典
│   ├── page.tsx            ← /zh/ 或 /en/
│   └── about/page.tsx      ← /zh/about 或 /en/about
├── middleware.ts           ← 检测语言，重定向到 /zh 或 /en
└── dictionaries/
    ├── zh.json
    └── en.json

跟着做

步骤 1：静态 metadata

app/page.tsx：

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: '首页',
  description: '这是我的 Next.js 学习项目首页',
  keywords: ['Next.js', 'React', '学习'],
  openGraph: {
    title: '首页',
    description: '分享时的标题',
    images: ['/og-image.png'],
  },
};

export default function Home() {
  return <h1>首页</h1>;
}

构建后 HTML 的 <head> 自动包含：

<title>首页 | 我的站</title>
<meta name="description" content="这是我的 Next.js 学习项目首页">
<meta property="og:title" content="首页">
<meta property="og:image" content="https://example.com/og-image.png">

步骤 2：动态 generateMetadata

app/blog/[slug]/page.tsx：

import type { Metadata } from 'next';
import { notFound } from 'next/navigation';

interface Props {
  params: Promise<{ slug: string }>;
}

async function getPost(slug: string) {
  const res = await fetch(`https://api.example.com/posts/${slug}`);
  if (!res.ok) return null;
  return res.json();
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);

  if (!post) {
    return { title: '文章不存在' };
  }

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

export default async function BlogPost({ params }: Props) {
  const { slug } = await params;
  const post = await getPost(slug);

  if (!post) notFound();

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}