Next.js 13 App目录动态路由出现404 Not Found错误求助

问题场景 #

用Next.js 13结合TypeScript开发待办应用，定义了包含listId（字符串）和listName（字符串）的对象数组，通过map遍历生成Link组件，href设置为/listId/${list.listId}，期望导航到对应页面并获取ID，但预获取和跳转时出现404错误，首次使用App目录项目，对TypeScript不熟悉。

父页面代码 #

<div className='flex flex-col gap-2 py-2 pb-4'>
  { allLists.length > 0 && allLists.map((list: IList, index: number) => (
      <Link key={index} href={`/listId/${list.listId}`}
        className='border border-dashed border-gray-500 text-gray-800 px-3 py-1 rounded-lg'>
        <p>{ list.listName }</p>
      </Link>
  ))}
</div>

原ListId页面代码（服务端组件） #

interface IParams {
  listId: string
}

const ListNamePage: FC<IParams> = ({ listId }): ReactElement => {
  const router = useRouter();
  const { listName } = router.query;
  console.log(listName);
  
  return (
    <div>ListNamePage</div>
  )
}

export default ListNamePage

解决步骤 #

• 修正路由目录结构
  Next.js 13 App目录的动态路由要求用[参数名]命名文件夹。你需要创建这样的目录结构：app/listId/[listId]/page.tsx，把ListId页面的代码放在这个page.tsx文件里。之前的目录结构不符合App路由规则，导致无法匹配路径，出现404。

• 调整页面参数获取逻辑
  App目录的服务端组件不能使用useRouter（这是Pages目录的API），应该直接从组件的params参数中获取动态路由值，组件写法也不需要FC类型：

修改后的app/listId/[listId]/page.tsx代码：

// 定义参数类型
interface PageParams {
  params: {
    listId: string;
  };
}

export default function ListNamePage({ params }: PageParams) {
  // 直接获取动态路由的listId
  console.log('当前列表ID:', params.listId);

  return <div>ListNamePage - 当前列表ID: {params.listId}</div>;
}

• 确认Link路径正确性
  你的Link组件href写法/listId/${list.listId}是正确的，只要目录结构符合要求，就能正确匹配到动态路由页面。

• TypeScript类型补充
  确保allLists的类型定义正确：

interface IList {
  listId: string;
  listName: string;
}

// 示例：allLists的类型
const allLists: IList[] = [
  { listId: '1', listName: '购物清单' },
  { listId: '2', listName: '工作任务' }
];

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