DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

shadowtime2000
shadowtime2000

Posted on

Next 10 Released

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" />
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

You can just import the component.

Top comments (1)

Collapse
 
rajeshroyal profile image
Rajesh Royal

I'm loving its new Image component

Let's Get Wacky


Use any Linode offering to create something unique or silly in the DEV x Linode Hackathon 2022 and win the Wacky Wildcard category

β†’ Join the Hackathon <-