DEV Community

Cover image for Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS - Ep. 1
James Mikrut for Payload CMS

Posted on • Originally published at payloadcms.com

7 5

Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS - Ep. 1

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

Hi, my name is James. Outside of co-founding Payload CMS, I also operate a professional design firm called TRBL. There, we specialize in custom UX and full-stack development—usually TypeScript front-to-back. I've been a designer and full-stack developer for around 10 years now and self-employed for six. I absolutely love the work that I do.

I have been working on a new video series that describes, in detail, how professional design firms like TRBL go about building completely custom websites using a headless CMS, React, and TypeScript. This series is going to be a bit different than the typical to-do app style videos and I want it to show a much deeper level of project approach and code mentality—all the way from how to scaffold centralized, reusable TypeScript types to how to build websites with React layout-building components.

Table of Contents

  • 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

Series Goals

One of my goals with this series is to provide a window into how professional design firms go about delivering sites with a lot of value to clients that absolutely need that level of quality, and are willing to pay for it. The site that we'll be building is actual, real-world work, and although it's more of a small-to-medium budget for us, the principles involved can be used to deliver websites where clients will happily seek out talented designers / developers and pay $100K+, because they need it.

Another goal of mine is that I want to challenge our industry to find the clients that value the work that we do, and I want developers to stop selling themselves short. Also, don't worry about the Squarespaces of the world. Find the budgets that reward you for your skill. There is a segment of the market that still absolutely requires high-end development standards and approaches, and it's alive and well.

Feedback is Appreciated

This is episode 1 - and it's my first ever YouTube video. I would greatly appreciate any candid feedback that this community has for me, and if you haven't already, please give Payload a shot. We'd love to hear your thoughts.

Let us know what you think, and thank you!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up