Summary

Next.js 10.1 focuses on developer experience and performance: Fast Refresh is ~3x faster (≈200ms), install size and dependency count are significantly reduced, and next/image now uses WebAssembly with Apple Silicon (M1) support plus new layouts and custom loader capability. The release also adds a provider-agnostic Commerce starter with Shopify support, better error page customization, TypeScript and PostCSS improvements, preview detection, and consistent router scrolling behavior.

Key Points

• Fast Refresh: edits re-render faster (~200ms improvement) with no code changes. Opt-in to Webpack 5 with module.exports = { future: { webpack5: true } } for further improvements.
• Install & deps: average install time reduced (~15s → ~5s), install size down ~58% (96.5MB → 39.9MB), dependencies cut ~56%.
• next/image: image optimization now powered by WebAssembly (smaller install, M1 support). New layouts: fill, fixed, responsive, intrinsic, and objectFit support. Add custom loaders via the loader prop to integrate any CDN/provider.
• Commerce: Next.js Commerce UI is provider-agnostic; swapping providers (e.g., Shopify) is a single-line config change and includes feature flags for toggling capabilities.
• Error pages: add a static pages/500.js to customize server error pages (same pattern as pages/404.js).
• PostCSS & caching: enable strict PostCSS loading when using Webpack 5 with future.strictPostcssConfiguration = true to improve caching.
• TypeScript: tsconfig.json supports extends (e.g., {"extends": "./tsconfig.base.json"}) for large projects.
• Preview mode: detect preview rendering via const { isPreview } = useRouter() to conditionally render editor-only UI.
• Router behavior: router.push and router.replace now auto-scroll to top to match next/link; opt out with the scroll option.
• Docs: added migration guides (Gatsby, CRA, React Router), Docker deployment, incremental adoption, and auth resources.

Practical notes

• To opt-in to Webpack 5 and strict PostCSS: set future.webpack5 and future.strictPostcssConfiguration in next.config.js.
• To customize image loading, implement a loader function and pass it to the Image component.
• To opt-out of automatic scroll behavior, call router methods with { scroll: false }.

For engineers: upgrade to 10.1 to get faster local feedback, smaller CI installs, improved image handling (WASM/M1), and easier commerce integrations with minimal code changes.