Posted at

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.jsonnpm 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