Next.js 8.0.4

We are happy to introduce the production-ready Next.js 8.0.4:

Build performance improvements
Deterministic builds
Smaller client runtime
Smaller serverless functions
Default viewport tag
Learning guide improvements

As always, we have strived to ensure all these benefits are completely backwards compatible. For most Next.js applications, all you need to do is run:

Terminal

npm i next@latest react@latest react-dom@latest

Build Performance

Next.js builds are now more deterministic, meaning that if code is not changed the build output would hold the same result every time.

This allows for more work done by the build process to be cached, which results in faster rebuilds of production code after the first build.

Our measurements revealed that a significant amount of build time is spent minifying JavaScript, because the build output is now more deterministic the chances of the minified file already being in the cache are larger.

Users deploying to Vercel will experience these caching improvements automatically.

We've simplified our server-side next/dynamic manifest to only include modules that are loaded asynchronously. This simplified manifest is faster to compute and produces less JavaScript.

CircleCI users should notice faster build times. Previously, workers were over-scheduled due to the CircleCI environment not accurately reflecting the amount of available CPUs. Next.js now detects CircleCI and sets an appropriate number of CPUs based on the resources available.

Smaller Runtime Footprint

Next.js now generates 5.58KB less client-side JavaScript and has a smaller HTTP payload than the previous version.

withRouter no longer depends on hoist-non-react-statics, reducing the bundle size by 3KB. withRouter will still hoist getInitialProps, but not other static properties.

The next/babel preset has been optimized to produce leaner and faster JavaScript.

The X-Powered-By header has been removed, reducing the HTTP payload size. We surveyed the community and found the header was often disabled in production, so we've decided to remove it. This also means that the poweredByHeader can be removed from your next.config.js if the option was enabled in your project.

We have made many optimizations in the Next.js dependency tree and overall codebase, in doing so we were able to make every Serverless Function 44KB (5.44KB gzip) smaller.

Serverless Function size directly affect Serverless bootup performance, smaller functions mean faster bootup.

	8.0	8.0.4	delta
Serverless page size	259 KB	215 KB	17% smaller
Serverless page size (gzip)	62.3 KB	56.8 KB	9% smaller

After the release of Next.js 8 we received reports from a small number of users having trouble importing React components outside of Next.js, for example in their test suite. This was caused by imports to next being rewritten to the correct file inside the Next.js codebase, however, this optimization was applied for all users of the next/babel preset. The optimization has been moved into the Next.js build process itself so it will no longer conflict user's babel setups.

Default Viewport Meta Tag

One of Next.js' goals is to provide the best possible defaults for writing web applications. In an effort to reduce the amount of setup one has to do when implementing CSS media queries in Next.js.

By default browsers don't handle CSS @media queries and zooming the way you would expect them to work, which can lead to unexpected inconsistencies when writing CSS @media queries.

In nearly all cases Next.js users would add a viewport meta tag to their application to solve these inconsistencies.

Starting from version 8.0.4 this viewport tag is no longer needed in most cases. If the viewport is not set by the application a default viewport will be applied:

<meta
  name="viewport"
  content="width=device-width,minimum-scale=1,initial-scale=1"
/>

The viewport tag can still be overwritten by using next/head:

pages/index.js

import Head from 'next/head';
 
function HomePage() {
  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="width=device-width,minimum-scale=0.5,initial-scale=1"
        />
      </Head>
    </>
  );
}
 
export default HomePage;

Thanks to Jason Miller for collaborating on and implementing this change.

New `@next/mdx` Plugin

MDX lets you write JSX inside your Markdown documents. You can use regular markdown syntax to write content and import React components to enhance the document with interactive and dynamic content.

The plugin that provides MDX support for Next.js, @zeit/next-mdx, has been moved to Next.js GitHub repository and is now available as @next/mdx.

Installation:

Terminal

npm i @next/mdx @mdx-js/loader

To make it available to your Next.js app, create a next.config.js file and include:

const withMDX = require('@next/mdx')();
module.exports = withMDX();

Over time more Next.js plugins will be moved into the Next.js repository so that they are released together with Next.js core and are tested by the Next.js test suite. This way we can ensure that hot module replacement, production building and other features work well with plugins.

Learning Guide Improvements

Next.js Learn is a step-by-step guide to learn Next.js, complete with quizzes and examples.

The website has recently been rebuilt using MDX, which makes contributing easier than ever. We welcome anyone to contribute to the learn website!

The website has also been upgraded to use the Next.js serverless target, which was introduced in Next.js 8, ensuring the website scales and is fast for users all over the world.

We received a lot of feedback from the community regarding content improvements, and we have been acting on it over the past few weeks. Next.js Learn now has updated examples and more details in each section to make the instructions easier to understand!

Contributions

We’re very excited to see the continued growth in Next.js adoption.

We’ve had over 660 contributors.
On GitHub, the project has been starred over 36,150 times.
Over 2,950 pull requests have been submitted since the first release.

We would like to thank everyone who has contributed to this Next.js release. Whether it’s contributing to the core or expanding and improving our ever growing examples directory, we appreciate all contributions.

If you are looking to start contributing to Next.js, issues with the good first issue or help wanted label are a good place to start.

Community

The Next.js community has grown to over 6,000 members.

GitHub discussions is a place where you can chat about Next.js, get advice on how to solve problems, and help out other community members with your knowledge of Next.js.

Join the community on GitHub!