Next on Next.js

Published in

JavaScript Mantra

6 min readJan 30, 2017

Last November, I wrote a post about Next.js and why I’m so excited about it. But at that time, it still wasn’t ready for production deployments. But, I really liked Next.js for its simplicity. It allows us to write apps with JavaScript like we do with PHP.

Since November, I have been working on Next.js and trying to improve it as much as I can by working directly with the Next.js core team. We’ve added a bunch of cool features and many improvements. Now, Next.js is ready for production deployments. It’s not officially released yet, but you can try out the beta version of Next.js 2.

To install Next.js 2 beta, run the following command:

npm install --save next@beta

Then follow the docs to get started.

Next.js 2

The main purpose of Next.js 2 is to make Next.js production ready while maintaining its simplicity. This update includes a lot of bug fixes, a set of useful features and performance improvements.

So if you already like Next.js, you’ll love Next.js 2. And even if you hated the first version, give Next.js 2 a try. I hope you’ll use it for your next app.

What’s new?

Custom Routing (Programmatic API)

This is most popular issue on GitHub because any serious app needs dynamic routing. It was possible to create dynamic routes with query params, but everyone likes clean URLs. There were a lot of proposals and different implementations.

But @rauchg was keen on keeping the routing API simple, and proposed a solution called the “Programmatic API.” Basically, with the Programmatic API you can embed Next.js inside your own Node.js process/app.

As a result, you can write dynamic routes for Next.js using express, koa or any other Node.js HTTP server library. Behind the scenes, the API maps dynamic routes to Next.js page-based routing. This is similar to Apache’s .htaccess support that we use to implement clean urls in PHP.

Custom routing is just one feature of the Programmatic API. Take a look at following examples of cool things you can do with the Programmatic API:

Better Code Splitting and Prefetching

With Next.js, you can get code splitting support for FREE without doing any additional work. We use some of webpack’s features, but we’ve added our own tools to make them simple to use.

As a result of code splitting, you need to download new code from the server when you switch between pages. Consequently, there’s a delay while this new code downloads. What if we could prefetch this code in the background?

We came up with a pretty good solution using Service Workers. You can get prefetching support by using “next/prefetch” as the “Link” component, or by using the imperative API.

Webpack 2 Support

Webpack 2 comes with pretty cool features and a lot of improvements. Next.js uses it behind the scenes, and you can get most of these features out of the box.

Custom Webpack and Babel Configuration

Create React App (CRA) is a pretty good solution for building React apps. But it doesn’t allow you to customize the built-in webpack or babel configurations. Next.js promised to do that from the very beginning.

With Next.js 2, you can simply customize webpack and babel as much as you want. That’s a huge deal.

Client-Side Routing API

Having a simple routing system and connecting pages with a “Link” component is nice. But there will inevitably come a time when you want to do more. That’s where our client-side JavaScript routing API comes in.

With the JavaScript routing API, you can change routes at will. You can also listen to events related to the router. This will help you show loading messages while Next.js is loading code and data between route changes.

What about performance?

Performance is a really big deal for any app, and it’s not always just about the app’s page load time. App performance also includes server performance and dev-time performance (such as short build/ rebuild times).

With Next.js 2, we’ve improved the dev build time to be compatible with any other similar Webpack setup. Plus, we have some cool plans to make it even better.

Along with improving the dev build time, we’ve also made a few other major performance improvements. Let me show you some of them:

Ahead-of-Time Gzip Compression

It’s quite possible to add gzip support to Next.js via the runtime with just a few lines of Node.js code. But if we could do it at build time, it would save a lot of CPU power. That’s important, especially for apps deployed in AWS lambda-like environments.

Now, Next.js 2 does this for you.

So when you build your app with “next build,” it will automatically gzip all the static JavaScript files and serve them. You don’t even need to write a single line of code.

Support for Immutable Caching

Last year, Mozilla and Facebook introduced a new caching feature with a new category of assets called immutable assets. Once the browser has downloaded an immutable asset, it will never again ask the server anything about that asset.

This means that even if you reload the page, your browser won’t try to load the immutable asset again from the server. If the asset weren’t immutable, the browser would check the server for that asset to learn about its status.

This is really good for speeding up page load times and saving a bunch of CPU cycles on the server.

Next.js 2 implements this feature by default. When you build your app with “next build” and start it with “next start,” it will serve JS files and other code-related assets as immutable assets.

Super-Speed Page Loading Times

We’ve come up with a lot of ways to improve the initial page loading time, which can be a deal breaker for mobile websites and e-commerce sites. Here’s a test we’ve run with Google’s PageSpeed tool (we got 100 out of 100):

Try it your self

What Not to Expect with Next.js 2

So far, I talked about all the good and cool things about Next.js 2. Like any other tool, however, we can’t do everything with Next.js. Specifically, due to the isomorphic nature of Next.js, we can’t implement certain useful features. That said, we’ll try hard to improve support in future versions.

What features are we still not able to implement?

Limited Webpack Configuration Support

Due to the isomorphic nature of Next.js, we can’t support some of the common features of webpack, such as custom loaders. Since most loaders introduce a new file extension, we have some difficulty processing them on the server side.

There are also some other limitations related to file extensions.

But since we support complete babel customization, you can always use babel plugins instead of webpack loaders as an alternative.

No Raw CSS Imports in JavaScript

Create React App and many other webpack setups allow you to import CSS directly into your components. But again, because of the isomorphic nature of Next.js, we can’t support this.

What we do support is nearly every major CSS in the JS libraries, including SSR . Take a look at these sample apps to see how to use them:

By default, Next.js 2 comes with styled-jsx pre-bundled, so you can use it right away.

Limited Data Management

Our goal with Next.js is to provide a great way to build React apps as easily as possible. Managing data is not part of this goal. That’s simply because data management is a huge field, and there are already many good tools for data-related tasks. We encourage you to use those tools in your Next.js apps.

You can use any REST API, GraphQL endpoint or Firebase to manage data in your app. Every page has a static method called “getInitialProps” where you can load data and pass it to the page as props.

That’s the only thing we officially support related to data management. You can implement any other data-related tasks without any core Next.js support.

Take a look at following examples to get an idea about how to manage data with Next.js:

Are you ready?

This is almost everything you need to know about Next.js 2. Personally, I really enjoyed building new features and fixing the bugs in Next.js. I’ve already moved some of my internal apps to Next.js 2, and right now I’m porting the toolkit behind LearnGraphQL to Next.js.

We’re currently doing the final testing and fine-tuning Next.js 2 for the upcoming launch. I hope we can leave the beta tag behind pretty soon!

Give Next.js 2 a try and let us know about your experience.