ZEIT – Next.js 2.0

Next.js 2.0

  • When we launched Next.js, there was no way to do dynamic routing or load your custom server code.
  • This has tremendous benefits, at the tiny cost of two extra parameters in the initial `install` to set up your project:

    Our mission is to make Next.js as familiar as possible to developers on the Web Platform.

  • Each top-level component (page) in Next.js defines the entirety of the document .
  • We’ve very thankful to our community for having submitted so many examples of backends (Express, HAPI, Koa…), styling systems (cxs, glamor, styled-components…), testing systems (jest), type systems (TypeScript and Flow), data fetching (Apollo) and many others.
  • This will allow for server-rendered pages that expose different JS components according to the data they used, for example.

Next.js 2.0 comes packed with performance improvements and extensibility features

@zeithq: Next.js 2.0

More than 3.1 million developers read our announcement post of Next.js . More than 110 contributors have submitted patches, examples or improved our documentation. Over 10,000 developers have starred us on GitHub .

Today, we are proud to introduce Next 2.0 to the world. What follows is a quick summary of every new feature and improvement we have made.

, and you’ll get automatic code splitting, routing, hot code reloading and universal (server-side and client-side) rendering.

) for a production-ready app.

It’s simple because it composes really well. It plays well with the rest of the React and JavaScript (npm) ecosystems.

It’s also very small . Check out the README : the entire framework’s documentation is a 5 minute read.

NEW! Want to learn step-by-step, by example? Check out the Learn Next.js tutorial!

When we launched Next.js, there was no way to do dynamic routing or load your custom server code. We did this because we believe in shipping early and often.

to boot up your own custom server and take full control of the routing and rendering pipeline. This enables powerful features like fancy URLs or custom caching schemes .

Implementing Reddit-style fancy URLs with Express and Next.js

npm install –save next react react-dom

This has tremendous benefits, at the tiny cost of two extra parameters in the initial `install` to set up your project:

, a Babel transformation that gives us scoped (isolated) full CSS support.

This is what a component with CSS that’s local, conflict-free, server-rendered and injected once per instance looks like:

only apply to the JSX tags defined statically within the scope

on its GitHub repository.

component.

And just like that, you get the performance of a “SPA”, without the initial download and expensive bootup penalty of big bundles. Combined with server rendering, this typically means extraordinary performance with very little effort.

We think a better “Hello World” app than TodoMVC is actually… Hacker News!

Our implementation, Next News , is fully server-rendered, queries the data over Firebase and updates in realtime as new votes come in. Check out the demo at next-news.now.sh .

Navigating around Next News is snappy!

), notice that we show a “Loading…” message when loading an item on the client, but not when we server-render. This makes us a less strict clone, but it’s for a good cause.

We also went as far as replicating the style-less HN login page. Each top-level component (page) in Next.js defines the entirety of the document. There’s no notion of global layouts or configuration, only composition via React’s component system, which gives you great flexibility.

We’ve very thankful to our community for having submitted so many examples of backends (Express, HAPI, Koa…), styling systems (cxs, glamor, styled-components…), testing systems (jest), type systems (TypeScript and Flow), data fetching (Apollo) and many others.

Out of the box, Webpack watches and recompiles your entire project upon any change. We found that HMR was therefore not scaling well as our projects grew in number of code-splitting entry points and components.

We deployed a new lazy compilation mechanism that only subscribes to the pages that you’re actually working on (i.e.: all the component trees currently rendered).

In our tests, this has made compilation 10 to 20 times faster for large projects.

We’ve made some important improvements to how builds work:

The best part? Every Next.js app is now smaller and more efficient.

Data for a basic site with the Next.js and React bundled

We are working on making Next.js much smaller and we have identified many opportunities for optimization already.

The React team is also working on size optimizatons for React Fiber , which we will begin testing soon.

Many of the examples above introduce new features to the code or the build process. This is possible because Next.js gives you complete control over Babel’s and Webpack’s configuration.

To extend Babel, we let you apply Next.js’ settings as a preset .

at compile time

To extend webpack or tweak other settings, you can define a `next.config.js` file. Check out the README for the complete documentation.

Our CEO Guillermo Rauch presented Next.js at ReactConf in Santa Clara a few weeks ago. Check it out!

We attribute our success with this release to having released early, iterated frequently and listened to our community. But something extremely important as well was making our roadmap and priorities clear and public .

Here are some of the goals for the coming releases on our way to 3.0:

We are still working on a few improvements to hot module replacement. Some errors don’t have accurate locations and there are a few issues with recovering from errors in certain scenarios.

We are investigating ways to continue to optimize the development experience. Since both Node.js and modern browsers that developers use iterate so quickly, we can skip large portions of the compilation step for really fast reloads.

This will allow for server-rendered pages that expose different JS components according to the data they used, for example. In addition, once the component mounts on the client, you can load any component you want, lazily.

Note: this already partially works, but we will continue to refine it an document it.

We are looking forward to testing and ensuring Next.js works perfectly with the upcoming React engine: Fiber. This will potentially introduce new opportunities, like the ability to stream HTML from the server as it is generated.

command. In other words, you’ll be able to statically export your application to HTML files.

Aside from this very website, we are very happy many others in the industry have adopted Next.js. Here are some that have let us know .

channel in our Public Slack community .

We are bringing together the Next.js community at our one-day conference ZEIT Day on April 29th in San Francisco. It’s a unique opportunity to meet other users and learn more about it from its creators!

ZEIT – Next.js 2.0