next memo

next.js + Typescript 手順メモ

Keita Imatomi
2020-5-15 04:07

基本公式の通りにやる。

プロジェクト作成

  1. プロジェクトを作成する
    $ npx create-next-app
  2. プロジェクトルートにtsconfig.jsonファイルを作成する。
    $ touch tsconfig.json
  3. この状態でnpm run dev すると、以下のようなメッセージがでる。

    It looks like you're trying to use TypeScript but do not have the required package(s) installed. Please install typescript and @types/react by running:

     npm install --save-dev typescript @types/react

    If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).

  4. 言われた通りに typescript のパッケージをインストールする。
    npm install --save-dev typescript @types/react
  5. この状態で再びnpm run dev すると、プロジェクトルートにnext-env.d.tsが作成される。tsconfig.json にデフォルト設定が書き込まれる。
  6. pages/ 以下の .js ファイルを .tsx に書き換える。
  7. 再びnpm run dev するとアプリが起動する

その他

Next.js + Typescript プロジェクトを作るときに、とりあえずやっていること

こちらもどうぞ