1. 環境構築

今回の個人開発では、React / Next.js / TypeScript の基礎力向上を目的として Next.js プロジェクトを作成した。

Next.js にはプロジェクト作成用のCLIが用意されているため、以下のコマンドを使用してプロジェクトを作成した。

# Next.js プロジェクト作成
npx create-next-app@latest study-tracker

プロジェクト作成時にはいくつかの設定を選択する必要がある。

今回は以下の設定で作成した。

TypeScript → Yes
ESLint → Yes
Tailwind CSS → Yes
src directory → Yes
App Router → Yes

この設定により、以下の技術構成のプロジェクトが自動生成される。

• Next.js
• React
• TypeScript
• Tailwind CSS
• ESLint

2. プロジェクト起動

プロジェクト作成後、開発サーバーを起動する。

# プロジェクトディレクトリへ移動
cd study-tracker

# 開発サーバー起動
npm run dev

開発サーバー起動後、ブラウザで以下のURLへアクセスする。

<http://localhost:3000>

Next.js の初期画面が表示されれば、環境構築は成功。