Big thanks to Alice De Mauro from Vercel for hosting an insightful workshop on Next.js 15! 🙌✨ We dove into the power of the new App Router 🚀, explored how Server Components can supercharge performance 🖥️⚡, and saw the magic of Error Boundaries 🛑 and the Not Found primitive 🚧. From grouping routes with () for cleaner paths 📂➡️, to combining Client Components for dynamic interactivity 🖱️ and Server Components for secure, performant rendering 🎯, it was packed with actionable tips to build scalable, lightning-fast apps. 🌐💡 I’m looking forward to leveraging these insights to architect even more scalable and efficient applications! 💻🔥
What’s your favourite new feature in Next.js 15? Let’s discuss! 👇😊
💡Introduction
Next.js introduces powerful features to improve the way we structure and render our applications.
From dynamic routing and Server vs Client components to advanced optimisations like route grouping and protected pages.
It is designed to make it easier to build fast, flexible, and scalable enterprise grade applications.
🔍 Note: This is just a small subset of the features and benefits that I’ll cover here and purely reflects the experience from recent Next JS app router workshop.
🏗️ Layout vs Template
In Next.js, Layouts and Templates are key to organising your app’s UI.
Layout
- Persistent UI across routes (e.g., Header, Sidebar).
- Does not re-render during navigation.
- Perfect for shared, consistent structures.
Template
- Dynamic UI resets on route change.
- Re-renders during navigation.
- Ideal for route-specific behaviour.
🏗️ Layout - code example
🤷♂️ When should you use each?
🛑 Error boundaries
What is an Error boundary?
- Handles runtime errors within a route.
- Covers children of the error’s segment.
- Errors bubble up to the nearest parent error boundary.
- Allows graceful recovery with reset() keep unaffected parts interactive.
Key features:
- Layouts above errors stay functional.
- Next.js cleans up errors to avoid exposing sensitive data.
🎯 Key insight:
Next.js helps isolate issues, so there’s no need to block the whole page for errors or missing content.
Code example:
🎯 Key benefits:
Keep your code organised without changing route paths!
🗂️ Routing - dynamic
Single Dynamic Route
Use [slug] for a single dynamic segment.
Code example:
Full slides can be found on:
SpeakerDeck:
🌟 Exploring Next.js 15: Key Takeaways from an Amazing Workshop! 🌟
Big thanks to Alice De Mauro from Vercel for hosting an insightful workshop on Next…
speakerdeck.com
SOCIAL SHARE CARD GENERATOR