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 } })