# @zeit/next-typescript

> Use [Typescript](https://www.typescriptlang.org/) with [Next.js](https://github.com/zeit/next.js)

Latest version **1.1.1** (published 2018-09-19) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @zeit/next-typescript
pnpm add @zeit/next-typescript
yarn add @zeit/next-typescript
bun add @zeit/next-typescript
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2018-09-19 |
| First published | 2018-01-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/zeit__next-typescript) |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2667 |
| Maintainers | arunoda, codetheory, hharnisc, iamevilrabbit, igorklopov, jamo, javivelasco, joecohens, leo, matheuss, nkzawa, olliv, rauchg, timneutkens, tootallnate |

## Links

- npm: https://www.npmjs.com/package/@zeit/next-typescript
- Repository: https://github.com/zeit/next-plugins
- Homepage: https://github.com/zeit/next-plugins#readme
- Issues: https://github.com/zeit/next-plugins/issues
- npm.io page: https://npm.io/package/@zeit/next-typescript

## Dependencies (1)

- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.0.0

## Recent versions

- 1.1.1 (latest) — 2018-09-19
- 1.1.2-canary.0 (canary) — 2018-11-14
- 1.1.1-canary.3 — 2018-08-28
- 1.1.1-canary.2 — 2018-08-18
- 1.1.1-canary.1 — 2018-07-30
- 1.1.0 — 2018-06-16
- 1.0.1 — 2018-05-25
- 1.0.0 — 2018-05-12
- 0.1.1 — 2018-03-31
- 0.1.0 — 2018-03-31
- 0.0.11 — 2018-03-22
- 0.0.10 — 2018-02-14
- 0.0.9 — 2018-02-12
- 0.0.8 — 2018-02-01
- 0.0.7 — 2018-01-28
- … 2 more at https://npm.io/package/@zeit/next-typescript/versions

## README

# Next.js + Typescript

Use [Typescript](https://www.typescriptlang.org/) with [Next.js](https://github.com/zeit/next.js)

This plugin implements [@babel/preset-typescript](https://github.com/babel/babel/tree/master/packages/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

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

Create a `.babelrc` in your project

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

Create a `tsconfig.json` in your project

```json
{
  "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

```js
// 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`](https://github.com/Realytics/fork-ts-checker-webpack-plugin). It will not increase compile time because it forks type checking in a separate process

```js
// 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
  }
})
```

---
_Source: https://npm.io/package/@zeit/next-typescript · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._