Next.js 16: Mastering Cache Components & Turbopack

The release of Next.js 16 has fundamentally changed how we handle caching and build performance. Migrating GoBusly to v16 wasn't just an upgrade—it was a paradigm shift.

"use cache" Directive

The most impactful change is the move to explicit caching. Gone are the confusing days of implicit revalidation. With Cache Components, we can now granularly cache specific parts of the UI or data fetches using the "use cache" directive.

This allowed us to cache our expensive "Route Search" components while keeping the pricing availability strictly real-time, all within the same Server Component tree.

Goodbye Middleware.ts, Hello Proxy.ts

Next.js 16 introduces proxy.ts to replace the legacy middleware approach. This provides a transparent, Node.js-native way to handle request interception. We use it to inject tenant IDs into headers before the request ever hits our Server Actions, simplifying our multi-tenant architecture significantly.

Turbopack & React Compiler

Turbopack is finally the stable default. Our local dev server startup time dropped from 8s to 400ms. Combined with the React Compiler (automating useMemo and useCallback), our codebase is cleaner and performant by default without manual optimization overhead.