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

[@gregmartin9583]

I feel like Chris Pine is teaching me web dev. Enjoying this series.

[@payloadcms]

Haha yikes, compliment of the century. Thank you! We will do our best to make it even better!

[@ahmedsalim5552]

I thought it was deep fake at first

[@malvibid]

I just discovered Payload. I am really inspired by the work the Payload team and community has accomplished. The ideologies behind Payload, your in-depth knowledge, workflow and development process are all mind-blowing to me. This series is amazing. I am a fairly new developer, so I'm learning so much from it. Thank you. I aspire to reach your level someday.

[@simonbedard8794]

Great work, Congrats on your first KZbin video. I'm working as a lead dev in a marketing agency base in Québec/Canada and we will definitely look forward using Payload for a project. Keep up the good work ! And btw, the CMS DESIGN IS AWSOME

[@valentoMundrov]

Hello dev! I hit [ERROR (payload): Forbidden: You are not allowed to perform this action.] on fetching data (I have full init object with keys). Any help would be appreciated, for I'm trying to use that framework for a company project.

[@christianmiguez1379]

I recently became unemployed and started studying new technologies (goodbye wordpress) and Payload + Nextjs and YOU motivates me again to start my own agency. It's really beautiful to learn and do things with Payload. Thanks for creating this series my friend

[@furkandemirbilek7192]

Very interesting series. I'm looking forward for the next episode!

[@payloadcms]

Thank you Furkan - already recorded. Will release soon! We are pumped to hear that you find the series interesting and will do our best to make it so.

[@vnhtr]

when it is coming

[@payloadcms]

@@vnhtr soon! Within the next two weeks for sure!

[@AnthonyCandaele]

Great video. It's interesting to see the process a web agency goes through when building a website. Payload CMS looks amazing too!

[@khoile4477]

love a refresh of this for 3.0!

[@jordanarmstrong4839]

Great work James. I really do miss hearing you talk about your work. It always blows my mind how in-depth your knowledge is about every aspect of what you do. Cheers man, I look forward to catching up sometime soon.

[@vabban4713]

Very exciting, I love the fact that you mention " I am gonna fight against Material" - What a conviction as a Dev and a Design Agency. That's your USP. Personally a big fan of NextJS and React-storefront.

[@morespinach9832]

Reactstorefront? :) NextJS is too complicated for little value add. Have a look at the Svelte world.

[@tejasahluwalia8713]

Thanks James for the awesome video. I'm having such a hard time deciding on a CMS to use for our new website and now I have to consider Payload as well! Btw at 1:17:13 you can click the little "Folder+" icon in the sidebar next to the workspace folder name. You hovered over it for a second as well. Just make sure you've selected the path where you want to create the folder.

[@payloadcms]

Thanks Tejas. If you need any help with Payload at any point feel free to reach out to us. We'd be happy to take you through what we feel makes it so much better to use than other CMS on the market right now. RE: new folders-that totally threw me for a loop! The trick if you want to create a folder at the ROOT is to make sure that you have no folder selected, then you can push that button per usual. That's what got me!

[@macaw7030]

THIS IS AMAZING🥵🥵. FAN OF PAYLOAD. I WOULD LOVE TO SEE MORE ON HOW SUCH HIGH QUALITY DESIGNS ARE ACTUALLY CODED🧐

[@elruinnou]

Ahh finally, it's here! Thank you so much for such a great work!! Anw, in formSubmission collection, if you set all fields readOnly to true, then you cant create a new item due to the fields are disabled on initial page load.

[@arsalanshaikh3763]

Great Tutorial Sir, I was trying Payload last week, this video really helps a lot. Thanks for your time.

[@payloadcms]

Thank you Arsalan! If you'd like to see anything covered in further depth, please let us know!

[@Volinando]

What an awesome video! I'm learning a lot from you. Looking forward for the rest of the series.

[@payloadcms]

Thank you! New episode coming out within the next few weeks. We've also got some shorter-form content coming out too, so stay tuned for that!

[@bryanlee5522]

A lot of great information here. I like that you lay out your professional opinions.

[@MangoFlamingo]

