Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS – Episode 1

If you’ve ever wondered how professional design firms go about building high-end websites, this series is for you.

In this tutorial series, we will be building a custom and professionally designed real-world website from scratch using NextJS, TypeScript, React JSS, and Payload CMS.

Design by TRBL: https://trbl.design
Payload CMS: https://payloadcms.com

Code for this episode: https://github.com/payloadcms/custom-website-series/tree/episode-1

Payload + NextJS Boilerplate Used: https://github.com/payloadcms/nextjs-custom-server

Topics:
0:00 – Intro
3:16 – Project plan & series overview
15:26 – Design review
25:17 – Payload introduction
33:25 – Payload + NextJS boilerplate setup
43:17 – CMS scaffolding (form submissions, studies, shared Payload fields, etc.)
1:00:08 – The first layout building block – Content
1:16:05 – Globals configuration (mega menu, footer, social media)
1:35:53 – All layout blocks – fast-forward and review
1:46:49 – Recap

You May Also Like