Next.js 13.4 + TailAdmin UI路由问题：新博客页面404无法访问

问题原因 #

你当前的代码是Next.js Pages Router 的写法（使用getStaticProps、getStaticPaths），但页面放在了App Router的目录结构（/app/blog/[id].tsx）下，两者路由机制不兼容，导致404错误。而你在另一个项目的/pages目录下能正常运行，是因为那个项目用的是Pages Router。

解决方案 #

方案一：沿用Pages Router结构 #

直接将博客页面文件移到项目的/pages/blog/[id].tsx路径下，你已经验证过这种方式可行，只要TailAdmin模板兼容Pages Router即可。

方案二：适配App Router写法（推荐） #

如果项目默认使用App Router（TailAdmin的该模板基于App Router），需要按以下方式修改：

1. 调整文件结构：
   创建/app/blog/[id]/page.tsx文件（注意是[id]文件夹，内部放page.tsx，而不是单个[id].tsx文件）

2. 修改代码：
   替换为App Router兼容的静态生成写法：

// /app/blog/[id]/page.tsx
export async function generateStaticParams() {
  // 预生成需要静态渲染的路径，替代原getStaticPaths
  return [{ id: "1" }, { id: "2" }];
}

async function Post({ params }: { params: { id: string } }) {
  // 直接在组件内异步获取数据，替代原getStaticProps
  const postData = { id: params.id, content: `Content for post ${params.id}` };
  
  return (
    <div>
      <h1>Post ID: {postData.id}</h1>
      <p>Post Content: {postData.content}</p>
    </div>
  );
}

export default Post;

关键差异说明 #

• App Router动态路由采用文件夹+page.tsx的结构，而非Pages Router的[id].tsx文件命名
• 用generateStaticParams替代getStaticPaths来预生成静态路径
• 数据获取直接在组件内异步执行（App Router默认组件为Server Components），无需单独的getStaticProps方法

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