Question

我正在尝试创建动态页面，以基于每本书的“ id” 的查询字符串在单独的页面上显示各个书的详细信息（即标题/作者）。在我询问的previous question中，用户的回答非常有帮助，而且我对如何正确使用getStaticPaths和getStaticProps有更好的理解。但是，我的代码中还没有关于如何执行此操作的信息。

这是基本设置和上下文。

我正在运行NextJS 9.4，并且希望使用API终结点而不是直接查询数据库。
书籍数据是从MongoDB Atlas数据库中提取的，并使用Mongoose
MongoDB中的文档具有“ _ id” 作为唯一ID。
我试图结合并学习现有的Github示例和NextJS文档，但仍然出现以下错误。

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创建动态路由。谢谢。

Answer 1

您无法在getStaticProps或getStaticPaths内调用Next.js API路由。这些功能在构建时执行，因此没有服务器在运行以处理请求。您需要直接向数据库发出请求。

如果要保持干净，可以创建一个allBooksIds()之类的帮助程序模块，并将数据库查询保存在单独的文件中。

看到相同的问题-API call in NextJS getStaticProps

在NextJS中使用'getStaticPaths'和'getStaticProps'创建动态路由

1 个答案: