如何为每个NextJS文档生成单独的FaunaDB页面？

Question

如何在子目录中的每个页面上生成不同的标题？

我的代码不会抛出错误，但不幸的是，Title组件在它应该呈现的每个页面上呈现每个title-item，例如，每个app.com/title/<title>呈现相同的视图(标题列表)。我认为getStaticPaths是正确的参数化，但我不认为getStaticProps是。

export default function Title({ paper }) {

    // paper is just the entire dataset, and isn't split by id or author etc.

    return (
            <div>
                {paper.map(paper => (
                        <h1>{paper.data.title}</h1>
                ))}
            </div>
    )
}

export async function getStaticProps({ params }) {

    // ideally, results should be split down to e.g. `/api/getPapers/title`, but this didn't work

    const results = await fetch(`http://localhost:3000/api/getPapers/`).then(res => res.json());

    return {
        props: {
            paper: results
        }
    }
}

export async function getStaticPaths() {
    const papers = await fetch('http://localhost:3000/api/getPapers').then(res => res.json());

    const paths = papers.map(paper => {
        return {
            params: {
                authors: paper.data.title.toLowerCase().replace(/ /g, '-')
            }
        }
    })

    return {
        paths,
        fallback: false
    }
}

这是getPapers API函数。

const faunadb = require("faunadb");

// your secret hash
const secret = process.env.FAUNADB_SECRET_KEY;
const q = faunadb.query;
const client = new faunadb.Client({ secret });

module.exports = async (req, res) => {
  try {
    const dbs = await client.query(
      q.Map(
        // iterate each item in result
        q.Paginate(
          // make paginatable
          q.Match(
            // query index
            q.Index("all_research_papers") // specify source
          )
        ),
        (ref) => q.Get(ref) // lookup each result by its reference
      )
    );
    // ok
    res.status(200).json(dbs.data);
  } catch (e) {
    // something went wrong
    res.status(500).json({ error: e.message });
  }
};

Answer 1

我试图为每个文档呈现一个单独的页面，但缺少了一个动态API调用。我只是希望用一个(批处理文档) API调用来呈现动态页面。

下面是一个典型的名为[index.js]的动态API路由

const faunadb = require('faunadb')

// your secret hash
const secret = process.env.FAUNADB_SECRET_KEY
const q = faunadb.query
const client = new faunadb.Client({ secret })

export default async (req, res) => {
  const {
    query: { index },
  } = req;

  try {
    const papers = await client.query(
      q.Get(q.Ref(q.Collection('<name of the collection>'), index))
    );
    res.status(200).json(papers.data);
  } catch (e) {
    res.status(500).json({ error: e.message });
  }
};

一旦您的数据被动态检索，您就可以设置一个动态页面路由，例如[id].js，它使用useSWR获取数据。

const { data, error } = useSWR(`/api/getPapers/${id}`, fetcher);

这是一个示例获取函数：

const fetcher = (url) => fetch(url).then((r) => r.json());

在我的例子中，我可以使用调用{data.<field>}检索任何给定的字段。

Answer 2

在Path对象中返回authors。您需要确保页面文件的命名与authors包含在一起。例如：

app_directory
|- pages
  |- home.js
  |- title
    |- [authors].js

也许您在authors对象中说的是title，这确实是指title。在这种情况下，重命名params对象和页面文件名。

    const paths = papers.map(paper => {
        return {
            params: {
                title: paper.data.title.toLowerCase().replace(/ /g, '-')
            }
        }
    })

app_directory
|- pages
  |- home.js
  |- title
    |- [title].js

这是getStaticPaths()的文档。https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation

编辑：

由于API函数从查询中返回页面，结果的形状可能是

{
  before: [/* before cursor */],
  after: [/* after cursor */],
  data: [
    { /* paper Document */ },
    { /* paper Document */ },
    { /* paper Document */ },
  ]
}

在这种情况下，您的代码需要在papers.data上映射，而不是在papers本身上。

    const paths = papers.data // select the data
      .map(paper => {
        return {
            params: {
                title: paper.data.title.toLowerCase().replace(/ /g, '-')
            }
        }
    })