Next.js 3.0

3 min read

Aug 8, 2017

We are very excited excited to announce the stable release of Next.js 3.0. Ever since our beta announcement, we have been using it to power vercel.com and have received lots of feedback and contributions from our community.

Let’s walk through what’s been improved and what’s altogether new, or fetch the latest version from npm!

New to Next.js? Next.js is a zero-configuration, single-command toolchain for React apps, with built-in server-rendering, code-splitting and more. Check out Learn Next.js to get started!

Static Export Support

This was the most request feature by the community on GitHub. And we have delivered!

All it takes to export your project to a directory with plain .html and .css files is to configure your project and run:

next export

The bonus? You can deploy statically to now.sh as many times as you want, for free!

The prolific Next.js community has already come up with some static blog generators for you to check out:

Dynamic Import Support

Next.js now fully supports TC39 dynamic import.

With dynamic imports, our codebase gets split into a set of chunks that can later be loaded dynamically. The developer gets full control to load code over time, depending on user interaction or the data itself.

It's pretty easy to use. Just import your module as a promise as shown below:

const moment = import('moment')
setTimeout(function() {
  moment.then(moment => {
  // Do something with moment
  })
}, 15000)

The module will be downloaded when we starting to use it. In the above example, the moment module will be downloaded when the setTimeout callback runs (~15 secs after the page load.) This speeds up our main JavaScript bundle by loading code only when we need it.

Dynamic React Components

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

Dynamic components can load React code on-demand, but the most interesting feature is that if they are included in the initial rendering, server-rendering still works!

Let's look at some examples!

import dynamic from 'next/dynamic'
const DynamicComponent = dynamic(import('@components/hello'))

export default () => (
  <div>
    <Header />
    <DynamicComponent />
    <p>HOME PAGE is here!</p>
  </div>
)

Loading a single component, dynamically.

import dynamic from 'next/dynamic'

const HelloBundle = dynamic({
  modules: (props) => {
    const components = {
      Hello1: import('@components/hello1'),
      Hello2: import('@components/hello2')
    }
    // you can add / remove components based on props
    return components
  },
  render: (props, { Hello1, Hello2 }) => (
    <div>
      <h1>{props.title}</h1>
      <Hello1 />
      <Hello2 />
    </div>
  )
})

export default () => (
  <HelloBundle title="Dynamic Bundle" />
)

Loading different components based on dynamic properties!

Until today, code splitting was based on routes, or the section of the application the user had loaded. Moving forward, you'll be able to load code as a function of the data the user is presented with.

We are excited about the apps people will create with this new paradigm.