Dynamic Page Creation in Payload CMS

Payload CMS allows for dynamic content creation, enabling users to add pages without modifying the code.

Using this approach allows for better scalability, flexibility, and efficiency in your applications. It helps in organizing code, improving performance, and ensuring seamless content updates.

Defining a Page Collection

Inside payload.config.js, create a collection for pages:

collections: [
 {
  slug: "pages",
  fields: [
   { name: "title", type: "text", required: true },
   { name: "content", type: "richText" },
  ],
 },
]

Fetching Dynamic Pages in Next.js

export async function getServerSideProps({ params }) {
 const res = await fetch(`https://your-api.com/pages?slug=${params.slug}`);
 const page = await res.json();
 return { props: { page } };
}

export default function Page({ page }) {
 return <h1>{page.title}</h1>;
}

Conclusion

Dynamic pages in Payload CMS allow users to create and manage content without changing the code, making development more flexible and efficient.