Skip to content
Branch: master
Find file History
threehams and timneutkens Remove baseUrl config option. (#357)
The example `tsconfig.json` specifies the option: `"baseUrl": ".",`

This has two negative effects:
- TypeScript allows paths such as `import Component from "components/Component"` but Babel does not by default. Typical NextJS configurations don't allow paths like this, so this results in uncaught runtime errors.
- Typescript / VSCode's auto-import will use these invalid paths instead of relative paths.
Latest commit 8d58b41 Dec 16, 2018
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
babel.js
index.js
package.json Publish Nov 14, 2018
readme.md Remove baseUrl config option. (#357) Dec 15, 2018

readme.md

Next.js + Typescript

Use Typescript with Next.js

This plugin implements @babel/preset-typescript with Next.js.

Installation

npm install --save @zeit/next-typescript

or

yarn add @zeit/next-typescript

Usage

Create a next.config.js in your project

// next.config.js
const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()

Create a .babelrc in your project

{
  "presets": [
    "next/babel",
    "@zeit/next-typescript/babel"
  ]
}

Create a tsconfig.json in your project

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext"
  }
}

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

// next.config.js
const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript({
  webpack(config, options) {
    return config
  }
})

Type checking

If your IDE or code editor don't provide satisfying TypeScript support, or you want to see error list in console output, you can use fork-ts-checker-webpack-plugin. It will not increase compile time because it forks type checking in a separate process

// next.config.js
const withTypescript = require("@zeit/next-typescript")
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = withTypescript({
  webpack(config, options) {
    // Do not run type checking twice:
    if (options.isServer) config.plugins.push(new ForkTsCheckerWebpackPlugin())
    
    return config
  }
})
You can’t perform that action at this time.