Тёмный

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

Payload
Подписаться 6 тыс.
Просмотров 58 тыс.
50% 1

Опубликовано:

 

15 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 99   
@gregmartin9583
@gregmartin9583 3 года назад
I feel like Chris Pine is teaching me web dev. Enjoying this series.
@payloadcms
@payloadcms 3 года назад
Haha yikes, compliment of the century. Thank you! We will do our best to make it even better!
@ahmedsalim5552
@ahmedsalim5552 2 месяца назад
I thought it was deep fake at first
@malvibid
@malvibid 9 месяцев назад
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
@simonbedard8794 3 года назад
Great work, Congrats on your first RU-vid 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
@valentoMundrov 2 года назад
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.
@macaw7030
@macaw7030 3 года назад
THIS IS AMAZING🥵🥵. FAN OF PAYLOAD. I WOULD LOVE TO SEE MORE ON HOW SUCH HIGH QUALITY DESIGNS ARE ACTUALLY CODED🧐
@jordanarmstrong4839
@jordanarmstrong4839 3 года назад
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.
@furkandemirbilek7192
@furkandemirbilek7192 3 года назад
Very interesting series. I'm looking forward for the next episode!
@payloadcms
@payloadcms 3 года назад
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
@vnhtr 3 года назад
when it is coming
@payloadcms
@payloadcms 3 года назад
@@vnhtr soon! Within the next two weeks for sure!
@AnthonyCandaele
@AnthonyCandaele Год назад
Great video. It's interesting to see the process a web agency goes through when building a website. Payload CMS looks amazing too!
@christianmiguez1379
@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
@vabban4713
@vabban4713 3 года назад
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
@morespinach9832 6 месяцев назад
Reactstorefront? :) NextJS is too complicated for little value add. Have a look at the Svelte world.
@elruinnou
@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.
@qubit6787
@qubit6787 3 года назад
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
@abekoppal4210 2 года назад
How did you go about connecting MongoDB_URL to MongoDB atlas/compass I am struggling with this
@arsalanshaikh3763
@arsalanshaikh3763 3 года назад
Great Tutorial Sir, I was trying Payload last week, this video really helps a lot. Thanks for your time.
@payloadcms
@payloadcms 3 года назад
Thank you Arsalan! If you'd like to see anything covered in further depth, please let us know!
@tejasahluwalia8713
@tejasahluwalia8713 3 года назад
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
@payloadcms 3 года назад
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!
@MangoFlamingo
@MangoFlamingo 3 года назад
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
@morespinach9832 6 месяцев назад
Rebrand to what?
@mattgehrls4206
@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.
@Volinando
@Volinando 3 года назад
What an awesome video! I'm learning a lot from you. Looking forward for the rest of the series.
@payloadcms
@payloadcms 3 года назад
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!
@Cruncher81
@Cruncher81 3 года назад
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
@payloadcms 3 года назад
Love it. Thank you!
@bryanlee5522
@bryanlee5522 2 года назад
A lot of great information here. I like that you lay out your professional opinions.
@francoisschoeman5350
@francoisschoeman5350 6 месяцев назад
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!
@gadgetboyplaysmc
@gadgetboyplaysmc 8 месяцев назад
This is kinda like Prismic in Payload! awesome!
@ipovos
@ipovos 3 года назад
You mentioned Advanced Custom Fields and I remembered those times 4 years ago I was developing sites on Wordpress 💔 Nostalgia 😢
@payloadcms
@payloadcms 3 года назад
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
@morespinach9832 6 месяцев назад
@@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.
@thomaspavelka7335
@thomaspavelka7335 Месяц назад
Really good content, thanks. Just one tip: Instead of saying "blablabla" multiple times, say "et cetera", which sounds way more professional.
@RyuuuGamingUnlimited
@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
@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.
@FrytekPlayGames
@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?
@AllanLeonardJr
@AllanLeonardJr 2 месяца назад
This was awesome!!!
@pituboy
@pituboy 2 года назад
this website is huge, so much thanks for sharing this to us
@user-oo1ff5pp1o
@user-oo1ff5pp1o 6 месяцев назад
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,
@TobeDaMobe
@TobeDaMobe 2 года назад
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
@payloadcms 2 года назад
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!
@batcodehouse5964
@batcodehouse5964 Год назад
Wow bro i discover a wolrd!!! thanks very much i will share your proeyect!
@morespinach9832
@morespinach9832 6 месяцев назад
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! :)
@meosunio
@meosunio Год назад
Question: If I have existing API, can i integrate that to payloadcms and manage the data via payload cms?
@chioo9495
@chioo9495 3 года назад
Great!!. Do you consider using Styled Components ?
@payloadcms
@payloadcms 3 года назад
The team at TRBL prefers the syntax and style of JSS to Styled Components, but both are great tools!
@coco-nb2lt
@coco-nb2lt 4 месяца назад
Can we have another video that builds the website from scratch like this one, but uses Tailwind CSS instead of React JSS, please?
@RahulGajjar
@RahulGajjar 2 года назад
Yay! Open source :)
@seanrobinson233
@seanrobinson233 3 года назад
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
@ElliotDeNolf 3 года назад
This error is typically when MongoDB is not running on your machine. Ensure it is running locally, then give it another shot.
@syedmuzamilm
@syedmuzamilm 2 года назад
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
@preciousbanigo 6 месяцев назад
Use a VPN. I'm only able to access it using a VPN in Nigeria.
@arthurmelkonyan2840
@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
@seffychon
@seffychon Год назад
Is this episode still workable with the new NextJS app directory structure?
@HaykMkrtich-o4i
@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.
@muhamadrafipamungkas4465
@muhamadrafipamungkas4465 3 года назад
Gonna try
@payloadcms
@payloadcms 3 года назад
Awesome to hear. Let us know what you think as you give Payload a shot.
@valentoMundrov
@valentoMundrov 2 года назад
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!
@mezhopking
@mezhopking 2 года назад
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
@payloadcms 2 года назад
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
@kenobi6020 2 года назад
@@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
@joelapablaza7722
@joelapablaza7722 8 месяцев назад
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
@JamesMikrut 8 месяцев назад
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
@joelapablaza7722 8 месяцев назад
@@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
@ejoojoo
@ejoojoo 10 месяцев назад
updated video for payload2.0!
@Saioren
@Saioren 9 месяцев назад
59:27 I felt that on a real note brotha
@gigakvachakhia4777
@gigakvachakhia4777 3 года назад
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
@payloadcms 3 года назад
Haha well get ready to sell your soul :) Deployment will definitely be featured in-depth!
@permanar_
@permanar_ 2 года назад
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
@payloadcms 2 года назад
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!
@runydek6603
@runydek6603 Год назад
what theme you use on vscode?
@considercaption
@considercaption 10 месяцев назад
Where is the figma template?
@rohitghosal3868
@rohitghosal3868 2 года назад
lovely dear payload CMS
@CHEF_ALMERIA
@CHEF_ALMERIA 23 дня назад
Please make membership implementation and stripe to manage monthly SUSCRIPTIONS....
@dgaisan
@dgaisan 3 года назад
What does it really mean when you say it's "headless" (payload CMS)?
@payloadcms
@payloadcms 3 года назад
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
@dgaisan 3 года назад
@@payloadcms Thanks!
@mainul__islam
@mainul__islam 3 года назад
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
@payloadcms 3 года назад
Hey there - here's a link to the Figma file! www.figma.com/file/Ul801GH5yjcwEA3JVJH90F/Website-Series?node-id=713%3A1940
@mainul__islam
@mainul__islam 3 года назад
@@payloadcms Thank you so so much for this.
@thomasorta4297
@thomasorta4297 Год назад
how can I install payload in nextjs with tailwind css? is possible to do that?
@payloadcms
@payloadcms Год назад
You sure can. You'd just install Tailwind the normal way that Next suggests!
@morespinach9832
@morespinach9832 6 месяцев назад
Dumbest idea to use Tailwind. Bloatware for every element on the website, as if one is rewriting CSS all over.
@jrhager84
@jrhager84 3 года назад
What are your thoughts on Payload vs Prismic?
@payloadcms
@payloadcms 3 года назад
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.
@diverseaktivitaeten
@diverseaktivitaeten 2 года назад
Thank you!
@nathanvsplayer
@nathanvsplayer Год назад
Could you do an updated version of this?
@nathanvsplayer
@nathanvsplayer Год назад
If its out of date :)
@Alimehboob1028
@Alimehboob1028 2 года назад
Perfect
@dhaloh
@dhaloh Год назад
make an updated tutorial please
@user-rz9tf9iw6s
@user-rz9tf9iw6s Месяц назад
this is 3 yo today, is it still valid?
@JessicaLopez-o5j
@JessicaLopez-o5j 17 дней назад
Jackson Cynthia Taylor Susan Jackson David
@coco-nb2lt
@coco-nb2lt 4 месяца назад
Can we have another video that builds the website from scratch like this one, but uses Tailwind CSS instead of React JSS, please?
Далее
The Big Headless CMS Lie (James Mikrut)
18:14
Просмотров 58 тыс.
Тарковский - гений
00:48
Просмотров 513 тыс.
Russian soldiers get chased by Ukraine drone
00:28
Просмотров 55 тыс.
13 Things To Remove From Your Website Immediately
12:33
How to Roll Your Own Auth
13:05
Просмотров 109 тыс.
Please stop using px for font-size.
15:18
Просмотров 157 тыс.
10 common mistakes with the Next.js App Router
20:37
Просмотров 212 тыс.