Question: How to handle dynamically generated pages in Next JS?

[jtfairbank]

Can anyone look into this and comment with your suggested approach? I'll need to describe a process in order to create related issues.

Examples:

• On the Donate Page we'll have multiple fundraisers. For now we could hard-code them, but dynamically creating fundraisers (and the related "More Info" pages) will be one of the fist things we want to move to the CMS.
• Down the road, we'll want to dynamically create Shipment pages based on data from our Shipment Data Reporting Pipeline project, so that partners and donors can see our progress and impact.

[noelcastillon1]

Hey @jtfairbank, here's what I came up with looking at this page from Strapi about integrating for Next.js. Let me know if you're thinking of dynamically generated content in a specific way that is not covered here.

Possible Solution

Use Next.js’s data fetching methods (getStaticProps, getServerSideProps (getStaticProps is better for our use case, probably)) to pull data from your Strapi API.

export async function getStaticProps() {
  const res = await fetch('http://localhost:1337/posts');
  const posts = await res.json();
  return { props: { posts } };
}

Render the fetched data in a Next.js component.

function Blog({ posts }) {
  return (
    <div>
      {posts.data.map(post => (
        <article key={post.id}>
          <h2>{post.attributes.title}</h2>
          <p>{post.attributes.content}</p>
        </article>
      ))}
    </div>
  );
}

[jtfairbank]

Hey @noelcastillon1! Thanks for looking into this. That seems like a solid way to handle dynamic content on an overview page, such as listing all the active fundraisers as cards on the Donate page or listing relevant shipment summaries on a Region page. Ex:

Donate Page (static) => gets Strapi fundraiser content => Fundraiser Cards (dynamic component)
Region Page (static) => gets Strapi shipment content => Shipment List (dynamic component)

What I'm looking for is a way to create dynamic pages, where data from a server is applied to a template to make a new page, along with a route for that page. Ex:

Strapi fundraiser content => Fundraiser Details Page (dynamic page, 1 per fundraiser added to Strapi)
Strapi shipment content => Shipment Page (dynamic, 1 per shipment added to Strapi)

I think what you have so far is a great start and we should definitely document that approach! Want to keep looking into the other half of this?

[noelcastillon1]

Heard, I can continue with this and will look at dynamic pages!