Next.js + TypeScriptのプロジェクトを作成する

今回は、Next.js + TypeScriptでプロジェクトを作成する方法をメモ代わりに書いていきます。

前提

Node.jsはインストール済みで、npmコマンドが使えるのが前提で進めていきます。

Next.jsのプロジェクト作成

任意のディレクトリに、Next.jsのプロジェクトディレクトリを作成します。

Next.jsのプロジェクトは以下のコマンドで作成できます。

npx create-next-app project-name

project-nameの部分は任意のものに書き換えてください。

TypeScriptをインストール

お次は、インストールされたNext.jsのプロジェクトを、TypeScriptに対応させていきます。

ターミナルでプロジェクトディレクトリに入り、npmでTypeScriptをインストールします。

cd project-name

npm install -D typescript @types/react

TypeScriptがインストールできたら、プロジェクト直下にtsconfig.jsonファイルを作成します。

次に、デフォルで入っているファイルを編集していきます。

pagesフォルダに入っているjsファイルの拡張子をtsxに変更します。

index.tsxファイルでエラーが表示されるかもしれませんが、無視して大丈夫です。

実行

では、実行してみましょう。

npm run dev

http://localhost:3000にアクセスして、Welcomeページが表示されれば完了です。

実行後は、index.tsxのエラーも消えているはずです。

ポート番号を変更したい場合は、package.jsonを編集します。

"dev": "next dev",

これを、以下のように変更します。

"dev": "next dev -p 5000",

以上です。簡単ですね。