Summary

Next.js 10 introduces key primitives to improve both developer and user experience: a built-in next/image component with automatic image optimization, first-class internationalized routing, and Next.js Speed Insights (real-user performance). The release also adds React 17 support, improved Fast Refresh, and practical DX improvements (third-party CSS imports, automatic href resolving, codemods, and commerce starter kit).

Key Points

• Image optimization
  • Use the next/image component as a drop-in, modern replacement for <img>: it enforces dimensions, is responsive by aspect ratio, lazy-loads offscreen images, and supports preloading critical images for LCP gains.
  • Automatic Image Optimization resizes and serves modern formats (e.g., WebP) on-demand (runtime resizing), works with external image sources, and does not increase build time.
• Internationalized routing (i18n)
  • Built-in routing and language detection via Accept-Language. Supports subpath routing (e.g., /nl/blog) and domain routing (map locales to domains).
  • Configure locales in next.config.js, e.g. i18n: { locales: ['en','nl'], defaultLocale: 'en' }.
• Real-user performance (Next.js Speed Insights)
  • Continuous, device-real measurements (RUM) to detect regressions and focus optimization efforts on actual user conditions.

Other notable changes (practical notes)

• React 17 fully supported; upgrade path should be seamless.
• Fast Refresh extended to getStaticProps/getServerSideProps and MDX for faster feedback loops.
• Import CSS shipped with third-party npm components is now supported (easier component adoption).
• next/link no longer requires the as prop in most cases (automatic href resolving).
• getStaticPaths supports blocking fallback to wait for on-demand pre-rendering of new pages.
• New @next/codemod CLI to automate Next.js migrations; Next.js Commerce starter is available for e-commerce projects.

Practical takeaways

• Replace plain <img> with next/image for immediate LCP and bandwidth improvements; no extra build-time tooling required.
• Add i18n config to next.config.js to enable locale routing and language detection.
• Use Speed Insights to prioritize fixes impacting your real users rather than synthetic metrics.