Honestly, I did not watch the video at first by judging the channel name and the thumbnail... This is a gem rebrand your content

[@morespinach9832]

Rebrand to what?

[@mattgehrls4206]

Don't worry about the dog. I vote more dog in the next one. Thanks for this, James. I came here looking for sort of an overview of the concepts, and I got that, but what felt like more profound for me was being able to witness how much process matters, and how simple* things are when you aren't trying to do everything all at once.

[@qubit6787]

Hey James: Some suggestions: 1. in VS Code if you want to form a new folder, you simply 'right-click' the main directory, in this lecture 'custom-web-series', and select 'New Folder'. 2. I suggest making sure you include a discussion about how to connect MongoDB_URL to a user's MongoDB Atlas, localhost, or DB provider (you mentioned Digital Ocean) Hope this helps~

[@abekoppal4210]

How did you go about connecting MongoDB_URL to MongoDB atlas/compass I am struggling with this

[@coco-nb2lt]

Can we have another video that builds the website from scratch like this one, but uses Tailwind CSS instead of React JSS, please?

[@gadgetboyplaysmc]

This is kinda like Prismic in Payload! awesome!

[@francoisschoeman5350]

A Wordpress guru tired of using Wordpress and trying to find / build an alternative AND a Digital Ocean user - man, we are a lot alike... I like where Payload is heading!

[@OneBrighDay]

In 2025 looking for Payload tuts. So I’m looking forward to you remaking this tutorial with Payload 3.

[@Cruncher81]

I am loving this payload and this series. Thank you. BTW advanced-new-file is an awwesome vscode extension just press ctrl=n and create new files or folders anywhere in the workspace

[@payloadcms]

Love it. Thank you!

[@pituboy]

this website is huge, so much thanks for sharing this to us

[@ipovos]

You mentioned Advanced Custom Fields and I remembered those times 4 years ago I was developing sites on Wordpress 💔 Nostalgia 😢

[@payloadcms]

Seriously. Bad part is that some clients still absolutely demand WP. Seems like that tide is finally turning though.. Especially now with Payload on the scene.

[@morespinach9832]

@@payloadcms not really. Even 2 years ago, WP has so much richness of functionality that Payload will take a couple of more years to catch up. Meanwhile, WP is just fine for those who know what they're doing.

[@your_skyfall]

Gonna try

[@payloadcms]

Awesome to hear. Let us know what you think as you give Payload a shot.

[@ejoojoo]

updated video for payload2.0!

[@chioo9495]

Great!!. Do you consider using Styled Components ?

[@payloadcms]

The team at TRBL prefers the syntax and style of JSS to Styled Components, but both are great tools!

[@FrytekPlayGames]

Love the design and the video, may I ask how did you manage to get your VS Code window to be transparent on a mac?

[@Saioren]

59:27 I felt that on a real note brotha

[@batcodehouse5964]

Wow bro i discover a wolrd!!! thanks very much i will share your proeyect!

[@RyuuuGamingUnlimited]

Looks good, I'm currently loving prismic, very easy to integrate layout components.. Only thing is there's no option to self host which this does. My only concern is this seems to be focused only on react? Does this work well with other framework such as sveltekit? I love svelte a lot better than react. Im not halfway yet but i resonate with your journey so much and your workflow from UX design in figma and hating tailwind, also working with wordpress. This video is gold for sure.

[@mattgehrls4206]

I know it's three months later, but it should work great in sveltekit. The "Headless" part of Headless CMS is talking about it being front end agnostic.

[@theceohq]

44:48 🌚

[@RahulGajjar]

Yay! Open source :)

[@seffychon]

Is this episode still workable with the new NextJS app directory structure?

[@ReginaldAmedee]

Is anybody else getting an error with node-sass failing? After further research, I believe it was deprecated for sass. How did y'all address this issue?

[@mezhopking]

Hey - with the release of 1.0 recently, are these tutorial series still relevant? Or have there been fairly large api changes over the past year?

[@payloadcms]

Great question! Our breaking changes since this video have been EXTREMELY minimal, and very fringe-case. 100% of this video series applies to Payload post-1.0. 👍 We have lots more videos coming soon!

