TOP Next.js 10 Features

Next.js is the React JS framework. It gives you all features required by the developer for creating production-ready apps. The best part with Next.js is that we don’t need to set any config. There are some features for production-ready apps like Typescript support, server rendering, hybrid support, smart bundling, Pre-fetching of routes, zero-config, Built-in CSS support, Image Optimization and Internationalization, etc.

Here are all Big Announcements of Next.js 10 :

1. Automatic Image Optimization:

The most demanding feature of Next.js is Automatic Image Optimization. In this release of Next.js, they worked on DX (Developer experience) as well as UX (User Experience). They also focused on reducing the load of Javascript on the browser. For achieving the automatic image optimization, Next.js introduced Image Component.

Next.js’s Image Component is the replacement of HTML img tag in application which built on Next.js. Google Chrome Team built this React Component for improving the web performance.

Using of Image Component :

By importing the next/image in the application, we can use image component.

import Image from 'next/image'
function ImageContainer() {
  return (
    <>
      <Image
        src="/demo.png"
        alt="Image"
        width={200}
        height={200}
      />
    </>
  )
}
export default ImageContainer

Image Component has the following props:

src– URL of the image
width– Width of image
height– Height of image
sizes– Proportion of image on the device
quality - Quality of optimized image. Range from 1 to 100. The default value is 75.
loading– Loading behavior of the image. Values are lazy and eager. The default value is lazy.
priority– When true then the image has priority and preloaded.
unoptimized– When true then the image has not optimized and served as instead of resizing.
unsized– When true then the image doesn’t include height and width props.

2. Internationalized Routing

According to market research, if your blog or application will able to translate into native languages then a great chance to have more traffic and stay on your site for more interval of time. According to Next.js, consumers will buy products from e-commerce if a website or app translated into native languages. That’s why Internationalization in the web app is the critical thing if you want all over the world will use your web app.

Some of the React framework having internationalization, but what’s the new thing in Next.js. The answer is Internationalization with Routing. In the other React JS frameworks, we have internationalization but we have to implement routing manually that supports internationalization. Next.js 10 supports language detection with internationalization routing.

Using of Internationalization Routing :

// next.config.js
module.exports = {
  i18n: {
    locales: ['en-US', 'fr', 'nl-NL'],
    defaultLocale: 'en-US',
    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en-US',
      },
      {
        domain: 'example.nl',
        defaultLocale: 'nl-NL',
      },
      {
        domain: 'example.fr',
        defaultLocale: 'fr',
      },
    ],
  },
}

We can achieve automatic internationalization routing detection by providinglocales list, defaultLocale and domain specific locale list.

3. Next.js Analytics:

By introducing Analytics, Next.js not only analysis your audience. It also analysis of web performance of your app not only on the developer machine setup as well as audience devices also. If your website will take more than 3 seconds to load then you will lose your 50% audience and if you have an e-commerce website you will lose 1/10th customer on each second. That’s why analysis of your app in two ways: first about your audience and second is about your project performance. This thing implemented by the company and launch app for Analytics.

If you want more info regarding Analytics, follow this link.

4. Next.js Commerce:

The next big announcement is related to e-commerce. Now a days, every fifth startup is related to online store or e-commerce. Next.js is launched open source git repo of e-commerce in collaboration with Big Commerce. Now developer can clone the repo, customize it, and deploy the starter kit of Next.js Commerce. Developer can customize the frontend according to their ease and on backend side all products and inventories will handle by Big Commerce.

5. React JS 17 Support:

There is no major changes in React JS that’s why there is no breaking changes in Next.js Application. if you want to merge your app into React JS 17 you will only upgrade react.js and next.js versions.

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

6. Fast Refresh for MDX:

In the word of mdx.js – MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. In the earlier release of Next.js, when we create an application with MDX and edit it any web pages, it will take time to refresh it. But in the current version, they resolve the issue by using Fast Refresh (making sure the browser doesn’t reload the pages on edit).

7. Importing CSS from third party React Component:

This is another big announcement for React developer who is using Next.js for building applications. Now, we can import the third party CSS directly on the react component. There is no need to import the CSS in _app.js.

import { Dialog } from '@reach/dialog'
import '@reach/dialog/styles.css'

Conclusion:

Now this time, Next.js sets the new standards for frontend development and sets the new way of setting the online store and e-commerce. This front-end technology is coming from Vercel and creator to JAM Stack. I thought these standards will change the modern frontend web apps and will expect in the future also.

If you have any doubts please mail me : developer@thedevfamily.com