Next.js食谱应用动态路由失效：页面找不到问题求助

核心问题：API使用错误 #

你在pages/recipes/[recipeId].tsx里用了generateStaticParams，但这个API是**App Router（app目录）**专属的，而你的页面在pages目录（Pages Router）下。Pages Router的静态生成动态路由需要用getStaticPaths + getStaticProps，这是导致页面找不到的主要原因。

修复步骤 #

1. 替换generateStaticParams为getStaticPaths #

把原来的generateStaticParams换成Pages Router的getStaticPaths，定义预生成的路由路径：

export async function getStaticPaths() {
  return {
    paths: [
      { params: { recipeId: 'spaghettiCarbonara' } },
      { params: { recipeId: 'lasagna' } },
      { params: { recipeId: 'pizza' } },
      { params: { recipeId: 'chanaMasala' } } // 加入首页的chanaMasala，避免点击后404
    ],
    fallback: false // 设为true则未预生成的路径会在请求时动态生成，false则直接返回404
  };
}

2. 用getStaticProps传递参数与数据 #

Pages Router的组件无法直接接收params，需要通过getStaticProps获取路由参数并传递数据给组件：

export async function getStaticProps({ params }: { params: { recipeId: string } }) {
  const { recipeId } = params;
  // 这里可以替换成真实的JSON文件加载逻辑，比如：
  // const recipeData = require(`../data/recipes/${recipeId}.json`);
  // 暂时用匹配ID的测试数据
  const recipeData = {
    "title": recipeId === 'spaghettiCarbonara' ? "Spaghetti Carbonara" : 
             recipeId === 'chanaMasala' ? "Chana Masala" : 
             recipeId === 'lasagna' ? "Lasagna" : "Pizza",
    "ingredients": recipeId === 'chanaMasala' ? ["Chickpeas", "Tomatoes", "Spices"] : 
                   ["Spaghetti", "Eggs", "Pancetta", "Parmesan Cheese"],
    "methods": recipeId === 'chanaMasala' ? ["Cook chickpeas", "Simmer tomatoes", "Add spices"] : 
               ["Boil spaghetti", "Cook pancetta", "Mix eggs and cheese", "Combine all ingredients"]
  };

  return {
    props: {
      recipeData,
      recipeId
    }
  };
}

3. 修改组件接收Props #

组件不再直接接收params，改为接收getStaticProps传递的属性：

export default function RecipePage({ recipeData, recipeId }: { recipeData: any; recipeId: string }) {
  if (!recipeId) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{recipeData.title}</h1>
      <Recipe recipe={recipeData} />
    </div>
  );
};

额外检查点 #

• 确认pages/recipes/[recipeId].tsx文件路径完全正确，无拼写、大小写错误
• 首页Link的路径/recipes/${recipe.id}与动态路由文件名[recipeId]完全匹配
• 移除代码中不必要的window.alert、console.log以及未使用的useRouter导入，避免干扰

完整修复后的[recipeId].tsx代码 #

// pages/recipes/[recipeId].tsx
import React from 'react';
import Recipe from '../../components/recipe';

export async function getStaticPaths() {
  return {
    paths: [
      { params: { recipeId: 'spaghettiCarbonara' } },
      { params: { recipeId: 'lasagna' } },
      { params: { recipeId: 'pizza' } },
      { params: { recipeId: 'chanaMasala' } }
    ],
    fallback: false
  };
}

export async function getStaticProps({ params }: { params: { recipeId: string } }) {
  const { recipeId } = params;
  const recipeData = {
    "title": recipeId === 'spaghettiCarbonara' ? "Spaghetti Carbonara" : 
             recipeId === 'chanaMasala' ? "Chana Masala" : 
             recipeId === 'lasagna' ? "Lasagna" : "Pizza",
    "ingredients": recipeId === 'chanaMasala' ? ["Chickpeas", "Tomatoes", "Spices"] : 
                   ["Spaghetti", "Eggs", "Pancetta", "Parmesan Cheese"],
    "methods": recipeId === 'chanaMasala' ? ["Cook chickpeas", "Simmer tomatoes", "Add spices"] : 
               ["Boil spaghetti", "Cook pancetta", "Mix eggs and cheese", "Combine all ingredients"]
  };

  return {
    props: {
      recipeData,
      recipeId
    }
  };
}

export default function RecipePage({ recipeData, recipeId }: { recipeData: any; recipeId: string }) {
  if (!recipeId) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{recipeData.title}</h1>
      <Recipe recipe={recipeData} />
    </div>
  );
};

内容的提问来源于stack exchange，提问作者will the randomer price