Autobat Industries
Chris Mail on LinkedIn

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.