初めに
未経験でCSSとＨＴＭＬしか触ったことのない主婦が
chatGPTと二人三脚で頑張って環境設定をした覚書になります。
この記事では、Next.js と TypeScript を使用した新しいプロジェクトの設定方法を説明します。
事前準備
まずはじめに、Node.js と npm がインストールされていることを確認しましょう。インストールされているかどうかを確認するためには、以下のコマンドをターミナルで実行します：
node -v
npm -v
これらのコマンドはそれぞれ、Node.js と npm のバージョンを表示します。エラーメッセージが表示される場合、Node.js と npm をインストールする必要があります。
プロジェクトの作成
プロジェクトの作成は、create-next-app コマンドを使用して行います。以下のコマンドをターミナルで実行します：
npx create-next-app@latest --typescript todo-app
これにより、Next.js と TypeScript の設定が行われた新しいプロジェクトが"todo-app"という名前で作成されます。
初期設定の質問
プロジェクトの作成中にいくつかの質問が表示されます。以下に、それぞれの質問と推奨される回答を示します：
-
Would you like to use ESLint with this project?：Yes を選択します。ESLint はコードの品質を向上させるための静的解析ツールです。 -
Would you like to use Prettier with this project?：Yes を選択します。Prettier はコードのフォーマットを自動的に整形してくれるツールです。 -
Would you like to install the types for React (DefinitelyTyped)?：Yes を選択します。これにより React の型定義がインストールされ、TypeScript との互換性が向上します。 -
Would you like to use Tailwind CSS with this project?：No を選択します。Tailwind CSS はユーティリティファーストの CSS フレームワークであり、今回は Material-UI を使用します。 -
Would you like to usesrc/directory with this project?：Yes を選択します。これにより、ソースコードはsrc/ディレクトリに配置され、プロジェクトの構成が整理されます。 -
Use App Router (recommended)?：Yes を選択します。Next.js のルーティング機能は、シングルページアプリケーションでも役立つ場合があります。 -
Would you like to customize the default import alias?：No を選択します。必要に応じて後から設定を変更することが可能です。
設定が終了すると、必要な依存関係がインストールされ、新しい Next.js プロジェクトが作成されます。