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
改成你本地ip
或localhost
即可。
示例如下:
export async function getStaticProps(context) {
const res = await fetch(`${process.env.BaseUrl}/api/send`)
const features = await res.json()
return {
props: {
features,
},
}
}
有没有执行,要看控制台日志,这是ssr服务端渲染的。