Next.js + TypeScript 環境を爆速で作る

必要なパッケージをインストール

npm init -y
npm i next react react-dom @zeit/next-typescript && npm i -D @types/next @types/react @types/react-dom

設定ファイルの作成

next.config.jsを作成し、以下を記述。

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

.babelrcを作成し、以下を記述。

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

tsconfig.jsonを作成し以下を記述。

{
  "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"
  }
}

package.jsonのnpm scriptを変更

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

コンポーネントを作成

pages/index.tsxを作成し、以下を記述。

export default () => <h1>Welcome to Next.js for TypeScript!</h1>

ローカルサーバー立ち上げ

以下のコマンドを実行し、ローカルサーバーを立ち上げ。

$ npm run dev

http://localhost:3000に、Welcome to Next.js for TypeScript!があれば成功。

もっと爆速に環境を構築したい

ちまちまシャラクセー！！って方は、こちらで。

npx create-next-app --example with-typescript with-typescript-app
npm install
npm run dev

TypeScript Next.js example