What’s New in Next.js V10?

What’s New in Next.js V10?

What’s New in Next.js V10? We introduced over 20 new features in Next.js 10 that improve performance and developer experience. At the same time, the JavaScript size of the Next.js core has been reduced by 16%.

Highlighting the good, great, and awesome updates

Over 20 updates were packed into the new Next.js version 10 update, and in this article, I will go over the big ones. If you are looking for the official word, head over to Next.js’s blog post.

“We introduced over 20 new features that improve performance and developer experience. At the same time, the JavaScript size of the Next.js core has been reduced by 16%.” — Next.js blog

React 17

We can now safely update to React 17 with the newest update. When you upgrade to Next.js 10 or start a new project, you will get the fantastic new JSX transform by default.

New Image Component

I think most people will think this is the MVP of this release.

The #1 reason I would have picked Gatsby over Next.js is the awesome gatsby-image component that made it still optimal for generating static sites with lots of images.

The Next.js team worked with the Google Chrome team to offer super image optimisations by default. It’s basically a drop-in replacement for a normal img tag.

Before

export default function() {

  return <img src="/avatar.jpg" width="400" height="400" alt="Avatar">
}

After

import Image from 'next/image'

export default function() {
return <Image src="/avatar.jpg" width="400" height="400" alt="Avatar">
}

I won’t go into too much detail here, but basically, we get lazy loading by default when we use this new Img tag and then we can mark images that are in the initial viewport to preload them.

I am excited to replace all my images with this tag now.

Fast Refresh for MDX

This was a small detail that didn’t frustrate me too much, but Next.js 10 offers a nice improvement. @next/mdx will now leverage Fast Refresh, making sure the browser does not have to reload the page while you are editing and developing.

The @next/mdx documentation guides you through how to set up MDX with Next.js.

CSS From node_modules

More optimisations! Instead of having to load all your CSS libraries straight into _app.js, now we can import them in the required components. This might seem like a small thing, but now we can lazy-load CSS as required. Depending on the library you are using (and where you are using it), this could mean some big improvements to your initial load speed.

Easy Internationalization

With domain routing, subpath routing, and language detection, setting up internationalization has never been easier.

If you have the locales set up, you will automatically be routed based on your Accept-Language header (which is easily disabled in case you don’t want this).

You can then grab the locals from next/router and you will now see your locales in the router object:

code

Example of router object when we navigate to our Spanish domain.

Automatic Resolving of href

One thing that I always felt was frustrating when I was using Link tags was remembering what to put in as versus href.

Now you can stop using as and it will automatically resolve under the hood for you:

// before v10

<Link href="/blog/[slug]" as="/blog/posts">
// after v10
<Link href="/blog/[slug]">

javascript web-development react next developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Next.js vs. React: The Developer Experience

The developer experience for Next.js vs. React is similar in some ways and drastically different in others. In the world of React, Next.js has become a popular framework for “hitting the ground running.” Next.js builds on top of React to provide a streamlined development experience. There is definitely a different experience when building a project with Next.js vs. React.

Tendencias Javascript y Web 2020. React, Next.js, Deno

Tendencias Javascript y Web 2020. React, Next.js, Deno. En este video te voy a mencionar algunas herramientas y frameworks que fueron, seguirán siendo o van a ser tendencia en este 2020. Entre ellas están React, Next.js, Deno, los Headless CMS como Strapi, entre otros.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.