Next.js 10 Has Been Released

Around 2 hours ago on the Next.js blog Next.js 10 was announced.

Features

• A next/image component for image optimization
• Internationalized routing
• Next.js Analytics
• Next.js Commerce (A starter kit for ecommerce sites)
• React 17 Support
• Importing CSS From Third Party Components
• Automatic href resolution (next/link)
• @next/codemod CLI improvements
• Blocking Fallback for getStaticPaths

Image Optimization

import Image from "next/image";

<Image src="myImage.png" height="400" width="300" />
// instead of <img src="myImage.png" height="400" width="300" />

This lazy loads the image and makes width and height work with responsive layouts.

Next.js Analytics

Go to nextjs.org/analytics to learn how to enable it.

React 17 Support

The new JSX compiler is automatically used, you just have to run this command:

$ npm install next@latest react@latest react-dom@latest

Importing CSS From Third Party Components

You no longer have to import the CSS for third party components like this:

import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

You can just import the component.