Javascript Next.JS：如何处理getInitialProps中的错误？

我希望从API获取数据，如果失败，我希望它呈现

\u error.js

页面。我的请求取决于路由器查询。因此，如果用户输入错误的查询，页面将抛出错误

如果请求因抛出而失败，我希望显示我的自定义

\u error.js

我如何做到这一点

这是我的索引页：

//pages/index.js
从“React”导入React
从“道具类型”导入道具类型
从“同构取消蚀刻”导入提取
从“../components/Items”导入项目
从“../utils/config”导入{API}
常量IndexPage=（{items}）=>{
返回(
)
}
IndexPage.getInitialProps=异步（上下文）=>{
const{query}=context
const filter=query.filter | |“”
const name=query.name | |“”
const page=query.page | | 1
const response=等待获取(
`${API}？${filter}=${name}&page=${page}`，
)
const data=wait response.json（）
返回{
项目：数据。项目，
}
}
导出默认索引扩展

我的应用程序文件：

//pages/\u app.js
从“React”导入React
从“下一个/路由器”导入路由器
从“../components/Page”导入页面
const MyApp=（道具）=>{
常量{Component，pageProps}=props
返回(
)
}
导出默认MyApp

尝试基于错误的条件呈现，因此如果出现错误，请将

项设置为
null

  const IndexPage = ({ items }) => {

      return (
      {items===null ? <Fragment>
         <ErrorPage />
     </Fragment> : <div>
          <Items items={items} />
        </div> } 
      )
    }

感谢Abdullah，但这没有起作用，我的应用程序仍然尝试呈现
项
组件，但该组件失败，因为我们没有任何数据。
IndexPage.getInitialProps = async (context) => {
  try{
  const { query } = context
  const filter = query.filter || ''
  const name = query.name || ''
  const page = query.page || 1
  const response = await fetch(
    `${API}?${filter}=${name}&page=${page}`,
  )
  const data = await response.json()
  return {
    items: data.items,
  }
 }catch(error){
    return {
    items: null
  } 
 }
}