TypeScriptベースのNext.jsアプリケーションのセットアップ【備忘録】

対話形式でプロジェクトを作成する場合

npx create-next-app@latest

必要に応じて、以下のような追加パッケージの導入も検討する

zod　-　ランタイム型検証

react-query　-　サーバーステート管理

jestと@testing-library/react　-　テスト

prettier　-　コードフォーマット

react-icons　-　人気のあるアイコンライブラリ(技術アイコンを使う時に使ってる)

etc.

プロジェクトの構造

・scr/components/　-　再利用可能なコンポーネント

・src/lib/　-　ユーティリティ関数やヘルパー

・src/types/　-　TypeScript型定義

・src/styles/　-　グローバルスタイル

型安全を高めるために、tsconfig.jsonの設定を厳格にする

開発サーバーを立ち上げる

npm run dev 　#ターミナルで実行し、開発サーバーを立ち上げる

終了はショートカットキーControl+Cを実行させるかターミナルウィンドウを閉じる

npm run build　#ビルドを実行する