Naughty Program Manipulator
    Wondering what’s next for npm?Check out our public roadmap! »

    This package has been deprecated

    Author message:

    Next.js now has built-in TypeScript support that is integrated into the framework by default: https://nextjs.org/docs/basic-features/typescript

    @zeit/next-typescript
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/zeit__next-typescript package

    1.1.1 • Public • Published

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

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

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

    Keywords

    none

    Install

    npm i @zeit/next-typescript

    DownloadsWeekly Downloads

    26,294

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    5.41 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar