RFC: Migration from Next.js 14 to Next.js 16

[kelvink96]

Summary

We're considering upgrading our dashboard from Next.js 14.2.26 to Next.js 16 (stable). This is a significant upgrade that brings major performance improvements but requires careful planning due to breaking changes.

PS: The old version with next 14 can be found here - next 14 code

Why Migrate?

Performance Gains

• Turbopack - 2-5x faster builds, 10x faster Fast Refresh
• React Compiler - Automatic memoization, fewer re-renders
• Layout Deduplication - Shared layouts downloaded once instead of per-link

New Capabilities

• React 19.2 features (View Transitions, useEffectEvent, Activity)
• Stable cacheLife and cacheTag APIs
• Next.js DevTools MCP for AI-assisted debugging

Breaking Changes

High Impact

Change	Description
React 18 → 19	Major version bump with new APIs and stricter requirements
Middleware → Proxy	middleware.ts must be converted to proxy.ts (Node.js only, no Edge)

Dependencies to Audit

• @mantine/next - Next.js 16 compatibility
• next-auth - React 19 / Next.js 16 support
• @storybook/nextjs - React 19 compatibility
• mantine-datatable, react-apexcharts, @tiptap/* - React 19 compatibility

Proposed Approach

1. Preparation - Audit dependencies, document middleware functionality
2. Core Migration - Update React 19, Next.js 16, convert middleware to proxy
3. Dependencies - Update/replace incompatible libraries
4. Testing - Verify auth flows, all pages, Storybook, performance

Questions for the Community

1. Timeline - When should we target this? Any urgency?
2. Testing - Should we establish a test suite before migration?
3. Incremental vs Direct - Go through Next.js 15 first, or jump to 16?
4. Dependencies - Any alternative libraries to suggest for incompatible packages?

Resources

• Next.js 16 Release Blog
• Upgrade Guide
• React 19 Migration Guide
• Full Migration Document

---

Please share your thoughts, concerns, and suggestions below!