Next.js 学习笔记文件名即是路由
动态路由
pages/posts/[id].js => /posts/*
渲染
getStaticProps：需要动态数据
getStaticPaths（与 getStaticProps 配合）：路径和数据都是动态
getStaticProps
export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts,
},
}
}getStaticPaths
export async function getStaticPaths() {
const res = await fetch('https://.../posts')
const posts = await res.json()
const paths = posts.map((post) => ({
params: { id: post.id },
}))
// { fallback: false } means other routes should 404.
return { paths, fallback: false }
}数据会传入 getStaticProps
getServerSideProps
跟 getStaticProps 格式一样
错误页面
正式环境，错误时，会显示 500.js 的内容
关于 LearnKu
粤公网安备 44030502004330号