Use Typescript with Next.js
This plugin implements @babel/preset-typescript with Next.js.
npm install --save @zeit/next-typescript
or
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": [
"next/babel",
"@zeit/next-typescript/babel"
]
}
Create a tsconfig.json
in your project
{
"compileOnSave": false,
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"jsx": "preserve",
"allowJs": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"removeComments": false,
"preserveConstEnums": true,
"sourceMap": true,
"skipLibCheck": true,
"baseUrl": ".",
"lib": [
"dom",
"es2016"
]
}
}
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
}
})
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
}
})