Next.js 10, the latest version of Vercel’s React-based web framework, adds features including user analytics, automatic image optimization, e-commerce capabilities, and internationalized routing.
Four-year-old Next.js offers capabilities such as hybrid static and server rendering, smart bundling, TypeScript support, and route pre-fetching. Next.js 10, unveiled October 27, features the following new capabilities:
- Automatic image optimization, providing a replacement for slow legacy HTML and browser image stacks. Developers can automatically replace legacy HTML tags with a React-based image component that improves page responsiveness through progressive loading.
- Internationalized routing and automatic language detection, giving teams paths for translation and eliminating DIY approaches by supporting language negotiation and memorization out-of-the-box while determining what content to serve according to user language preferences.
- Next.js Analytics, providing continuous user insights to help developers understand where to focus to improve site performance. Continuous feedback helps developers understand how a site or application performs for users and improves Web Vitals scores.
- Next.js Commerce, an all-in-one starter kit giving developers the performance, personalization, and an immersive modern user experience that the world’s largest sites deliver, Vercel said. The open source platform automates implementation of common e-commerce site components, with a data layer and reusable data primitives provided by Vercel partner BigCommerce.
- CSS can be imported from inside of third-party React components.
Next.js supports newly introduced React 17, which has no breaking changes for Next.js. Some maintenance changes were required. The new JSX transform is automatically enabled with React 17.