Last checked and updated on April 18, 2026What Is New in Next.js 10 (summary table)
Next.js 10 delivers a suite of powerful new features focused on performance, developer experience, and production readiness. The major updates include a built-in Image component, internationalized routing, and enhanced analytics.
| Category | Key Changes |
|---|---|
| New Features | Image Component, Automatic Image Optimization, Internationalized Routing (i18n), Next.js Analytics, React 17 support, Commerce-aware updates. |
| Improvements | Faster Fast Refresh (Hot Reload), built-in Web Vitals reporting, enhanced error handling, and general performance optimizations. |
| Bug Fixes | Numerous fixes for issues in core routing, data fetching, CSS, and the development server. |
| Deprecated | The next/images import is deprecated in favor of next/image. Some configuration options for target are deprecated. |
How does the new Image component improve my site?
The new next/image component automatically optimizes images for performance. It handles lazy loading, resizing, and serving modern formats like WebP. This means faster page loads and a better Core Web Vitals score without manual image processing.
In practice, you replace standard <img> tags with <Image src="..." width={...} height={...} />. The component enforces good practices by requiring dimensions, which prevents layout shift. The optimization happens on-demand, either by the Next.js server or a remote image service.
This matters because image optimization is often a tedious, build-time burden. Offloading it to the framework simplifies development and ensures consistent output. The built-in lazy loading also defers off-screen images until they're needed.
What does Internationalized Routing (i18n) provide out of the box?
Next.js 10 adds built-in support for internationalized routing, eliminating the need for custom i18n libraries for basic routing. You configure supported locales and a default locale in next.config.js, and the framework handles locale detection and URL routing.
The system supports two routing strategies: sub-path routing (/en/about) and domain routing (example.fr/about). It automatically sets the Accept-Language header for server-side rendering and provides a locale-aware navigation API. This is a foundational layer; you still need a library for translation content.
For developers, this means less boilerplate code for locale switching and SEO-friendly URLs from day one. The routing is integrated with Next.js's pre-rendering, so statically generated pages work per locale.
How do Next.js Analytics and Web Vitals reporting work?
Next.js Analytics is a new feature that collects and reports on real user performance data, specifically Core Web Vitals. It gives you insight into how your application performs for actual visitors across different geographies and connection speeds.
The analytics are opt-in. You enable them by adding next/analytics to your _app.js file. The data is sent to and visualized on Vercel's platform, providing a dashboard of metrics like Largest Contentful Paint (LCP) and First Input Delay (FID). This shifts performance monitoring from synthetic tests to real-world experience.
This built-in approach is valuable because it ties framework optimizations directly to measured outcomes. You can see the impact of using the new Image component or dynamic imports on your actual user metrics.
What are the practical implications of React 17 support?
Support for React 17 is mostly about preparation for future React features. This version doesn't introduce new developer-facing APIs but enables gradual upgrades and new JSX transform. Next.js 10 is compatible with it, allowing teams to upgrade their React dependency without issues.
The new JSX transform is automatically enabled when using React 17. This means you can use JSX without importing React in every file. In practice, your build outputs might be slightly smaller, and the development experience feels a bit cleaner.
This update matters for teams planning their upgrade path. It ensures Next.js is ready for concurrent features coming in React 18, making the eventual transition smoother. There's no immediate need to rewrite code, but it's a stable foundation.
FAQ
Is the new Image component a replacement for third-party image optimization services?
Not necessarily. The component provides excellent automatic optimization for images stored locally or on external servers that allow optimization. For advanced use cases or existing CDN setups, you can still use a custom loader. It's a powerful built-in solution that reduces dependency on external services for basic needs.
Do I have to use Vercel to get Next.js Analytics?
Yes, the integrated Analytics dashboard is part of the Vercel platform. The data collection script (next/analytics) sends metrics to Vercel. If you're self-hosting, you would need to implement an alternative solution for capturing and visualizing Web Vitals data.
Can I use the i18n routing for static (SSG) sites?
Absolutely. The internationalized routing works seamlessly with both Server-Side Rendering (SSR) and Static Site Generation (SSG). When using getStaticProps and getStaticPaths, you can generate static pages for each configured locale, resulting in separate HTML files for each language.
What happens to my existing next/images import?
The next/images import is now deprecated. You should update your imports to use next/image instead. The API remains largely the same, but this rename aligns with the component's naming convention. Your build will show a warning to guide you through the change.
How significant are the Fast Refresh improvements?
The improvements make Hot Module Replacement more reliable, especially for React components. It better preserves component state during edits and reduces full-page reloads. For daily development, this means less friction and faster iteration when tweaking styles or logic.