Next.js 6 Ships with Simplfied Static Exports and App-Level Customization

ZEIT has released Next.js 6, the production-ready version of the React framework. The release coincides with the launch of the project's dedicated homepage, nextjs.org, which consolidates documentation, tutorials, and community showcases. Highlights of the release include zero-configuration static exports, a new _app.js extension point, and upgrade to Babel 7.

Streamlined Static Export

The framework's approach to pre-rendering remains central. Applications can either be server-rendered on each request or pre-rendered into static files that require no runtime server code. While static exporting was already supported, it previously required manual configuration of a route map in next.config.js for anything beyond basic setups.

Next.js 6 removes that friction. The route map is now generated automatically based on the contents of the pages/ directory. For projects without custom routing rules, running a single command is sufficient—no edits to next.config.js are needed:

next build
next export

A static deployment example and its corresponding source code are available for reference.

The _app.js Extension Point

Previously, customizing the top level of an app required defining _document.js. Though powerful, this file only renders the <html> element and cannot be modified on the client side, limiting its usefulness to the initial pre-render phase.

Next.js 6 introduces _app.js, a new top-level component that wraps each page. This opens up several important use cases that were hard or impossible to achieve with _document.js:

Some differences between `_document.js` and `_app.js`.
  • Page transitions: While each page remains independently accessible and lazy-loadable, defining _app.js enables smooth client-side animations during navigation.
  • Simpler state management integration: Wrapping the app component makes it more straightforward to integrate data-fetching libraries like Apollo and Redux. Official examples demonstrate both integrations.
  • Centralized error boundaries: Since componentDidCatch allows handling exceptions from nested components, defining it once in _app.js provides a consistent place to manage unexpected errors across the app. A working example of this error-handling pattern is available.

Upgrading to Babel 7

The underlying compiler used by Next.js has been updated to Babel 7, bringing several notable improvements.

JSX Fragment Syntax

The React Fragment API itself remains the same—it renders a list of children without adding an extra DOM element. But the new JSX fragment syntax (<>...</>) removes the need to write Fragment explicitly, which can get verbose. With this release, that shorthand is fully supported:

render() {
  return <React.Fragment>
    <A />,
    <B />
  </React.Fragment>
}
render() {
  return <>
    <A />,
    <B />
  </>
}

Scoped Babel Configurations

It is now possible to place a .babelrc file in a specific subdirectory of a Next.js project. That nested configuration overrides the main Babel setup for any code processed within that directory, which is useful for isolating components or utilities that need a different compilation setup.

src/
    .babelrc      # General .babelrc
  components/
    i18n/
      .babelrc  # This .babelrc only applies to this directory

Official TypeScript Path

TypeScript support previously required integrating ts-loader into webpack, since the framework runs webpack on both server and client. With Babel 7's built-in TypeScript handling, the recommended route is to install the @zeit/next-typescript plugin or follow the updated TypeScript example.

Dedicated Documentation Hub

The project has moved its official presence to nextjs.org. Previously, developers needed to consult the README on GitHub for reference material, while step-by-step tutorials lived separately on learnnextjs.com. Those resources are now unified:

  • Documentation: The full API reference is available at nextjs.org/docs, with content that always tracks the latest stable version.
  • Interactive learning: The guided, quiz-based curriculum from learnnextjs.com has been merged into nextjs.org/learn, providing a graduated path for beginners.
  • User showcase: A new gallery at nextjs.org/showcase features production applications built with the framework, inviting developers to view them for inspiration or submit their own projects.