无法在 Next.js 中使用 GetStaticProp 13

Question

我正在遵循使用旧版本 Next.js 的在线教程。我现在使用 Next.js 13，并尝试实现 GetStaticProp() 从我的 api 获取数据，但无法在 app 文件夹下使用该函数。

我现在正在尝试按照 Next.js 的建议实现数据获取（https://beta.nextjs.org/docs/data-fetching/fetching）。我收到的错误是：

未处理的运行时错误错误：无法读取未定义的属性（读取“切片”）

我的代码是：

import Layout from "components/Layout.js";
import ResourceHighlight from "components/ResourceHighlight.js";
import ResourceList from "components/ResourceList.js";
import Newsletter from "components/Newsletter.js";
import Footer from "components/Footer.js";


function Home({resources}) {
  return ( 
    <Layout> 
     <ResourceHighlight
        resources={resources.slice(0,2)}
      />
      <ResourceList
        resources={resources.slice(2)}
      />
       <Newsletter /> 
      <Footer />
    </Layout>
  )
}

export async function getData(){ 
  const resData = await fetch('http://localhost:3000/api/resources"'); 
  const data = await resData.json(); 

  //return resData.json(); 

  return { 
    props: { 
      resources: data
    }
  }
}


// export async function getStaticProps() {

//   const resData = await fetch("http://localhost:3000/api/resources");
//   const data = await resData.json();

//   return {
//     props: {
//       resources: data
//     }
//   }
// }



export default Home; 

任何帮助表示赞赏。提前致谢！

我尝试在 next.js 文档的指导下实现新功能，但有些东西不起作用。

Answer 1

在next.js 13、getServerSideProps、getStaticProps和getInitialProps中，服务器组件不支持使用app您链接的下一个 js beta 文档中所述的目录。您收到错误的原因是resources未定义。请检查资源价值。