Next.js 3.0 Release: What's New?

On Tuesday, October 25, 2016, a small JavaScript framework, Next.js was released to the public. It's a minimal framework for building server-rendered universal JavaScript web apps. Within a few months of its existence, it gathered a lot of attention from the JavaScript community. The React community was set ablaze with joy for finally having a tool that can help build server-side rendering apps without a hassle and in-depth technical know-how. In fact, we covered how to build a universal JavaScript web appwith it. In this article, I'll highlight the notable additions to Next.js's new release, Next.js 3.0.

Primer: What Is a Universal JavaScript Application?

First, I'll provide a little context for the individuals that find Universal JavaScript to be a new term.

The term Universal simply means the ability to run the same code on the server, browsers, mobile devices, and any other platform. Universal JavaScript is a term people are leaning towards these days. A lot of developers also call it Isomorphic JavaScript. In short, there is a debate on the React repo about this term. Michael Jackson, a popular ReactJS developer, wrote a blog post on Universal JavaScript. It's indeed true that naming things is one of the most difficult aspects of Computer Science.

What's New in Next.js 3.0?

1. Dynamic Import Support

Next.js now ships with Dynamic Import. The import function in all its glory allows a codebase to be split into a set of chunks that can be dynamically loaded later.

In Next.js, you can now use dynamic import as seen below:

const lodash = import('lodash'); 

...

button.addEventListener('click', event => {

    import('./dialogBox.js')

    .then(dialogBox => {

        dialogBox.open();

    })

    .catch(error => {

        /* Error handling */

    })

});

This helps to load functionality on demand. Next.js supports server-side rendering for dynamic imports which makes it incredibly awesome for you to avoid displaying the client's blank pages, flickering, or loading spinners.

2. Static Export Support

Next.js now allows you to generate a truly static site by exporting your project to an outdirectory with .html and .css files. The good thing about this feature is that it was community-driven.

Community Driven Static Export feature

You need to do the following:

• Create a custom next.config.js file like so:
   exports.exportPathMap = () => ({

      "/": { page: "/" },

      "/about": { page: "/about" }

    });
• Now run the command like so:
   next build && next export

Note: It's advisable you configure the command in your package.json file like so:

"scripts": {

    "export": "next build && next export",

}

So you can just run npm run export and it will build your Next.js app as a static website. This simply means you don't need any server to deploy it. Whoop! Whoop!

Change the directory into the new outdirectory and deploy your app to a cloud platform, e.g [now](https://zeit.co/now).

3. Better Error Handling

The error color theme has been updated to be more accessible and easier on the eyes.

Source: Zeit

4. Improved Startup Time

Startup time for a Next.js app is now 5 times faster. The bootup time for a typical Next.js 3 app was cut down from 1000ms to about 200ms.

5. Optimized Bundle

The bundle size of Next.js core is now smaller. In fact, here is the webpack bundle analyzer output after optimization:

Optimized Bundle

6. Improved Hot Module Replacement

Before now, there were some bugs with HMR, (hot module replacement), one of which was the ERR_INCOMPLETE_CHUNK_ENCODING error that shows up when using Node.js 8.0. That issue has been solved. Yaay!

Furthermore, if you return a wrong type, Next.js shows you the right error message and also recovers smoothly from it once the right type is returned.

Better Bad Type Returns

One more thing: undefined is not a function is now obsolete. Next.js now correctly identifies any type of runtime error thrown and catches it effectively. A typical example of this scenario can be seen below:

Source: Next.js Blogexample of this scenario can be seen below:

Source: Next.js Blog

example of this scenario can be seen below:

Source: Next.js Blog

7. Dynamic React Components

Next.js now ships with a powerful opt-in utility called next/dynamic which helps you to create dynamically loaded React Components easily.

Before now, code splitting was route based. In Next.js 3, you will be able to load code as a function of the data that the user gets.

import dynamic from 'next/dynamic'

const DialogComponent = dynamic(import('../components/DialogBox'))

export default () => (

  <div>

    <Header />

    <DialogComponent />

    <p>Weclome to the landing Page</p>

  </div>

)

Note: If the dynamic component is loaded in the initial rendering, server-rendering also works. Awesome!

Conclusion

With Next.js 3, the GitHub repo now has over 16,000 stars and we have seen lots of significant improvements and major upgrades from the initial version that was released last year. Kudos to the team behind this project and the JavaScript community for their continuous support. In fact, they already have plans for Next.js 4.

Source from here