next-awesome-typescript's Introduction

Next.js + Typescript + Awesome typescript loader

Use Typescript with Next.js with Awesome typescipt loader

Installation

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

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 first argument

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

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

module.exports = withAwesomeTypescript(awesomeTypescriptOptions);

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

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

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

// next.config.js
const awesomeTypescriptOptions: {
  useCheckerPlugin: true,
  loaderOptions: {
    transpileOnly: false,
}}

module.exports = withAwesomeTypescript(withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
  },
  awesomeTypescriptOptions
}));

Recommend Projects