Towards Next.js 5: Introducing Canary Updates

Link to headingNext.js 5: Bigger Scale

Next.js is designed to present the developer the smallest possible API surface on top of React to make app and website development productive.

Therefore, instead of writing new features or expanding that API, we are focusing on scalability.

We have therefore divided the Next.js 5 roadmap into two broad categories:

1. Making Next.js perform better with large codebases (single repository)

2. Making Next.js work better for larger teams (across multiple repositories)

Link to headingThe Roadmap

1. Improved Compilation Speed

   • Better startup performance (first time you run next)

   • Better lazy page building performance

2. Improved Sourcemaps

   • Accurate sourcemaps for all categories of errors

   • Support for external sourcemaps

3. Multiple Next.js apps on the same domain

   • Ability to designate a prefix to mount an app on

   • Interoperability for <Link> across app realms

4. Simpler sharing of components on npm

   • No need to transpile before publishing

   • Easier importing of Next.js components from the registry

The first two items will make you more productive in the local scope of a project. Larger codebases stand to see the most benefits (complex component hierarchies).

The last two will make Next.js more productive across your entire organization, by allowing you to split more and share. Larger companies with many teams will see many workflow improvements.

Finally, we're adding some highly requested examples (like user authentication), improved documentation for Next.js internals and smaller features and bugfixes.

Link to headingWorking on the Cutting Edge

All ongoing development will be based out of the new canary branch on Github.

This branch will be released much more often than the master branch. This will ensure that canary is always latest and master is always stable.

The best part? As soon as a git tag is made, a release is automatically published to npm using Travis CI.

Link to headingHow to Start Using Canary

We have added a new distribution tag named "canary" in our npm package. To install Next.js canary, you simply run one command:

1
npm install --save next@canary react react-dom

Obviously, there's a caveat: Some of the changes we introduce will be experimental. If you encounter issues, let us know or just switch back to the stable channel!

That said, a priority of our team is to make canary releases that are drop-in, backwards compatible and as stable as possible.

Link to headingOur First Canary Release

I'm happy to share that the first canary release is already available! 4.2.0-canary.1 brings substantial improvements and brings us closer to some of the goals stated above.

Minor Changes

• Combine source maps: #3178

• Expose mechanism to monitor render events: #2655

• Support de-deduping head tags by setting key: #3170

• Use fs.realpath to get actual project directory: #3243

• Allow overriding Content-Type: #3242

• Make pages glob pattern overridable: #3195

• Use uglify-es for minification: #3150

• Make sure NODE_ENV is production for react-dom to optimize: 152c2c2

Patches

• Add note about NODE_ENV being set automatically: 72827d2

• Output webpack build stats as webpack-stats.json: #2828

• Upgrade styled-jsx to version 2.1.2: #3231

• Messages are available within initialProps: #3252

• Set Cache-Control max-age to a year: #3247

• Document router events the way they are used: #3268

• Update withData.js - support withRouter HOC: #3286

Examples

• With-apollo example using Apollo 2: #3180

• Change _error.js example to use err prop: #3197

• Create example of activeClassLink using withRouter: #3188

• Added Sentry example: #3215

• Dropped isomorphic-fetch in examples in favor of isomorphic-unfetch: #3230

• Only-client-render-external-dependencies example: #3229

• Add kea example: #3262

• Example with-redux-observable: #3272

• Update the custom-server-express with an req.params example: #3258

• Update README.md for with-shallow-routing example: #3285

Link to headingWant to Contribute?

If you are looking to start contributing to Next.js, we have recently introduced a good first issue label. These are small –yet very impactful– issues that are ideal for beginners to our codebase.

If you have any questions or want some guidance on how to get started, feel free to join our public chat and ask around!