如何在Next.js中为Headless WordPress博客创建动态短链接？

先排除低效方案 #

• 逐篇手动配置：完全没必要，新增文章需重复操作，维护成本极高，直接pass。

推荐：Next.js 原生动态重定向方案 #

1. 动态路由+服务端重定向实现 #

通过创建动态路由页面，在服务端逻辑中从WordPress获取ID对应的文章slug（标题路径），再自动重定向到目标URL，新增文章无需额外配置即可生效。

Pages Router 示例代码

export async function getServerSideProps(context) {
  const { id } = context.params;
  // 调用WordPress接口获取文章数据
  const res = await fetch(`https://你的WordPress站点域名/wp-json/wp/v2/posts/${id}`);
  const post = await res.json();

  if (!post) {
    return { notFound: true };
  }

  return {
    redirect: {
      destination: `/blog/${post.slug}`,
      permanent: true, // 永久重定向用301，临时场景用302
    },
  };
}

export default function PostRedirect() {
  // 组件不会渲染，会直接触发重定向
  return null;
}

App Router 示例代码

import { redirect } from 'next/navigation';

export async function generateMetadata({ params }) {
  const { id } = params;
  const res = await fetch(`https://你的WordPress站点域名/wp-json/wp/v2/posts/${id}`);
  const post = await res.json();

  if (!post) {
    redirect('/404');
  }

  redirect(`/blog/${post.slug}`, 'permanent');
}

export default function PostRedirect() {
  return null;
}

2. Redirect vs Rewrite 选择建议 #

• Redirect（重定向）：浏览器地址栏会更新为最终的/blog/[title]路径，符合SEO规则（搜索引擎仅收录最终路径），也让用户清晰感知当前页面地址，是本次场景的最优选择。
• Rewrite（路径重写）：地址栏保持/blog/[id]但渲染目标页面内容，会混淆用户对路径的认知，且不利于SEO，不建议使用。

服务端方式（如.htaccess）的局限性 #

用Apache的.htaccess配置规则，需要提前维护所有文章ID与slug的映射关系，新增文章后需手动更新规则，无法适配动态新增内容的场景，实现复杂度远高于Next.js原生方案，不推荐。

方案核心优势 #

• 全动态适配：新增文章后，只要WordPress中有对应数据，访问/blog/[id]即可自动跳转到标题路径，无需额外操作。
• 符合SEO最佳实践：永久重定向（301）会将短链接的权重传递给目标路径，不影响博客的搜索排名。

内容的提问来源于stack exchange，提问作者Shahriar