How to create a Separate Page for Each Document, in NextJS?

Help
, ,
1

I have an API that gets a list of documents from FaunaDB for a NextJS app.

I want to generate a separate page for each document. I’m trying to do so using getStaticProps and getStaticPaths, but I’m not sure how to query the API for specific documents by a differentiable parameter, e.g. title - which doesn’t duplicate.

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.authors.toString()
            }
        }
    })

    return {
        paths,
        fallback: false
    }
}

The problem is that the component Title receives the whole dataset and not a subset split by title via getStaticProps.

Is there someway to query and splitting the data by single document so I can find each page, e.g. by navigating to app.com/<data>/<document_1> for instance app.com/title/<respective-title>?

2

I realized this was also posted to Stack Overflow, and I had answered there. javascript - How can I generate a separate NextJS page for each FaunaDB Document? - Stack Overflow

You are returning authors in your Path object. You will need to make sure that your page file is named with authors included. For example:

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

Perhaps where you say authors in your params object, you do mean title . In which case, rename the params object and page filename.

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

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

Here are the docs for getStaticPaths() . Basic Features: Data Fetching | Next.js

Note that since your API function (provided in the Stack Overflow post) returns the Page from your query, the shape of the result will likely be

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

In which case, your code will need to map over papers.data not on papers itself.

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

@ptpaterson, thank you for your guidance! I was missing the dynamic API route to accompany the dynamic page route.

I’ve posted an answer here on SO.

1 Like
4

Nice! And thanks for the update :smiley:

I’ve marked your response as the solution here. Don’t forget to mark your answer on Stack Overflow, so folks can see that – It’s totally okay to mark your own post as the answer!

5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.