Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS - Episode 1
ฝัง
- เผยแพร่เมื่อ 19 ก.ค. 2024
- 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: trbl.design
Payload CMS: payloadcms.com
Code for this episode: github.com/payloadcms/custom-...
Payload + NextJS Boilerplate Used: github.com/payloadcms/nextjs-...
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 - วิทยาศาสตร์และเทคโนโลยี
I feel like Chris Pine is teaching me web dev. Enjoying this series.
Haha yikes, compliment of the century. Thank you! We will do our best to make it even better!
I thought it was deep fake at first
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.
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.
A lot of great information here. I like that you lay out your professional opinions.
Great work, Congrats on your first TH-cam 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
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.
Great video. It's interesting to see the process a web agency goes through when building a website. Payload CMS looks amazing too!
THIS IS AMAZING🥵🥵. FAN OF PAYLOAD. I WOULD LOVE TO SEE MORE ON HOW SUCH HIGH QUALITY DESIGNS ARE ACTUALLY CODED🧐
What an awesome video! I'm learning a lot from you. Looking forward for the rest of the series.
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!
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
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.
Very interesting series. I'm looking forward for the next episode!
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.
when it is coming
@@vnhtr soon! Within the next two weeks for sure!
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.
Reactstorefront? :)
NextJS is too complicated for little value add.
Have a look at the Svelte world.
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.
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!
Great Tutorial Sir, I was trying Payload last week, this video really helps a lot. Thanks for your time.
Thank you Arsalan! If you'd like to see anything covered in further depth, please let us know!
this website is huge, so much thanks for sharing this to us
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~
How did you go about connecting MongoDB_URL to MongoDB atlas/compass I am struggling with this
This was awesome!!!
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
Love it. Thank you!
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.
Honestly, I did not watch the video at first by judging the channel name and the thumbnail... This is a gem rebrand your content
Rebrand to what?
Wow bro i discover a wolrd!!! thanks very much i will share your proeyect!
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!
This is kinda like Prismic in Payload! awesome!
You mentioned Advanced Custom Fields and I remembered those times 4 years ago I was developing sites on Wordpress 💔 Nostalgia 😢
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.
@@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.
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?
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! :)
Thank you!
updated video for payload2.0!
Yay! Open source :)
Gonna try
Awesome to hear. Let us know what you think as you give Payload a shot.
Perfect
lovely dear payload CMS
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.
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.
Question: If I have existing API, can i integrate that to payloadcms and manage the data via payload cms?
59:27 I felt that on a real note brotha
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
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!
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?
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!
Great!!. Do you consider using Styled Components ?
The team at TRBL prefers the syntax and style of JSS to Styled Components, but both are great tools!
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
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!
Is this episode still workable with the new NextJS app directory structure?
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,
Hi can you please update the repository of NextJS boilerplate setup so it can work with app dierctory of next.js 13 also. Thanks.
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
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?
@@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
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.
Haha well get ready to sell your soul :) Deployment will definitely be featured in-depth!
what theme you use on vscode?
Really good content, thanks. Just one tip: Instead of saying "blablabla" multiple times, say "et cetera", which sounds way more professional.
Can we have another video that builds the website from scratch like this one, but uses Tailwind CSS instead of React JSS, please?
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?
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!
@@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
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.
Use a VPN. I'm only able to access it using a VPN in Nigeria.
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?
Hey there - here's a link to the Figma file!
www.figma.com/file/Ul801GH5yjcwEA3JVJH90F/Website-Series?node-id=713%3A1940
@@payloadcms Thank you so so much for this.
What does it really mean when you say it's "headless" (payload CMS)?
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".
@@payloadcms Thanks!
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?
This error is typically when MongoDB is not running on your machine. Ensure it is running locally, then give it another shot.
What are your thoughts on Payload vs Prismic?
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.
how can I install payload in nextjs with tailwind css? is possible to do that?
You sure can. You'd just install Tailwind the normal way that Next suggests!
Dumbest idea to use Tailwind. Bloatware for every element on the website, as if one is rewriting CSS all over.
make an updated tutorial please
Where is the figma template?
Could you do an updated version of this?
If its out of date :)
Can we have another video that builds the website from scratch like this one, but uses Tailwind CSS instead of React JSS, please?