Fullstack React App with Next.js 14 and their brand new free course! ⚛🔴 LIVE Coding & Chill

Описание: Next.js 14 just released, right after the Next.js Conf keynote yesterday: https://nextjs.org/blog/next-14

With it a new & improved official `/learn` course!

Let’s go through it together, and see how it overlaps and where it differs from how I do or teach fullstack apps 🙂

My own personal site is new and improved AND Next.js 14 already, btw 😉: https://magrippis.com/

No API changes, but Next.js 14 is officially using React Server Actions, which were under the `experimental` flag in Next.js 13… but I was using anyway because they remind me of how SvelteKit works and that’s great 😄

Also, it seems we’re going full Vercel for this one: deploying with Vercel, spinning up and managing our Postgres Database with Vercel, and I’d throw in analytics with Vercel as a bonus tbh!
🚀 Check out my Next.js 14 blogfolio! https://magrippis.com/
💻 See the code, open-source and free: https://github.com/jmagrippis/magrippis

— COMMUNITY —
Our DISCORD SERVER 👾:   / discord  
— 🥳🥳🥳 —

— Agenda —
✅ What are we doing today? Next.js 14? React Server Actions?
✅ Next.js/learn overview and my thoughts on fullstack classes: https://nextjs.org/learn
✅ Getting started (does it work with turbopack?!)
✅ CSS Styling (with Tailwind combo!)
✅ Optimising Fonts and Images
✅ Creating Layouts and Pages
✅ Navigating Between Pages
✅ Setting up your Database
✅ Fetching Data (That’s the bread and butter of web dev!)
✅ Static and Dynamic Rendering
✅ Streaming (with Placeholder UI / App Skeletons!)
✅ Partial Prerendering (brand new with Next.js 14!)
✅ Adding Search and Pagination
[ ] Mutating Data (React Server Actions!)
[ ] Handling Errors
[ ] Improving Accessibility
[ ] Adding Authentication
[ ] Adding Metadata
— BONUS —
[ ] Analytics! https://vercel.com/analytics
[ ] Playwright Navigation Smoke Test! https://playwright.dev/
— HAVE FUN —

No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄

— Highlighted software —
Next.js: https://nextjs.org/
Vercel: https://vercel.com/
NextAuth: https://next-auth.js.org/

My own website: https://magrippis.com/

Search for `@jmagrippis` to find me on socials like Instagram & Twitter! And remember our DISCORD SERVER 😉:   / discord  

Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌

—
TIMESTAMPS
—

0:00 - What are we doing today? Next.js 14? React Server Actions?
9:25 - Next.js/learn overview and my thoughts on fullstack classes: https://nextjs.org/learn
10:31 - 1. Getting started (does it work with turbopack?!)
24:30 - Chapter 1 takeaways
25:37 - 2. CSS Styling (with Tailwind combo!)
47:40 - Chapter 2 takeaways
48:37 - 3. Optimising Fonts and Images
1:30:00 - Chapter 3 takeaways
1:30:45 - 4. Creating Layouts and Pages
1:40:35 - Chapter 4 completed + what to know to be a golden engineer
1:41:15 - 5. Navigating Between Pages
1:52:43 - 6. Setting up your Database
2:14:45 - Debugging the erroring `seed`script / refactoring to use Bun!
2:26:20 - Bun saves the day and Chapter 6 continues
2:28:02 - 7. Fetching Data (That’s the bread and butter of web dev!)
2:59:45 - Chapter end + “what happens when one request is slower than all the others?”
3:01:07 - 8. Static and Dynamic Rendering
3:09:50 - 9. Streaming (with Placeholder UI / App Skeletons!)
3:15:25 - PUPPY BREAK (consoling my puppy Summer off-screen)
3:16:27 - Back to the Skeleton UIs!
3:34:23 - 10. Partial Prerendering (brand new in the future of Next.js 14… but only theoretical overview in this chapter!)
3:34:40 - Chapter 10 summary (has nothing to do with Partial Prerendering 😛)
3:39:26 - 11. Adding Search and Pagination
3:59:09 - Search implemented, BREAK TIME
4:01:35 - Back to implement Pagination!
4:09:50 - 12. Mutating Actions (with Server Actions)… coming up in the next stream!
4:10:53 - Thoughts so far, next stream agenda + LIKE 💜 SUBSCRIBE to see you there!