前回からの続きです。
こちらを参照しました。
TypeScriptのインストール
-
ディレクトリ内でtscofig.jsonを作成
touch tsconfig.jsonリスタート
npm run dev -
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
変更になるところ
-
Static Generation(静的サイト生成) と Server-side Rendering(サーバーサイドレンダリング)
[getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation)⇒GetStaticProps[getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation)⇒GetStaticPaths[getServerSideProps](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering)⇒GetServerSideProps -
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 は自動的に生成されるようです。
書き換えの途中のログ(node)
% npm run dev
> dev
> next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 2.8s (124 modules)
wait - compiling / (client and server)...
event - compiled client and server successfully in 1439 ms (450 modules)
wait - compiling...
error - ./components/date.js
Error: Failed to read source code from /Users/mkk/Programming/Practice/nextjs-blog/components/date.js
Caused by:
No such file or directory (os error 2)
wait - compiling...
error - ./components/date.js
Error: Failed to read source code from /Users/mkk/Programming/Practice/nextjs-blog/components/date.js
wait - compiling...
event - compiled successfully in 6484.2s (98 modules)
wait - compiling / (client and server)...
error - ./pages/index.tsx:2:0
Module not found: Can't resolve '../components/layout'
1 | import Head from 'next/head'
> 2 | import Layout, { siteTitle } from '../components/layout'
3 | import utilStyles from '../styles/utils.module.css'
4 | import { getSortedPostsData } from '../lib/posts'
5 | import Link from 'next/link'
https://nextjs.org/docs/messages/module-not-found
再起動します
% 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.は
tscongig.jsonがないから作ったよ、みたいな感じでした(最初に作ったつもりでしたがタイポミスってた)
Vercelで引っかかる
hello.tsxのディレクトリを間違えていた( ✕posts直下、○posts/api )ので、変更して再度コミット・プッシュ
Mergeできました！
ESLintも導入してみた
-
package.jsonを編集
{ "private": true, "scripts": { "dev": "next", "build": "next build", "start": "next start", "lint": "next lint" }, 中略 } -
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 NonerecommendedでEnterキー押すとインストール開始
ログ
Installing devDependencies:
- eslint
- eslint-config-next
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
info @next/swc-linux-x64-gnu@12.1.0: The platform "darwin" is incompatible with this module.
info "@next/swc-linux-x64-gnu@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
info @next/swc-win32-ia32-msvc@12.1.0: The platform "darwin" is incompatible with this module.
info "@next/swc-win32-ia32-msvc@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
info @next/swc-win32-ia32-msvc@12.1.0: The CPU architecture "x64" is incompatible with this module.
info @next/swc-linux-arm-gnueabihf@12.1.0: The platform "darwin" is incompatible with this module.
info "@next/swc-linux-arm-gnueabihf@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
info @next/swc-linux-arm-gnueabihf@12.1.0: The CPU architecture "x64" is incompatible with this module.
info @next/swc-win32-arm64-msvc@12.1.0: The platform "darwin" is incompatible with this module.
info "@next/swc-win32-arm64-msvc@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
info @next/swc-win32-arm64-msvc@12.1.0: The CPU architecture "x64" is incompatible with this module.
info @next/swc-linux-x64-musl@12.1.0: The platform "darwin" is incompatible with this module.
info "@next/swc-linux-x64-musl@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
info @next/swc-linux-arm64-musl@12.1.0: The platform "darwin" is incompatible with this module.
info "@next/swc-linux-arm64-musl@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
info @next/swc-linux-arm64-musl@12.1.0: The CPU architecture "x64" is incompatible with this module.
info @next/swc-darwin-arm64@12.1.0: The CPU architecture "x64" is incompatible with this module.
info "@next/swc-darwin-arm64@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
info @next/swc-win32-x64-msvc@12.1.0: The platform "darwin" is incompatible with this module.
info "@next/swc-win32-x64-msvc@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
info @next/swc-android-arm64@12.1.0: The platform "darwin" is incompatible with this module.
info "@next/swc-android-arm64@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
info @next/swc-android-arm64@12.1.0: The CPU architecture "x64" is incompatible with this module.
info @next/swc-linux-arm64-gnu@12.1.0: The platform "darwin" is incompatible with this module.
info "@next/swc-linux-arm64-gnu@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
info @next/swc-linux-arm64-gnu@12.1.0: The CPU architecture "x64" is incompatible with this module.
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 148 new dependencies.
info Direct dependencies
├─ eslint-config-next@12.1.0
└─ eslint@8.11.0
info All dependencies
├─ @babel/runtime-corejs3@7.17.8
├─ @babel/runtime@7.17.8
├─ @eslint/eslintrc@1.2.1
├─ @humanwhocodes/config-array@0.9.5
├─ @humanwhocodes/object-schema@1.2.1
├─ @next/eslint-plugin-next@12.1.0
├─ @nodelib/fs.scandir@2.1.5
├─ @nodelib/fs.stat@2.0.5
├─ @nodelib/fs.walk@1.2.8
├─ @rushstack/eslint-patch@1.1.1
├─ @types/json5@0.0.29
├─ @typescript-eslint/parser@5.15.0
├─ @typescript-eslint/scope-manager@5.15.0
├─ @typescript-eslint/typescript-estree@5.15.0
├─ acorn-jsx@5.3.2
├─ acorn@8.7.0
├─ ajv@6.12.6
├─ ansi-styles@4.3.0
├─ argparse@2.0.1
├─ aria-query@4.2.2
├─ array-includes@3.1.4
├─ array-union@2.1.0
├─ array.prototype.flat@1.2.5
├─ array.prototype.flatmap@1.2.5
├─ ast-types-flow@0.0.7
├─ axe-core@4.4.1
├─ axobject-query@2.2.0
├─ balanced-match@1.0.2
├─ brace-expansion@1.1.11
├─ braces@3.0.2
├─ callsites@3.1.0
├─ chalk@4.1.2
├─ concat-map@0.0.1
├─ core-js-pure@3.21.1
├─ cross-spawn@7.0.3
├─ damerau-levenshtein@1.0.8
├─ deep-is@0.1.4
├─ dir-glob@3.0.1
├─ emoji-regex@9.2.2
├─ es-to-primitive@1.2.1
├─ escape-string-regexp@4.0.0
├─ eslint-config-next@12.1.0
├─ eslint-import-resolver-node@0.3.6
├─ eslint-import-resolver-typescript@2.5.0
├─ eslint-module-utils@2.7.3
├─ eslint-plugin-import@2.25.4
├─ eslint-plugin-jsx-a11y@6.5.1
├─ eslint-plugin-react-hooks@4.3.0
├─ eslint-plugin-react@7.29.4
├─ eslint-scope@7.1.1
├─ eslint-utils@3.0.0
├─ eslint-visitor-keys@3.3.0
├─ eslint@8.11.0
├─ esquery@1.4.0
├─ esrecurse@4.3.0
├─ estraverse@5.3.0
├─ fast-deep-equal@3.1.3
├─ fast-glob@3.2.11
├─ fast-json-stable-stringify@2.1.0
├─ fast-levenshtein@2.0.6
├─ fastq@1.13.0
├─ file-entry-cache@6.0.1
├─ fill-range@7.0.1
├─ find-up@2.1.0
├─ flat-cache@3.0.4
├─ flatted@3.2.5
├─ functional-red-black-tree@1.0.1
├─ get-symbol-description@1.0.0
├─ glob-parent@6.0.2
├─ glob@7.2.0
├─ globals@13.13.0
├─ globby@11.1.0
├─ has-flag@4.0.0
├─ import-fresh@3.3.0
├─ imurmurhash@0.1.4
├─ is-bigint@1.0.4
├─ is-boolean-object@1.1.2
├─ is-callable@1.2.4
├─ is-core-module@2.8.1
├─ is-date-object@1.0.5
├─ is-extglob@2.1.1
├─ is-negative-zero@2.0.2
├─ is-number-object@1.0.6
├─ is-number@7.0.0
├─ is-regex@1.1.4
├─ is-shared-array-buffer@1.0.1
├─ is-string@1.0.7
├─ is-symbol@1.0.4
├─ is-weakref@1.0.2
├─ isexe@2.0.0
├─ json-schema-traverse@0.4.1
├─ json-stable-stringify-without-jsonify@1.0.1
├─ json5@1.0.1
├─ jsx-ast-utils@3.2.1
├─ language-subtag-registry@0.3.21
├─ language-tags@1.0.5
├─ locate-path@2.0.0
├─ lodash.merge@4.6.2
├─ merge2@1.4.1
├─ micromatch@4.0.4
├─ natural-compare@1.4.0
├─ object-inspect@1.12.0
├─ object.entries@1.1.5
├─ object.fromentries@2.0.5
├─ object.hasown@1.1.0
├─ optionator@0.9.1
├─ p-limit@1.3.0
├─ p-locate@2.0.0
├─ p-try@1.0.0
├─ parent-module@1.0.1
├─ path-exists@3.0.0
├─ path-key@3.1.1
├─ path-parse@1.0.7
├─ path-type@4.0.0
├─ picomatch@2.3.1
├─ prop-types@15.8.1
├─ punycode@2.1.1
├─ queue-microtask@1.2.3
├─ react-is@16.13.1
├─ regexp.prototype.flags@1.4.1
├─ regexpp@3.2.0
├─ resolve-from@4.0.0
├─ reusify@1.0.4
├─ rimraf@3.0.2
├─ run-parallel@1.2.0
├─ shebang-command@2.0.0
├─ shebang-regex@3.0.0
├─ slash@3.0.0
├─ string.prototype.matchall@4.0.7
├─ string.prototype.trimend@1.0.4
├─ string.prototype.trimstart@1.0.4
├─ strip-bom@3.0.0
├─ strip-json-comments@3.1.1
├─ supports-color@7.2.0
├─ supports-preserve-symlinks-flag@1.0.0
├─ text-table@0.2.0
├─ to-regex-range@5.0.1
├─ tsconfig-paths@3.14.0
├─ tslib@1.14.1
├─ tsutils@3.21.0
├─ type-check@0.4.0
├─ type-fest@0.20.2
├─ unbox-primitive@1.0.1
├─ uri-js@4.4.1
├─ v8-compile-cache@2.3.0
├─ which-boxed-primitive@1.0.2
├─ which@2.0.2
└─ word-wrap@1.2.3
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.
```
- 再びエラー
I’mの ‘がエスケープ使わないといけないようで、今回は応急処置としてI amにしておく
ついでに警告で出ているpackage-lock.jsonも必要ないので削除。
Merge成功！やはりESlint入れたほうが型チェック入るのでよさげ
最後に
短い記事でしたが最後まで見ていただきありがとうございました。
明日はJavaを少しかじっていたときのメモを投稿予定です。