Let's build an email client with Next.js and Postgres ✉️ ✅ Navigate between routes in a column layout while maintaining scroll position (layouts support) ✅ Submit forms without JavaScript enabled (progressive enhancement) ✅ Navigate between routes extremely fast (prefetching and caching) ✅ Retain your UI position on reload (URL state)

Building this input with React Aria Components was 😍 h/t @devongovett

Keeping the scroll position was as easy as moving the component to the `layout`. This was much more difficult in the Pages Router, and now built into the App Router.

Here's the code if you wanna dig around. Includes the Postgres schema / seed data information.

Very cool! Curious how y'all are thinking about invalidating the router cache for more dynamic use cases like email apps, social, productivity tools, etc… Specifically my understanding: 1. Anytime a user navigates to a new page, the full route is cached in client for 30s (pretty long time for dynamic apps like email clients) 2. There doesn't seem to be a way to invalidate this cache from an action not invoked by the current user (for example a server event) 3. There is no way to opt out of the router cache all together or change the cache duration. Put another way (example): If a user clicks into a full screen email experience, and while they're viewing this email, they receive another email… When the user navigates back to their inbox (within 30s), it will be stale (wont show the new email bc of the router cache). In this case, should we be calling router.refresh() on every nav event? Seems mb heavy after the change to drop user's entire router cache on every refresh call. Maybe there's a better way to be thinking about it all together? Would love any guidance or examples! would love to figure out some sort of swr like experience with rsc here 😅

@nextjs Nice! Cool trick with command + enter submit. And easy to add as a generic option for textarea UI component. Especially with shadcn.

@nextjs Nice video but the zoom efect and mouse is very distracting on the video I think.

@nextjs @screenstudio I presume

@nextjs Love the cmd + enter keydown use case and the feature co location in the app dir

@nextjs Did you have a YouTube link?

@nextjs Here you go!