Now that we’ve scaffolded the base project - a PayloadCMS instance (running on SQLite) and a clean Next.js frontend — the next step is to connect the two so we can render actual CMS-managed content.
What We’re Doing
The goal is simple: Render the content stored in PayloadCMS on the Next.js site using typed data structures and clean component logic.
Files I Changed or Added
1) frontend/src/payload-types.ts
This is a copy of the type definitions auto-generated by PayloadCMS.
By copying this into the frontend, we get strong typing for our CMS content - no need to guess field names or types when working in the UI or page components. It keeps development smooth and helps catch errors early.
2) frontend/src/app/page.tsx
This is the main entry point of the site — the homepage in our example
I updated it to:
- Call the PayloadCMS API to fetch content for the homepage
- Pass that data into React components that render each block
- Use the types from payload-types.ts for safer development
3) frontend/src/lib/content.ts and ui.ts
These are utility files to help with content and style rendering.
- content.ts: Contains helper functions for calling the PayloadCMS API and transforming responses
- ui.ts: Contains a simple CSS class concatenator (cn()) to manage conditional classes in components
4) frontend/src/components/blocks/*
These components are responsible for rendering the different block types from PayloadCMS.
I borrowed these from the default Payload frontend scaffold and adapted them for this site. This is where you can start building the look and feel you want for your content - headlines, layout blocks, images, rich text, and more.
Think of this folder as your page-building toolkit but make sure you check everything that Payload creates for you in the scaffolding, there is a huge amount of predefined components for you to iterate on
5) frontend/src/components/Richtext/*
PayloadCMS ships with a great rich text editor, and I reused their frontend components to render rich text safely and flexibly.
With a website rendered locally, it's time to run the static build process and push it to our hosting platform.