Skip to content
Branch: master
Find file History
bradgarropy and timneutkens 📝 documentation - more explicit wrapper examples (#474)
* more explicit withCSS wrapper example

* more explicit withSass wrapper example

* more explicit withLess wrapper example

* more explicit withStylus wrapper example

* more explicit withMDX wrapper example

* more explicit withPreact wrapper example

* more explicit withTypescript wrapper example

* more explicit withWorkers wrapper example
Latest commit 139d283 Jun 3, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
babel.js Use babel instead of ts-loader (#171) May 12, 2018
index.js Only apply hot-self-accept-loader when on older versions of Next.js (#… Jun 16, 2018
package.json Publish Nov 14, 2018
readme.md 📝 documentation - more explicit wrapper examples (#474) Jun 3, 2019

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({
  /* config options here */
})

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.