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
Type Name Latest commit message Commit time
Failed to load latest commit information.
package.json Publish Nov 14, 2018 Remove baseUrl config option. (#357) Dec 15, 2018

Next.js + Typescript

Use Typescript with Next.js

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


npm install --save @zeit/next-typescript


yarn add @zeit/next-typescript


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": [

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.