Sanity/Next.js Slug页面404报错及路径配置求助

核心：Next.js 等价于 React Router /pageName/:slug 的动态路由实现 #

Next.js 分两种路由系统，对应不同的动态路由写法，根据你使用的版本选择：

1. Pages Router（Next.js 12 及更早，或手动使用 pages 目录） #

在项目根目录的 pages 文件夹下，创建如下结构：

pages/
└── pageName/
    └── [slug].js  // 文件名用方括号包裹动态参数名

在 [slug].js 中获取 slug 并渲染内容：

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function SlugPage() {
  const router = useRouter();
  const { slug } = router.query;
  const [data, setData] = useState(null);

  useEffect(() => {
    if (slug) {
      // 替换为你的后端请求地址，确保路径正确避免404
      fetch(`/api/your-data/${slug}`)
        .then(res => res.json())
        .then(setData)
        .catch(err => console.error('数据请求失败:', err));
    }
  }, [slug]);

  if (!slug) return <div>加载中...</div>;
  if (!data) return <div>暂无内容</div>;

  return <div>当前内容：{data.content}</div>;
}

如果用服务端渲染/静态生成，可使用 getStaticProps + getStaticPaths：

export async function getStaticProps({ params }) {
  const { slug } = params;
  const res = await fetch(`https://your-backend.com/data/${slug}`);
  const data = await res.json();

  return {
    props: { data },
    revalidate: 60, // 可选：静态内容自动更新间隔（秒）
  };
}

export async function getStaticPaths() {
  // 从后端获取所有可用slug列表
  const res = await fetch('https://your-backend.com/all-slugs');
  const slugs = await res.json();

  return {
    paths: slugs.map(item => ({ params: { slug: item.slug } })),
    fallback: 'blocking', // 允许访问未预渲染的slug，自动生成静态页
  };
}

export default function SlugPage({ data }) {
  return <div>{data.content}</div>;
}

2. App Router（Next.js 13+，使用 app 目录） #

在项目根目录的 app 文件夹下，创建如下结构：

app/
└── pageName/
    └── [slug]/
        └── page.js  // 必须在[slug]子文件夹内创建page.js

在 page.js 中直接通过 params 获取 slug：

// App Router 默认是 Server Component，可直接在这里发起后端请求
async function SlugPage({ params }) {
  const { slug } = params;
  const res = await fetch(`https://your-backend.com/data/${slug}`);
  
  if (!res.ok) throw new Error('数据请求失败');
  const data = await res.json();

  return <div>{data.content}</div>;
}

export default SlugPage;

你的问题排查与修复 #

你遇到的地址栏显示slug但页面空白、反复404，大概率是以下原因：

• 路由文件结构错误：比如在Pages Router中创建了pageName/slug.js而非pageName/[slug].js，或App Router中未将page.js放在[slug]文件夹内，导致Next.js无法匹配动态路由，页面找不到对应组件呈现空白。
• 数据请求路径错误：组件中定时请求后端的URL写错（比如漏传slug、或后端接口路径不匹配），导致每3秒触发一次404错误。

先检查路由文件结构是否符合上述规则，再核对数据请求的URL是否正确（确保带上slug参数，且后端接口存在对应路径）。

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