-
What is new in Next.js 15
-
How to upgrade your projects safely
- Common pitfalls and things to watch out for
What’s New in Next.js 15
1. Turbopack for Production Builds (Alpha)
Benefits:
-
Speed improvements: Builds can be 80% faster or more on high-core systems.
-
Incremental builds: Only changed files are rebuilt, making CI/CD pipelines faster.
How to use:
next build --turbopack
Best Practice:
-
Test Turbopack in staging before using it in production.
-
Keep Webpack as a fallback for apps where reliability is critical.
2. Improved Navigation Hooks
-
onNavigate on <Link> allows you to control or block navigation.
-
useLinkStatus provides a pending state so you can show loading indicators only where needed.
Example:
'use client'
import { useLinkStatus } from 'next/navigation'
export default function NavStatus() {
const { pending } = useLinkStatus()
return pending ? <p>Loading...</p> : null
}
Best Practice:
- Use useLinkStatus to show small, inline loaders rather than full-page loaders for better user experience.
3. Client Instrumentation Hook
-
Analytics
-
Monitoring
- Performance tracking
Example:
// instrumentation-client.ts
initAnalytics()
performance.mark("app-init")Best Practice:
- Keep this code lightweight. Heavy logic can slow down your app startup.
4. TypeScript Plugin Improvements
-
Better IntelliSense for props and types
-
Improved autocompletion
- Better error checking in large projects
Best Practice:
- Always use the latest TypeScript version for the best support:
npm install typescript@latest
5. Rspack Support (Experimental)
Best Practice:
- Only use Rspack if Turbopack breaks your current Webpack setup.
Best Practices for Upgrading to Next.js 15
1. Upgrade Dependencies in Steps
- First, upgrade React and React DOM:
npm install react@latest react-dom@latest
- Then upgrade Next.js:
npm install next@latest- Run tests after each step to ensure nothing breaks.
2. Test Turbopack in Staging
- Use:
next build --turbopack
-
Compare build times with Webpack.
-
Make sure everything works before deploying to production.
3. Use useLinkStatus for Loading States
-
Avoid full-page loaders that block the whole page.
-
Inline spinners improve the user experience without interrupting navigation.
4. Move Configs to New Turbopack Key
-
The old experimental.turbo key is deprecated.
-
Example next.config.ts:
// next.config.ts
export default {
turbopack: {
rules: {
'*.svg': { loaders: ['@svgr/webpack'], as: '*.js' }
}
}
}5. Add Monitoring Early with Instrumentation
-
Capture errors and performance metrics from the start of the app.
-
Helps detect bottlenecks before production.
Pitfalls and Things to Watch Out For
While Next.js 15 is powerful, there are some risks:
1. Turbopack is Alpha
- Some loaders or plugins may not work correctly.
2. Metadata Differences
- Changes in generateMetadata can affect SEO. Test carefully.
3. Rspack Incompatibilities
- Not all Webpack APIs work with Rspack yet.
4. Breaking Changes Risk
- Always read Next.js release notes before upgrading.
Conclusion
Next.js 15 brings many exciting improvements:
-
Faster builds with Turbopack
-
Smoother navigation with new hooks
- Early instrumentation for monitoring
- Better TypeScript support
Since some features are experimental, follow these recommendations:
-
Try new features in staging first
-
Use stable APIs in production
- Monitor for regressions after migration
According to Vercel Analytics 2025:
-
Teams using Turbopack in staging saw 35–50% faster incremental builds
-
Early instrumentation helped catch ~20% more performance issues before production
By following these practices, your team can build apps faster, improve developer experience, and deliver high-quality projects without headaches.
At Sparkle Web, we help businesses:
-
Upgrade to Next.js 15
-
Optimize performance
- Monitor apps for smooth operation
We ensure your web apps are fast, scalable, and SEO-friendly. Explore how we can help your team leverage Next.js 15 effectively.
Vaishali Gaudani
Skilled React.js Developer with 3+ years of experience in creating dynamic, scalable, and user-friendly web applications. Dedicated to delivering high-quality solutions through innovative thinking and technical expertise.
Reply