@@leerobit’s the delayed cursor that’s most jarring. and it would’ve been nice if the screen zooms were a little more slower and steady for longer videos like this
Great video - interesting idea placing some components into layout to prevent the refresh/revalidation. This makes me think server side is more viable for dashboard like interfaces than I previously thought - more examples in this line would be great.
Yeah, normally it has been hard to get that "SPA like" behavior, but with the App Router this becomes really easy. Plus, you can stream in your UI + send less JS to the client, so it's faster too :)
Love this high level overview video format, with the most interesting bits explained! As opposed to full tutorial which could have been long and not too exciting.
[00:00] 📧 Building an email client with Next.js and Postgres - Building an email client with Next.js and Postgres. - Taking advantage of caching for improved performance. [00:57] 🏗 Starting with Create Next App and layout setup - Initiating the project with Create Next App and configuring Tailwind and pnpm. - Designing the initial layout with three columns: folders, email list, and email view. [02:42] 🔄 Implementing shared layout and server component - Using shared layout to maintain scroll position between route changes. - Utilizing server component for the email column to improve performance. [04:29] 📬 Fetching and displaying emails in folders - Retrieving emails from the database based on folder name. - Displaying emails with conditional rendering for special folders. [05:41] 📝 Creating a new email with server-side validation - Designing a form for composing emails with type-ahead functionality for recipients. - Implementing client and server-side validation for form inputs. [08:19] 🗃 Handling database transactions for email composition - Managing database transactions for sending and receiving emails. - Updating data and redirecting after successful email creation. [10:35] 🚀 Progressive enhancement with Server Actions - Demonstrating Server Actions without JavaScript dependency for sending emails. - Showcasing the application's functionality without JavaScript enabled. Made with HARPA AI
i haven't played with Next13 in a while, since Next14 was released lately i was like why not building this small app with you. Had lot of fun and learned lot thanks Lee for those fun and useful tutos as usual keep it up
As good as the animations looked they were a little distracting for me personally. For the demo it was fine but for the code review maybe just a regular viewing with slightly zoomed in would be nice. Just my opinion, thank you for introducing to me v0 it looks very interesting.
I am really curious how we're going to use *real* (and not the native) client-side validation with useFormState. Without it, you'll always have to wait for the server action response to know your field is valid. What if it is invalid (e.g. "min. 2 characters"), you add some characters to make it valid? Without client-side validation, you only see your validation status after a submit request - and I bet you don't want to send a request for every keystroke. Sure, you have to validate in the server action anyways, but I have yet to see a solution for how to ALSO do the validation on the client (especially for re-validation on input) with React's new form hooks.
Thanks for sharing this, helps tremendously! Might add though, that the code linked isn't the same structure though so its a little difficult to follow, e.g. the layout files aren't doing what you say in the video.
Hi Lee, can make a video specifically about the four caching strategies that NextJS 14 offers, with examples? It’d be great if you can also explain the different invalidation techniques and their pros and cons.
Hello, I have a similar app to this but with animation and when I click for example an email in your app the FirstColumn Component re-renders which is annoying to have the animation happen on FirstColumn on every email click. I use parallel route instead of component and Optional Catch-All Segments.
Hey Lee, great vid as usual. May I ask, what mic and camera setup you're using or recommend for someone interested in doing some amazing videos like yours, thank you!
Hi Lee. Can we use server action (not form action) to mutate data on the server? something like setting a loading state to true inside a form submit handler and then calling the server action mutation and await it, then setting the loading state again to false. I thought it's cool because I have a full type safety of whatever the server action mutation is returning. That way I can return some error object and show it in the client
Hi just curious, is this also possible with Remix or just React? Or its a unique feature of nextjs or is it just way easier in nextjs? Really looking for motivation to learn nextjs/remix
Great video! Is it true that as soon as you add any authentication, the automatic cache doesn't work anymore? Eagerly awaiting more docs on unstable_cache (and for it to get stable :D), or does sql`` from vercel postgres use fetch under the hood?
Vercel Postgres uses fetch, but for non-fetch based things, we're working on other caching improvements next to simplify that story. unstable_cache is okay but we can do better :) And it's fine to have authentication and dynamic rendering, while still having cached data. If you wanna see a tutorial for that, we have a new course on nextjs.org/learn
Great job! Love your videos. Btw how would you reset the scroll if the layout is not re-rendered? Like on a regular website, I have a header & footer in the layout so when navigating between pages the scroll stays the same. Ideally it should reset to the top after new page is rendered isn't it?
Why would you be joining users to obtain recipient data in Sent folder? That should just be a part of the email itself, otherwise it means you're adding everyone I ever send emails to as users. Same goes for Inbox, fetching sender details from users? Everyone that ever sends me an email is saved as a user? Unless I'm missing something, this makes little sense...
Is pretty fantastic stuff! Was toying around with some concepts today. Would be slick if server-fetched data like vercel/postgres queries could be linked to a tag in cache instead of "just" the route Hoping that I'll be writing fetch("/api/xxxx") less and less often
Yeah we're working on making this easier than today where you need to use unstable_cache to add tags nextjs.org/docs/app/api-reference/functions/unstable_cache
Not tryna be an ungrateful gimme-more guy! The feature sets y'all are pumping out are fantastic! Will check out unstable_cache as it seems like what I was after. For my current use case (a baby admin zone website builder w/ only a few tables) it isn't too tricky to know where data is out-of-date. I would expect that with bigger projects this would be a great add as it becomes near-impossible to remember where all data is being used.
Nice video. Thanks for sharing. Quick question. Ive seen alot of those intros with the same style of editing to showcase the application/webpage. How did you create that, if you dont mind me asking? :)
If you wanted to read headers, the page would render dynamically, but you can still have the *data* be cached. So page transitions can still feel fast. We're also working on optimizing to make as much of the page static as possible in Next.js 14 nextjs.org/14.
If you wanted to read headers, the page would render dynamically, but you can still have the *data* be cached. So page transitions can still feel fast. We're also working on optimizing to make as much of the page static as possible in Next.js 14 nextjs.org/14.
What is the cache mechanism used here (for data fetching)? I see in NextJS there are different cache mechanisms (Request Memoization, Data Cache, Full Route Cache, Router Cache) but since 'fetch' wasn't used in the code, I wasn't sure how the code cache the data.
Vercel Postgres is using `fetch`. So it would work the same if you were using `fetch` directly. If you're not using `fetch`, you could use this nextjs.org/docs/app/api-reference/functions/unstable_cache
You shouldn't need to use router.refresh, in general revalidateTag is going to be the best option for the most granular caching, and then revalidatePath would be the next choice.
hi Lee don’t mean to be critical and hope you this feedback ina positive sense -if you could build simple app which shows how to login using email and password ., with email verification and two factor auth - it would be much more useful - and no i don’t want to use an external auth service - nor use next auth - which frankly looks like a hobby project - next js badly needs the kind of dev ex that laravel provides
Instead of running postgres on frontend, why are not there simple things since the dawn of internet like sitemaps indexes and i18n path routing? Sloppy versions, half baked features and useless things.
Great video! As feedback, I think the screen studio effects are excessive for this type of video. I feel a bit dizzy after watching it.
Yeah I think I agree, first time I've tried using this out but don't know if I love it for longer videos
@@leerob Also the delay between the animated cursor vs the highlights when hovering is jarring 😵💫
@@leerobit’s the delayed cursor that’s most jarring. and it would’ve been nice if the screen zooms were a little more slower and steady for longer videos like this
What software is that?
@@danielbark It’s called Screen Studio. I don’t think I can post links here but it’s made by this guy called Adam Pietrasiak
Good to see server actions in action. I am planning to use server actions in my new nextJS project. This was a good walk through.
Great video - interesting idea placing some components into layout to prevent the refresh/revalidation. This makes me think server side is more viable for dashboard like interfaces than I previously thought - more examples in this line would be great.
Yeah, normally it has been hard to get that "SPA like" behavior, but with the App Router this becomes really easy. Plus, you can stream in your UI + send less JS to the client, so it's faster too :)
Love this high level overview video format, with the most interesting bits explained! As opposed to full tutorial which could have been long and not too exciting.
[00:00] 📧 Building an email client with Next.js and Postgres
- Building an email client with Next.js and Postgres.
- Taking advantage of caching for improved performance.
[00:57] 🏗 Starting with Create Next App and layout setup
- Initiating the project with Create Next App and configuring Tailwind and pnpm.
- Designing the initial layout with three columns: folders, email list, and email view.
[02:42] 🔄 Implementing shared layout and server component
- Using shared layout to maintain scroll position between route changes.
- Utilizing server component for the email column to improve performance.
[04:29] 📬 Fetching and displaying emails in folders
- Retrieving emails from the database based on folder name.
- Displaying emails with conditional rendering for special folders.
[05:41] 📝 Creating a new email with server-side validation
- Designing a form for composing emails with type-ahead functionality for recipients.
- Implementing client and server-side validation for form inputs.
[08:19] 🗃 Handling database transactions for email composition
- Managing database transactions for sending and receiving emails.
- Updating data and redirecting after successful email creation.
[10:35] 🚀 Progressive enhancement with Server Actions
- Demonstrating Server Actions without JavaScript dependency for sending emails.
- Showcasing the application's functionality without JavaScript enabled.
Made with HARPA AI
Great video Lee! Awesome to see it all come together! Gotta love Nextjs
It was an informative video. Would love to see more like this, explaining concepts and features by projects.
i haven't played with Next13 in a while, since Next14 was released lately i was like why not building this small app with you. Had lot of fun and learned lot thanks Lee for those fun and useful tutos as usual keep it up
As good as the animations looked they were a little distracting for me personally. For the demo it was fine but for the code review maybe just a regular viewing with slightly zoomed in would be nice. Just my opinion, thank you for introducing to me v0 it looks very interesting.
Dope video, loved the effects and presentation style
more content like this!
it was a great video and very educational even for those who write Next every single day!🥳 (blazing fast too)
Lee, Make more videos like this, thats amazing
Thanks!
I am really curious how we're going to use *real* (and not the native) client-side validation with useFormState. Without it, you'll always have to wait for the server action response to know your field is valid. What if it is invalid (e.g. "min. 2 characters"), you add some characters to make it valid? Without client-side validation, you only see your validation status after a submit request - and I bet you don't want to send a request for every keystroke. Sure, you have to validate in the server action anyways, but I have yet to see a solution for how to ALSO do the validation on the client (especially for re-validation on input) with React's new form hooks.
Thanks for sharing this, helps tremendously! Might add though, that the code linked isn't the same structure though so its a little difficult to follow, e.g. the layout files aren't doing what you say in the video.
aaaaaaaaaand I have motion sickness 🫠 Great run down, thank you. Perhaps a little less cursor chasing/panning though?
Hi Lee, can make a video specifically about the four caching strategies that NextJS 14 offers, with examples? It’d be great if you can also explain the different invalidation techniques and their pros and cons.
I like the Mickey Mouse glove cursor you got there
Thank you I made it myself (jk it's Screen Studio)
Hello, I have a similar app to this but with animation and when I click for example an email in your app the FirstColumn Component re-renders which is annoying to have the animation happen on FirstColumn on every email click. I use parallel route instead of component and Optional Catch-All Segments.
Love your videos. Just wanted to echo some of the other comments on the animation flying around. I found it really quite difficult to watch.
on github repo there is no layout component inside f/[name]
Regarding the scroll position niceity: Rerending would not be a problem regarding the scroll position. Remounting would be a problem 🤓.
Hey Lee, great vid as usual. May I ask, what mic and camera setup you're using or recommend for someone interested in doing some amazing videos like yours, thank you!
Fantastic video! And yeah please make some more videos ❤❤❤❤
Great vid, Lee!
Can’t wait to use v0 😅
I have been having big problems finding a postgres to nextjs project that dosen't use a ORM. Thanks!
Hi Lee. Can we use server action (not form action) to mutate data on the server? something like setting a loading state to true inside a form submit handler and then calling the server action mutation and await it, then setting the loading state again to false. I thought it's cool because I have a full type safety of whatever the server action mutation is returning. That way I can return some error object and show it in the client
Thank you for the content 🙌 quick question, why did not you prefer parallel routes?
What software do you use for video editing? Great video btw
Nice video! Could you go through Server Actions in more detail? Especially how to implement error handling
Hi just curious, is this also possible with Remix or just React? Or its a unique feature of nextjs or is it just way easier in nextjs? Really looking for motivation to learn nextjs/remix
Great video! Is it true that as soon as you add any authentication, the automatic cache doesn't work anymore? Eagerly awaiting more docs on unstable_cache (and for it to get stable :D), or does sql`` from vercel postgres use fetch under the hood?
Vercel Postgres uses fetch, but for non-fetch based things, we're working on other caching improvements next to simplify that story. unstable_cache is okay but we can do better :) And it's fine to have authentication and dynamic rendering, while still having cached data. If you wanna see a tutorial for that, we have a new course on nextjs.org/learn
That was something so incredible, man
Great job! Love your videos.
Btw how would you reset the scroll if the layout is not re-rendered?
Like on a regular website, I have a header & footer in the layout so when navigating between pages the scroll stays the same. Ideally it should reset to the top after new page is rendered isn't it?
hello, a question what does revalidatePath('/', 'layout') mean ? is the 'layout' a path ?
It's refreshing all the data, I could also do cache tags if I wanted
I am interest to see how you would handle file and screenshot attachment
Great video!
Really cool. Can you do file attachments with Vercel Blob next?
Why would you be joining users to obtain recipient data in Sent folder? That should just be a part of the email itself, otherwise it means you're adding everyone I ever send emails to as users. Same goes for Inbox, fetching sender details from users? Everyone that ever sends me an email is saved as a user? Unless I'm missing something, this makes little sense...
Is pretty fantastic stuff!
Was toying around with some concepts today. Would be slick if server-fetched data like vercel/postgres queries could be linked to a tag in cache instead of "just" the route
Hoping that I'll be writing fetch("/api/xxxx") less and less often
Yeah we're working on making this easier than today where you need to use unstable_cache to add tags nextjs.org/docs/app/api-reference/functions/unstable_cache
Not tryna be an ungrateful gimme-more guy! The feature sets y'all are pumping out are fantastic! Will check out unstable_cache as it seems like what I was after.
For my current use case (a baby admin zone website builder w/ only a few tables) it isn't too tricky to know where data is out-of-date. I would expect that with bigger projects this would be a great add as it becomes near-impossible to remember where all data is being used.
would be great if you would have connected gmail or outlook and get those emails.
Nice video. Thanks for sharing.
Quick question. Ive seen alot of those intros with the same style of editing to showcase the application/webpage. How did you create that, if you dont mind me asking? :)
Curious about the same question, since I do a lot of tutorials :)
Screen Studio
😮 we want more of those videos please
Just one thing the I can't focus on the video bc it keeps following the mouse hhhh 😅
Great video. Quick question, what did you use to disable JavaScript? It always take me some time finding it in the devtools.
Command + Shift + P
@@leerob waaat. So much time would have been saved if I knew about this before 😆. Thanks!
What do you use yo récord and make the camera zoom follow the cursor? I would love to know, thank you!
Screen Studio
thanks @@leerob
Can you please make a tutorial for that? Including the backend, I would love to see this with Nest.js for a backend.
Hi there nice vid, although I must say the effect makes me feel nauseous. I like the zoom on the code, but it’s too many transitions
The caching benefits you mentioned, are they Vercel specific things Or any VPS NodeJS env can have as well?
Works when self-hosting, too!
but the caching works because there is no authentication right? reading headers would remove the default cache
If you wanted to read headers, the page would render dynamically, but you can still have the *data* be cached. So page transitions can still feel fast. We're also working on optimizing to make as much of the page static as possible in Next.js 14 nextjs.org/14.
If you wanted to read headers, the page would render dynamically, but you can still have the *data* be cached. So page transitions can still feel fast. We're also working on optimizing to make as much of the page static as possible in Next.js 14 nextjs.org/14.
Great video, what about windows users for the command + enter ? would it just be ctrl + enter ?
Yeah that sounds correct
why use onSubmit with the deleteEmail action?
What is the cache mechanism used here (for data fetching)? I see in NextJS there are different cache mechanisms (Request Memoization, Data Cache, Full Route Cache, Router Cache) but since 'fetch' wasn't used in the code, I wasn't sure how the code cache the data.
Vercel Postgres is using `fetch`. So it would work the same if you were using `fetch` directly. If you're not using `fetch`, you could use this nextjs.org/docs/app/api-reference/functions/unstable_cache
@@leerob got it. thanks for the info
who edits your video, too smooth is this ai, or high paying editor
What's the difference between using router.refresh and revalidatePath? could you explain the use cases please :)
You shouldn't need to use router.refresh, in general revalidateTag is going to be the best option for the most granular caching, and then revalidatePath would be the next choice.
When is v0 out of private access?
Thnx
Thanks for the share. But could you please keep your screen stable while moving the cursor, my eyes are really hurt after finish watching your video!
Pl. update the github code
Please add socket support to next js
What? How are you using await in a component?!
nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating
couldve just used php
this tbh
hi Lee don’t mean to be critical and hope you this feedback ina positive sense -if you could build simple app which shows how to login using email and password ., with email verification and two factor auth - it would be much more useful - and no i don’t want to use an external auth service - nor use next auth - which frankly looks like a hobby project - next js badly needs the kind of dev ex that laravel provides
next-auth isn't a hobby project :) Our official tutorial teaches user/pass login this way! nextjs.org/learn
hi leo 🖐️
Can you please when you demo things stop zooming in and out all the time. My head hurts watching this zoom action :S.
Thanks :D
i thought it was email system 💀
Next js router is too fast ..
Can’t people reply? 😂
Test 123 abc
video is hard to watch
Instead of running postgres on frontend, why are not there simple things since the dawn of internet like sitemaps indexes and i18n path routing? Sloppy versions, half baked features and useless things.
Sitemap: nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap
i18n: nextjs.org/docs/app/building-your-application/routing/internationalization
Can wait for v0