[@kenobi6020]

@@payloadcms that's great news for me! Thank you for bringing this product to the web dev community. Payload will be the first ever CMS that I'll use. I'm going to make some small projects and then try and use it for a freelance / side-hustle on my free time. From all the headless CMS options out there, as far as I saw, I believe that Payload will bring the best dev experience for building a project. Hope I can give some feedback or collaborate in the project in the near future after I get my hands on it. Really looking forward to the future of Payload CMS

[@rohitghosal3868]

lovely dear payload CMS

[@TobeDaMobe]

Hey James, great job! Greetings from the german dev community! :) So here are my two questions: 1. Image sizes are calculated when you upload some, right? Is there a way to recalculate all images in later added dimensions? 2. Is it just me or is the "description" property in Fields missing? VS Code marks an error on it and the compiling fails. Autocomplete does not offer the prop, too. Any hints for me? Of course everybody is invited to answer my questions ;) Thank you very much! Toby

[@payloadcms]

Hey Toby, thanks for the compliment! Here are some quick answers for you: 1. We do have a "regenerate media" script that we've written and use. We are going to publish a post about it soon. Keep an eye out for that. Until we publish, you can write your own pretty easily using the Local Node API. Just resave each doc within your upload-enabled collections and pass in the original file path, and you'll regenerate each image accordingly. Easy enough. But keep an eye out for our tutorial here! 2. You might have an outdated version of Payload if you are missing the Description property. Try and update Payload and see if that fixes it. It just might!

[@morespinach9832]

Seriously... the dig at functions.php in Wordpress in another video looks far tamer than the kind of random logic we're burdening a JSON and a TSX file with! :)

[@runydek6603]

what theme you use on vscode?

[@SyafiqAbdul]

is this still valid for 3.0?

[@AllanLeonardJr]

This was awesome!!!

[@syedmuzamilm]

After watching this series I loved payload cms. And I tried to use it with nextjs at a starup. I tried to host it on AWS EC2 with nginx server. But I am not able to get the admin part on the website. Nextjs part is working fine. Can you help me with that.

[@preciousbanigo]

Use a VPN. I'm only able to access it using a VPN in Nigeria.

[@diverseaktivitaeten]

Thank you!

[@HaykMkrtich-o4i]

Hi can you please update the repository of NextJS boilerplate setup so it can work with app dierctory of next.js 13 also. Thanks.

[@nathanvsplayer]

Could you do an updated version of this?

[@nathanvsplayer]

If its out of date :)

[@meosunio]

Question: If I have existing API, can i integrate that to payloadcms and manage the data via payload cms?

[@DanhNguyen-y5n]

Hi admin, I want to embed element use Iframe element to payload page, I can do it, Such as I have report URL, and I do use this Iframe element to show,

[@permanar_]

Hey, thanks for the video. It's really awesome. I haven't finished it out yet but still wanna comment something. Haha. Anyway, does this CMS provide any way to like turning in-off maintenance mode? And if I know this is self hosted possible but, can I freely customize the user's role (auth) as much as I needed?

[@payloadcms]

Hey Richie - thanks for the compliments! By maintenance mode, do you mean development mode? If so, then yes - it definitely does! You can build for production and then run your server in production mode. Check out the docs for more info there. Regarding customizing user roles, that's actually one of the best and most powerful parts of Payload. It's called Access Control and it's 100% extensible and customizable. You can build your own role-based access control pattern or any other type of auth / permissions pattern you can dream up. Take a look at the docs for more info!

[@mainul__islam]

really really amazing content. I want to code along with you, but I can't find the design file anywhere, where can I get the design file?

[@payloadcms]

Hey there - here's a link to the Figma file! www.figma.com/file/Ul801GH5yjcwEA3JVJH90F/Website-Series?node-id=713%3A1940

[@mainul__islam]

@@payloadcms Thank you so so much for this.

[@gigakvachakhia4777]

if there's gonna be a deploying part at the end of the series, i'm gonna sell my soul to you with the cheapest price available on amazon.

[@payloadcms]

Haha well get ready to sell your soul :) Deployment will definitely be featured in-depth!

[@considercaption]

Where is the figma template?

