Next.js中getServerSideProps里怎么正确调用异步API并处理错误？

设计师诗谣提问于 2026-03-27 16:55:18 阅读 2

框架

我在用Next.js做服务端渲染，想在getServerSideProps里请求用户数据，但一遇到网络错误页面就直接挂了，试过try/catch好像也不起作用。

这是我的代码：

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/user/123');
  const user = await res.json();
  return { props: { user } };
}

有没有人知道该怎么安全地处理这种异步请求的异常？比如返回默认值或者重定向到错误页？

Next.js SSR框架全栈开发

我来解答赞 3 收藏

反馈

1 条解答

爱学习的莉霞 Lv1

试试这个方法，在 getServerSideProps 里加个 try/catch 来捕获错误，然后再处理异常情况。记得检查 HTTP 状态码，有时候 fetch 不会因为非 200 状态抛出异常。

export async function getServerSideProps() {

  let user = null;

  let error = null;



  try {

    const res = await fetch('https://api.example.com/user/123');

    if (!res.ok) {

      throw new Error('Network response was not ok');

    }

    user = await res.json();

  } catch (err) {

    console.error('Failed to fetch user:', err);

    error = 'Failed to load data';

  }



  if (error) {

    return { props: { user, error }, redirect: { destination: '/error', permanent: false } };

  }



  return { props: { user } };

}

这里有两个关键点：一是检查 res.ok 来判断请求是否成功，二是通过 catch 捕获所有异常。如果出错就返回一个错误信息，并且可以设置重定向到错误页面。

这方法在实际项目中验证过，能有效避免页面直接崩溃。不过要注意的是，redirect 只能在某些情况下使用，具体看你的需求。要是不想跳转，也可以只返回 error 字段来显示错误提示。

2026-03-27 17:01