Menu

React, etc. Tech Stack

React, Flux, GraphQL, Hack, HHVM...? All of this and more!

Next.js 5 improves TypeScript support

Next.js is a Universal JavaScript Framework that has been around late 2016. During this time the technology has attracted a large user base, with significant production deployments.

Meanwhile the JavaScript community has embraced TypeScript. Unfortunately the technologies have not paid together well, but this is set to improve.

With the launch of the fifth major version of Next.js the Zeit team is acknowleding the need for better support for TypeScript. The technology is growing rapidly, and the ECMAScript transpiler Babel will add TypeScript support in version 7. The two teams are working together to provide a first class experience.

Earlier Next.js versions can be configured to support development in TypeScript, but there has not been an optimal way for this. The default example in 4.0 and earlier compiled components, but left directories untidy as TypeScript to JavaScript conversions was done in place.

In addition the example was limited so that the solution did not work for custom backend code. All in all the packaged example was lacking. In addition developers have created many different setups for working with Next.js. The have been either feature complete but slow, or lacking full feature coverage.

All in all, the TypeScript support has not been on par to what Next.js users have grown to expect from the.

Native support in Babel 7, Webpack Universal an interim solution

Version 7 of Babel, with full TypeScript support, is still in development. Users can try to use unreleased development versions, but this is likely a moving target not recommended for production use.

Next.js 5.0 adds support for Webpack Universal. This is is something that can be used to provide an interim solution to get full TypeScript support for Next.js development without heavy configuration, overhead or performance compromises.

To add TypeScript support developers will need to add ts-loader, a TypeScript loader for Webpack, as a dependency and modify their Webpack configuration as follows:

module.exports = {
  webpack(config, options) {
    const { dir, defaultLoaders } = options
    config.resolve.extensions.push('.ts', '.tsx')
    config.module.rules.push({
      test: /\.+(ts|tsx)$/,
      include: [dir],
      exclude: /node_modules/,
      use: [
        defaultLoaders.babel,
        { loader: 'ts-loader', options: { transpileOnly: true } }
      ]
    })
    return config
  }
}

Next.js now also ships with a plugin architecture, that makes adding plugins easy. TypeScript support can be installed by adding the next-typescript plugin to the next.js specific configuration file (next.config.js):

const withTs = require('next-typescript');
module.exports = withTs({ /* additional config*/ })

Next.js is continuing on the path of responding to users' request to provide useful features. This is yet another testament to how TypeScript is taking JavaScript community by storm. Not only by offering typing and additional language features, but super powerful debugging and refactoring capabilities.

As TypeScript plays great with React, this will provide an improved development experience for Next.js development. The GraphQL and Next.js combo continues it's momentum to 2018. Full details on the Next.js 5.0 release in the announcement post: Next.js 5: Universal Webpack, CSS Imports, Plugins and Zones

Written by Jorgé on Monday February 5, 2018

Permalink - Tags: nextjs, typescript

« Next.js 5.0 supports TypeScript, adds Universal Webpack, etc. - Formstate - Type safe forms for React.js with TypeScript »