Next.js+TypeScriptでの環境構築

Next.jsとTypeScriptで環境構築を行う手順を開発しています。

Next.jsとは？

Reactでサーバーサイドレンダリングを行うフレームワーク Next.js公式サイト

Next.jsとTypeScriptでの環境構築の手順一覧

今回の環境構築はNext.jsを触ってみるのに最低限のものをインストールしています。

環境構築の前準備

  • リポジトリ作成
  • package.jsonを生成
$ npm init

react関連をインストール

  • reactをインストール
  • react-domをインストール

ここの手順でインストールしたツール

$ npm install --save next react react-dom

TypeScriptとSassをインストールする

TypeScriptを導入するのでファイルの拡張子に注意.tsx

ここの手順でインストールしたツール

$ npm install --save-dev @zeit/next-typescript @zeit/next-sass node-sass
$ npm install --save-dev typescript @types/react @types/node

ディレクトリとファイルを作成・更新する

  • pagesディレクトリを作成
  • index.tsxを記載する
  • package.jsonを更新する
$ mkdir pages
＄ vim pages/index.tsx

とりあえずHello Worldをかく

export default () => <div>Hello World</div>

package.jsonにスクリプトを記載する。

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

スクリプトを実行する

記載したスクリプトを実行

$ npm run dev

実行結果 http://localhost:3000/にアクセス

スクリーンショット 2020-06-24 18.57.40.png

Next.jsの立ち上げができました。 index.tsxに記載したHelloWorldが表示できました。

gitignoreを記載

.gitignoreに.nuxtとnode_modulesを追加しgitの管理から除外する

.gitignoreに下記を記載
.next
node_modules

ここまで完了すればひとまず環境構築が完了です。