Next.js + Typescript + Awesome typescript loader

Use Typescript with Next.js with Awesome typescipt loader

⚠️ This plugin only compatible with Next.js v5️ ⚠️

If you're using 6, it's better to just stick with next-typescript, cause it uses Babel 7 with preset-typescript. See this comment to look for more details.

Installation

npm install --save-dev next-awesome-typescript typescript

or

yarn add --dev next-awesome-typescript typescript

Usage

Create a next.config.js in your project

// next.config.js
const withAwesomeTypescript = require("next-awesome-typescript");
module.exports = withAwesomeTypescript();

Minimal tsconfig.json is necessary. The reason for it is that babel will be applied after typescript, and will take care of modules, jsx and stuff.

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "moduleResolution": "node",
    "sourceMap": true
  }
}

You can pass options to awesome-typescript-loader as a field of nextConfig

// next.config.js
const withAwesomeTypescript = require("next-awesome-typescript");

const nextConfig = {
  awesomeTypescriptOptions: {
    useCheckerPlugin: true,
    loaderOptions: {
      transpileOnly: false,
    },
  },
};

module.exports = withAwesomeTypescript(nextConfig);

Optionally you can add your custom Next.js configuration as a parameter

// next.config.js
const withAwesomeTypescript = require("next-awesome-typescript");
module.exports = withAwesomeTypescript({
  awesomeTypescriptOptions: {
    useCheckerPlugin: true,
    loaderOptions: {
      transpileOnly: false,
    },
  },
  webpack(config, options) {
    // you can optionally add custom Next.js webpack configuration here.
    return config;
  },
});

Probably You are not only going to use typescript plugin. In a multi plugin scenario. (In this example with next-css)

// next.config.js
module.exports = withAwesomeTypescript(
  withCSS({
    cssModules: true,
    cssLoaderOptions: {
      importLoaders: 1,
    },
    awesomeTypescriptOptions: {
      useCheckerPlugin: true,
      loaderOptions: {
        transpileOnly: false,
      },
    },
  })
);