[@jrhager84]

What are your thoughts on Payload vs Prismic?

[@payloadcms]

Payload is significantly more powerful than Prismic. Prismic is great for a write-only headless CMS where you truly only need to publish content, but Payload is significantly more extensible and future proofed in that it gives you full control over your apps, from file upload to login to third party integrations, and much, much more.

[@arthurmelkonyan2840]

Creating a File or a Folder. Install extension "New" to create a File or a Folder, just right click and it will expand the oprions

[@dhaloh]

make an updated tutorial please

[@thomaspavelka7335]

Really good content, thanks. Just one tip: Instead of saying "blablabla" multiple times, say "et cetera", which sounds way more professional.

[@valentoMundrov]

Thank you for the intensive course, helped me a lot to get into it. I still get error trying to fetch data from a component: Forbiden... error. Even with all the keys, certificate even and actual data in MongoDB I can see. Whould be of help to figure where am I wrong, thank you! It's good to point out that I'm in a process of purchasing a suscription for a company, so I'm not loosing your time... thank you again!

[@seanrobinson233]

When running npm run dev after npm install, I'm getting hit with this error -- ERROR (payload): Error: cannot connect to MongoDB. Details: connect ECONNREFUSED 127.0.0.1:27017 Anyone else getting this?

[@ElliotDeNolf]

This error is typically when MongoDB is not running on your machine. Ensure it is running locally, then give it another shot.

[@thomasorta4297]

how can I install payload in nextjs with tailwind css? is possible to do that?

[@payloadcms]

You sure can. You'd just install Tailwind the normal way that Next suggests!

[@morespinach9832]

Dumbest idea to use Tailwind. Bloatware for every element on the website, as if one is rewriting CSS all over.

[@dgaisan]

What does it really mean when you say it's "headless" (payload CMS)?

[@payloadcms]

Hey @Battlecruiser-a headless CMS is one that only concentrates on content management, and does not impose any design systems on you for how and where your content is stored. So, for example, you could use Payload for content editing and management, but build the frontend of your app(s) in any language or application that you choose! You could store content in one place but use it in a smart TV app, a native app, a web app, and more, all built with separate technologies. The frontend is the "head".

[@dgaisan]

@@payloadcms Thanks!

[@rhh1090]

44:50 😅

[@Alimehboob1028]

Perfect

[@joelapablaza7722]

It's quite interesting, it's just that it's similar to Next.js, for those who enjoy limitations, with all due respect. Another negative point from my perspective is the documentation

[@JamesMikrut]

Hey there! Payload is completely different than Next.js. What do you mean? I think you might be misunderstanding where Next.js stops and Payload starts. Also, I would love to improve our documentation wherever you think we need to. Can you give me some insight as to where you think we should improve the docs?

[@joelapablaza7722]

@@JamesMikrut Exactly! That's what I mean, the line between where Next.js ends and Payload begins is blurry because they seem to share the same ideology. The product is amazing. I just mean that it struggles when integrating with other tools (it can be done, but it's extra work for the developer), like Next.js does. I still believe that the documentation should improve, especially in terms of modularity and plugins; it should expand much more, making it feel less like a closed development environment. I honestly believe it has a lot of potential, although I would try to separate it more from the ideology of Next.js and provide developers with more flexibility through improved documentation. However, the product is incredible, but that's just my take

[@CHEF_ALMERIA]

Please make membership implementation and stripe to manage monthly SUSCRIPTIONS....

[@WisamJbori]

this is 3 yo today, is it still valid?

[@IT_psychopath]

with all due respect, wordpress is still better... you are constantly changing something and everything gets outdated quickly, you have to constantly go to the documentation to understand what you changed again... in wordpress practically nothing changes for years, which creates stability and reduces the cost of constant changes.... your solution is not superior to wordpress in terms of speed. the solution is good, but in my opinion too raw... usability is debatable... you can take not wordpress, but for example Python and Wagtail. the price is not great for your license, but I do not see the point in it when there are many ready-made solutions no worse....

[@coco-nb2lt]

Can we have another video that builds the website from scratch like this one, but uses Tailwind CSS instead of React JSS, please?