Create a Next.js Appの続きです。

Learn | Next.js

---

• [TypeScriptのインストール]
• [.js ⇒ .tsxに変換]
• [ESLintも導入してみた]

---

TypeScriptのインストール

1. ディレクトリ内でtscofig.jsonを作成

   touch tsconfig.json
   

   リスタート

   npm run dev
   

2. TypeScriptをインストール(npmにしました。yarnでも可)

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

   added 8 packages, removed 9 packages, changed 4 packages, and audited 178 packages in 24s
   
   73 packages are looking for funding
     run `npm fund` for details
   
   found 0 vulnerabilities
   

変更になるところ

1. Static Generation(静的サイト生成) と Server-side Rendering(サーバーサイドレンダリング)

• getStaticProps⇒GetStaticProps

• getStaticPaths⇒GetStaticPaths

• getServerSideProps⇒GetServerSideProps

2. Appのカスタマイズ

   pages/_app.jsをpages/_app.tsxに変換し、built-in type(プリミティブ型) AppPropsを使用

.js ⇒.tsx に変換

以下のファイルを全部.tsx に書き換え

• date.js
• layout.js
• posts.js
• [id].js
• index.js
• _app.js
• hello.js

commitはこんな感じ。
next-env.d.ts は自動的に生成されるようです。

再起動します

% npm run dev

> dev
> next

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.

We detected TypeScript in your project and created a tsconfig.json file for you.は

tsconfig.jsonがないから作ったよ、みたいな感じでした(最初に作ったつもり)でしたがタイポミスってた)

Vercelで引っかかる

hello.tsxのディレクトリを間違えていた( ✕：posts/、○：posts/api )ので、変更して再度コミット・プッシュ

Mergeできました！

ESLintも導入してみた

1. package.jsonを編集

   {
     "private": true,
     "scripts": {
       "dev": "next",
       "build": "next build",
       "start": "next start",
       "lint": "next lint"
     },
   中略
   }
   

2. yarnでインストール

   % yarn lint
   yarn run v1.22.15
   $ next lint
   ? How would you like to configure ESLint? 
   ❯   Base configuration + Core Web Vitals rule-set (recommended)
       Base configuration
       None
   

   recommendedでEnterキー押すとインストール開始

   Installing devDependencies:
   - eslint
   - eslint-config-next
       
   We created the .eslintrc.json file for you and included your selected configuration.
   ready - ESLint has successfully been configured. Run next lint again to view warnings and errors.
   ✨  Done in 124.64s.
   

3. 再びエラー
   I’mの ‘がエスケープ使わないといけないようで、今回は応急処置としてI amにしておく

   ついでに警告で出ているpackage-lock.jsonも必要ないので削除。
   
   Merge成功！やはりESlint入れたほうが型チェック入るのでよさげ