Learn advanced Next.js with Payload’s website template - Part 1

[@payloadcms]

Remember to ask us what features you'd like us to explore in the comments. 👇

[@NouBram]

Something that is not currently included in the template which I've been implementing is localization with localized slugs, not sure if that is something you could include? Localizing text and data is easy enough, but once you start localizing slugs for SSG and ISR with a locale switcher that does *not* fetch or build the localized urls during runtime, and then add in nested pages it started to get rather complex pretty quick. I've got it working now but I am really curious on how you guys would implement full localization?

[@sebastiancasal8589]

are you going to re-create the ecommerce template?

[@AnthonyCandaele]

I think it would be nice to start from a design in Figma and see how you implement this design into Payload. I ask this because I have noticed that there is a strong connection between the design philosophy and the way Payload structures its content (hero sections, blocks, ...).

[@mangafunfun6163]

How would you implement a search with filters in the frontend 🙂

[@Amitsarker]

I appreciate for your outstanding explanation. Payload is on 🔥 Could you please show headless CRUD?

[@raykay6613]

Video on Multi Tenancy, Front End layouts per client, Domain assignment please...🙏🏼

[@monirulislam8267]

Please build the full website you showed in the figma file (from start to finish). Will be waiting for frequent videos. Finally, many thanks!

[@gytistalocka5356]

Jake’s scream speaks to my soul right now 🖤

[@MarJa3]

that spooked me 🤣 , poor Jake propbably re-writing v4 in rust at the moment

[@ventureskate88]

Same. Its a staple around here

[@MichaelParkadze]

@@ventureskate88 sounds like an office worth coming to

Thank you for the video. It’s much needed. It would be great if we could have videos about ‘multi-tenant’ and ‘localization.’ Localization is my personal priority.

[@6306-s8e]

and i18 as well

[@Elmoshir1]

next-intl pls

[@055David]

i18 please as its more popular than next-intl

[@AnthonyCandaele]

Great video. It's also nice to see Payload's philosophy on web design (Blocks). This design philosophy goes hand in hand with how Payload content is structured.

[@AR-ym4zh]

Got me off WordPress! Please make more of these it was great.

[@zsoltdeak5784]

Awesome job! I would like to see image upload/uploads to S3 and how to handle multiple collections uploads(like articles, programs, jobs, etc.) how to put them separatly. Thanks for the video!

[@payloadcms]

Noted.

[@codenameunknown3791]

Awesome demo! Excited for the part 2.

[@stephenadams6959]

Great intro. Keen to understand how we can add pages to the nested docs collection, support front end user logins, support multi-tenant sites, add roes to backend users to limit access to both collections and data within the collections.

[@paulumeh9563]

What is the e-commerce template going to be ready

[@nedJamez]

Data export and import. Great work guys!

[@prepperdon]

Working with that template right now on a new project. Thanks for all your hard work on Payload 3!!!

[@ramysobhieh9730]

Awesome work! Would love to see more details about multitenancy, RBAC Auth and localization

[@ADHDOCD]

@@ramysobhieh9730 more multi-tenancy and access control!

[@benedettoabbenanti8663]

woooa, I just looked at the new releases... guys you're running as hell! ahahah Just the last week I updated to v3.6 and now payload is at v3.9. What a fantastic team :D Amazing!

[@raykay6613]

Was waiting for this and the future explanation videos. I really loved your product. Great Work Guys

[@jzrobert]

I hit the like button when I heard Jake’s scream

[@mileslemon]

Love the heros/blocks approach to content authoring. We've been doing something similar with Drupal's Paragraphs module (both monolithic and headless). Payload is really the first CMS, in this headless goldrush we've been in this past half a decade, that I seriously feel could supplant Drupal for us. It would be great for the slug field functionality to be added to core, feels like a must have feature.

[@nima.zabihi]

my ultimate gatekeeper. appreciate all the efforts.

[@tatesknights]

I’d love to see more of how to customize the styling of the frontend.

[@gtwright]

Great stuff. Looking forward to following the series. One ask for future content: I'd love a deep dive on advanced publishing workflows - saving and scheduling drafts for publishing, particularly when a page is already published; scheduling and previewing batches of content that should be published at once; editor approvals of contributor submissions, etc.

[@MichaelParkadze]

Who the hell is screaming in the background 13:56 😆 None the less, great video! Looking forward for the other parts :) Edit: Shoutout to Jake, I know this type of scream 😆

[@payloadcms]

Best part of the video.

[@MichaelParkadze]

@@payloadcms Indeed 🤣

[@gmd9767]

I would love to see any video regarding A/B Testing and Analytics

[@DeividasM-b5r]

Thank you. Really happy for Full tutorial of Payload inner functionality specially with all new NEXT features.💚

