如何在Next.js 13的metadata对象中设置meta:redirect或刷新重定向标签？

之前用meta标签做重定向的方式，在App Router的metadata API里确实没有对应配置——因为metadata API专注于页面元数据（标题、描述、OG标签等），重定向属于路由层面的操作，得用下面几种方法实现：

1. 服务器端重定向（推荐，SEO友好） #

直接在目标页面的page.js中使用redirect函数，这是Next.js官方推荐的方式，会触发标准的301/302状态码，对SEO更友好：

import { redirect } from 'next/navigation';

export default function OldPage() {
  // 默认是临时重定向（302），传第二个参数设为true即可触发永久重定向（301）
  redirect('/new-page', 'permanent');
}

2. 客户端重定向（适合客户端逻辑触发的场景） #

如果需要依赖客户端状态触发重定向，可以用useRouter钩子实现：

'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function OldPage() {
  const router = useRouter();

  useEffect(() => {
    // 组件挂载后立即跳转
    router.push('/new-page');
  }, []);

  return <p>正在跳转，请稍候...</p>;
}

要是你坚持想用meta标签的方式，也可以手动在客户端组件中创建对应的meta标签：

'use client';
import { useEffect } from 'react';

export default function OldPage() {
  useEffect(() => {
    const redirectMeta = document.createElement('meta');
    redirectMeta.httpEquiv = 'refresh';
    redirectMeta.content = '0; url=/new-page'; // 0秒后跳转，可修改数值调整延迟时间
    document.head.appendChild(redirectMeta);
  }, []);

  return <p>正在跳转...</p>;
}

3. 全局批量重定向（通过next.config.js） #

如果需要批量处理多个旧路径到新路径的重定向，或者不想修改页面文件，可以在next.config.js中配置规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/old-page', // 匹配旧路径
        destination: '/new-page', // 跳转目标路径
        permanent: true, // true=301永久重定向，false=302临时重定向
      },
      // 可添加多条重定向规则
    ];
  },
};

module.exports = nextConfig;

内容的提问来源于stack exchange，提问作者Mayank Kumar Chaudhari