NextJS API 路由抛出 404

Question

我遇到了 API 路由和静态生成页面的问题。

我有一组通过静态生成的页面getStaticProps，这一切都工作正常。然后我想在客户端水化这些页面，因为只有具有特定权限的用户才可以查看内容。静态页面仅包含框架，内容是useEffect通过调用我的 API 路由之一来获取的。问题是它总是返回 404 并出错。

我已经确认 API 路由本身在该页面之外调用时工作正常，这与静态生成的页面有关吗？

我替换getStaticProps为getServerSideProps和 i 没有任何区别。我还删除了由按钮触发的 API 调用useEffect，只是为了进行检查，但它仍然抛出 404。

我简化了它，但这大致是我的代码：

export const getStaticProps: GetStaticProps<{
    post: CompactLesson,
}> = async ({ params }) => {
    const post = await getCompactLesson(null, { ...params, user });

    if (!post) {
        return { notFound: true };
    }
    return {
        props: {
            post,
        },
        revalidate: 10, // In seconds
    };
};

export default function Lesson({ post }: Props) {

useEffect(() => {
   
   fetchLesson = async () => {
    // this wil throw a 404
    const response = await axios.get(`api/getLessonData`, {
        params: JSON.stringify({id:post.id}),
      });

   }
   fetchLesson()
  }, []);

  return {
    <>my content</>
  }
}

感谢您的帮助

Answer 1

我认为问题在于请求网址，应该/api/getLessonData改为api/getLessonData