[@haderlumpi]

Thanks for this very informative video. Would it be possible to have a deeper look into how Payload handles media? For example the code of the website template looks pretty complicated when it comes to media. Like, why is the media collection creating a bunch of downscaled/upscaled images? How are they used? And how does it play together with Next's image component? But I guess getting responsive images right is generally a bit tricky, so yeah.

[@savchukartur]

Awesome! Thank you Please tell about Localization

[@pshemekm]

I like this block-based approach and use it in every project, regardless of the stack. With one difference: usually Hero is one of many blocks in my case. While this may require additional enforcements, like 1 per page, or expecting the client to apply it as expected, I only have one structure to grasp when modeling and rendering the layout.

[@AddictedToSKA]

Great video!

[@madisluik]

Great stuff! Would like some content about nested nav items (megamenu), localization. dynamic classes for current menu item

[@piyushsontakke5628]

Great job!!! also please make a video on authentication in the payload.

[@IvailoGalov]

You’ve done an excellent job! Keep it up! If I may offer one piece of advice about the video: it would be even better if you avoided frantically clicking through various files and pieces of code while referring to them as “this” and “here.” For me, at least, it would be easier to follow along if you took your time and spoke a bit more deliberately.

[@ilichpadilla2448]

Great product 🎉

[@dhruvilshah7770]

Is it possible to have a dynamic search like let's say we have a search bar in the frontend and I want the text in it to get queried in a mongodb collection and the results get rendered as part of component dynamically. Also, on the frontend side can we add custom canvases like for threeJS 3d models and animations ?

[@ventureskate88]

The website template I’m showing actually has a search just like you’re describing! And yes, you can use threeJS in the frontend for sure. Any threejs + nextjs tutorial will work with Payload

[@haha-eg8fj]

@@ventureskate88 I think what he meant might be a Search component/block displaying in the middle of the home page. Think about a Directory site or a Job board. At the moment if I want to do that I need to extract the search component as a custom block. Unfortunately because of the "useEffect" in the code it will redirect me to the search page with search queries. And the results are actually predefined in the Search Results collection. I have to manually update the source code to change what collection the "search" is going to query on if I don't want to query the default "posts" collection. I guess I need to remove "useEffect" code and update the form in the search component if I don't want to redirect to "search" page when the component is loaded. It's easy to break things though.

[@szymcioDrift]

Thank a lot for a nice video as always Any advices how to achive different blocks in layout depending on e.g. page slug? What i've already found is defining another blocks type field and pass condtion to admin option, but its not "nice and easy", because i also need to set which field has to be rendered on frontend. e.g if I had more of these templates, it could get complicated

[@tomitomion1179]

Is that Jake screaming while working on the ecommerce template?

[@ps__9979]

great product!!!! I would definitely like to see Localization support do we warp frontend into dynamic locale slug...and does that breaks static pages...what about middleware's...? pls do site from figma all the way

[@VedatTürkoğlu-w9g]

payload + next.js >= wordpress + fully costumizable premium plugins for free. looks great

[@raphauy]

Awesome! Thank you!

[@nima.zabihi]

Does this type of structure for pages, blocks, and components apply to any kinds of modern front custom? Also, we can’t wait to see the next episode, especially the fully custom admin process (since it seems the old methods no longer work with version 3).

[@surajpatra3124]

great video. thank you for all the hard work! i would be interested to learn more about the authoring aspect of it. is there a versioning feature where authors can get previous versions ? is it possible to schedule a page publish ? how can we edit content from backend in case needed ? can we have folder structure for pages and dynamically fetch based on the folder structure ?

[@haha-eg8fj]

Hi I wonder what is the Search Results collection for? By looking at the code it seems that when performing a search it is getting data from this collection, instead of doing it dynamically. Is it because having static data is better for a CMS?

[@nathanlentz]

Quality content

[@payloadcms]

You get your hat yet?

[@nathanlentz]

