我正在尝试创建动态页面,以基于每本书的“ id” 的查询字符串在单独的页面上显示各个书的详细信息(即标题/作者)。在我询问的previous question中,用户的回答非常有帮助,而且我对如何正确使用getStaticPaths
和getStaticProps
有更好的理解。但是,我的代码中还没有关于如何执行此操作的信息。
这是基本设置和上下文。
Error: A required parameter (id) was not provided as a string in getStaticPaths for /book/[id]
这是我到目前为止的代码。我已经尝试过使代码保持尽可能的干净。
export default function Book({ book }) {
return (
<article>
<h1>Book Details Page</h1>
<p>{book.title}</p>
<p>{book.author}</p>
</article>
)
}
export async function getStaticPaths() {
const url = `${baseUrl}/api/books/books`
const response = await axios.get(url);
const books = response.data
const paths = books.map((book) => ({
params: { id: book.id },
}))
return { paths, fallback: false }
}
export async function getStaticProps({ params }) {
const url = `${baseUrl}/api/books/books/${params.id}`
const res = await axios.get(url)
const book = await res.json()
return { props: { book }}
}
API端点如下:
import Book from '../../../models/Book';
import dbConnect from '../../../utils/dbConnect';
// conects to the database
dbConnect();
// This gets all the book from the database
export default async (req, res) => {
const books = await Book.find()
res.status(200).json(books)
}
任何支持或反馈将不胜感激。一旦完成这项工作,就可以理解并帮助他人使用NextJ创建动态路由。谢谢。
答案 0 :(得分:0)
您无法在getStaticProps
或getStaticPaths
内调用Next.js API路由。这些功能在构建时执行,因此没有服务器在运行以处理请求。您需要直接向数据库发出请求。
如果要保持干净,可以创建一个allBooksIds()
之类的帮助程序模块,并将数据库查询保存在单独的文件中。