Hi everyone ![]()
I’d like to share a project I’ve been working on: a performance showcase for Next.js. It demonstrates a few optimization techniques you might find useful — or even inspiring — for your own applications.
Features Demonstrated
Code Splitting
- Dynamic imports for heavy components
- Lazy loading with React.lazy and Suspense
- Bundle optimization to reduce initial page load
Streaming
- Basic streaming with skeleton loading states
- Dashboard streaming with staggered component loading
- Nested streaming with progressive content rendering
- Multiple loading patterns (skeleton, spinner, placeholder)
Coming Soon
- And more performance techniques…
I also wrote two Medium articles that go into more detail about the showcases in this GitHub repository:
- A Complete Next.js Streaming Guide: loading.tsx, Suspense, and Performance: https://javascript.plainenglish.io/a-complete-next-js-streaming-guide-loading-tsx-suspense-and-performance-c0979bc47896
- Optimize Next.js Performance with Smart Code Splitting: What to Load, When, and Why: https://javascript.plainenglish.io/optimize-next-js-performance-with-smart-code-splitting-what-to-load-when-and-why-485dac08cd24
Hope you enjoy it — feel free to share any thoughts or feedback!