@@payloadcms no :( rip

[@manhir25]

jake i feel you also very interesed in content about bi-directional relations in payload

[@code.design]

Please do full tutorial on mongodb. I do not want to assume. It always fails on the db side. Please!

[@liliestechzone7672]

I find it hard to believe that these things will all not be moved to premium in the future. Where we will end up having to pay monthly subscription if we want to keep these features but hey. I have never had a tutorial delivered by the CEO of a company. That is out of this world cool. SERIOUSLY!!!!

[@tce1867]

Great work! hope to get instantly reply here, I am totally new to nextjs and SSR, but still feel comfortable when get started with Payload, currently I just get stuck at Content Security Policy issues when try to deploy my works on ubuntu server. How should I deal with that?

[@mike-365]

Can you demonstrate nesting Blocks? Some thing like "Section" Block with background color field , then nest rows of Blocks inside it.

[@memesforyou9167]

hii, my client website is build on payload cms. But client want to download collections data into .csv, how can i do it please help me.

[@odysseus5199]

Bravo bro. iam looking your video and i got question about S3 datastorage, how to import?

[@jseng818]

are you guys also working on an ecommerce template?

[@payloadcms]

Yes, it's underway. Look for it in January.

[@tomitomion1179]

You heard that scream

[@motivemurat778]

With Payload CMS, is it possible to also use AuthJS for user authentication. I know payload has their own authentication implemented, but I was looking to use features like Magic Links and Provider signups that Auth Js provides.

[@odysseus5199]

when i deploy on vercel, my media is off. can you help me how to fix? or show me deployment tips for website template

[@thehoracle]

Would we get oAuth login anytime soon

[@FilipePinhoWebDeveloper]

Localization feature would be nice a nice talking.

[@Anis-qi5lp]

I would like to know more about the e-commerce features of payload

[@zulfikarahmad3684]

waiting for part 2

[@saidakhrarov5322]

No love for plugin-search 😢 App-wide search in a single plugin with like 8 lines of code, it's super cool... aaaaand ✨re-indexable! ✨

[@Tanner-cz4bd]

MashaAllah

[@alfyonyango]

Could you share the figma link?

[@masterize]

Can you explain how to speed up the local environment, why deploying on Vercel with the MongoDB plugin is very slow and creates a lot of connections to MongoDB. Thanks 🙏

[@DaniCalero]

Always do development with a local database, then use remote for production

[@ADHDOCD]

Imagine a world where hosting platforms use Payload and abandon Wordpress & its plugin nightmare!

[@payloadcms]

The world we should all live in.

[@Tanner-cz4bd]

Let’s make it happen

[@Zephury]

I feel like the bit about the CMO whining about build times was as funny as the laugh.

[@qaziamaan5102]

Uploading images to S3. How?

[@alexdin1565]

the notification that im waiting, this comment before watching the video, I wanna say thank you for payload CMS and thanks for these videos and for all the efforts please if you provide examples about "Jobs Queue" I read the docs but English is not my first language so it is difficult for me to get it I watched a youtube video about Django and celery my question is Jobs Queue similar to celery in django? and we hope you make video about it and if we can use it without the need of vercel etc... sorry for my English

[@JamesMikrut]

Hey! I will happily do a video on Jobs Queue. That's a good call. Expect it ASAP

[@innaarchitector4223]

It would be nice if you created some kind of tutorial on how to create a blog at least. Everything is so simple in the examples, but in the templates themselves everything is confusing, even the documentation does not give an understanding of how everything is supposed to work.

[@MichaelParkadze]

I would love to see some multi tentant action actually, seems like the most interesting part in payload compared to other solutions I've seen online.

[@ventureskate88]

I might do a multi tenant video even before the second part of this series. Keep an eye out

[@MichaelParkadze]

@@ventureskate88 Will do

[@davidrempel433]

I'm really enjoying using payload, just the HMR seems buggy. Is anyone else experiencing this or is it just me. It reloads the whole page on every style change

[@LutherDePapier]

(It still uses some Client Components here and there though.)

[@majdps995]

Watching this at 4 AM and heard Jake’s scream 💀

[@virtual5754]

James, it is spelled sqlite, not ouyrvtevirv96vdty

[@GabrielDucharme]

LFG

[@affiliatepaid747]

e-Cormmerce template my king----and please not only limit it to Stripe....coz in our countries, we dont have Stripe

[@scobelverse]

little too much adderall for this demo lol

[@JamesMikrut]

actual lol, if i had adderall i would be 10x-ing the pace i was going in this video for sure. my doc says i don't have ADD. so does my mom

[@scobelverse]

@ haha, i’m teasing man. what you’re doing for the community for this project and the passion is incredible. i’m still new to all this and was having trouble following. keep doing what you’re doing 🙏

[@babakfp]

Why is Payload so slow? Everything about it is slow. To make a change and wait wait wait wait wait for the change to appear on the browser. Navigating from a page to another page also slow. Also, it uses a lot of resources (1.7to2.0GB Memory). WordPress is slow, but I expect better from a tool that is supposedly being built with best tools and in this day and age. I never saw WordPress (locally deployed) to use this much of resources. WordPress UI is ugly, but Payload UI is ugly too; Again, I would expect better.

[@JamesMikrut]

Hey there - this is -only- during local development. It's because Next.js compiles things as you navigate. In production it doesn't use nearly as much memory and is blazing fast

[@babakfp]

@@JamesMikrut Hey. Slow development speed is equal to WordPress. I stopped using WordPress for the same exact reason.