nextjs13 ,app/page.tsx getStaticProps咋没有数据请求?

2023-06-16 301 0

import { getTestList } from "@/api"
import Link from "next/link"
function Home({ list }) {
  console.log("list app page", list)
  return (
    <div>
      <button className="btn btn-primary">列表项3</button>
      <h2>next 666</h2>
      <button className="btn btn-link">
        <Link href="/dashboard">Dashboard</Link>
      </button>
    </div>
  )
}
// 此函数在构建时被调用
export async function getStaticProps() {
  console.log("执行数据据请求")
  // 调用外部 API 获取博文列表
  const data: any = await getTestList()
  // 通过返回 { props: { posts } } 对象,Blog 组件
  // 在构建时将接收到 `posts` 参数
  return {
    props: {
      list: data.items || [],
    },
  }
}
export default Home

目录结构就是src/app/pages.tsx 也就是首页了。我看官网上说的,这样就是发送数据请求。我的打印发现。压根就没执行 getStaticProps 这个函数。

看英文官网。不要看那个所谓的中文官网。看英文官网。api改了。nextjs13 generateStaticParams

补充一点,@/api下的是服务端代码,你要当成接口去请求,而不是函数调用。
需要fetch('https://...'),你这是本地的吧,把https改成你本地iplocalhost即可。
示例如下:

export async function getStaticProps(context) {
  const res = await fetch(`${process.env.BaseUrl}/api/send`)
  const features = await res.json()
  return {
    props: {
      features,
    },
  }
}

有没有执行,要看控制台日志,这是ssr服务端渲染的。

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?