本PJではNextJS公式チュートリアルを元に実施します
今回はchapter1~2までの内容となります！
1. 環境構築とプロジェクト構成について
まずはプロジェクトのセットアップと、基本的なファイル構成のお話。
🚀 プロジェクトの始め方
今回は pnpm を使って、Vercelが用意してくれているテンプレートからプロジェクトを作成しました。
Next.jsのプロジェクトを作成（テンプレート使用）
npx create-next-app@latest nextjs-dashboard --example "[https://github.com/vercel/next-learn/tree/main/dashboard/starter-example](https://github.com/vercel/next-learn/tree/main/dashboard/starter-example)" --use-pnpm
必要なパッケージをインストール
pnpm i
開発サーバーを起動
pnpm dev
📂 ファイル階層の役割
各フォルダの役割を、機能的な目的で整理し直しました。
/app
アプリケーションの心臓部です。ユーザーがブラウザで見るページや、ページの骨格となるレイアウト、主要なロジックがここに集約されます。
/app/lib
共通ライブラリや便利ツールを保管する場所です。データベースとの連携、外部APIとの通信、繰り返し使う計算処理など、特定のUIに依存しない再利用可能なコードをここにまとめます。
/app/ui
UIコンポーネントの専用置き場です。ボタン、フォーム、カード、ヘッダーといった、アプリケーション全体で再利用する視覚的なパーツを格納します。デザインシステムのような役割を担うフォルダです。
/public
静的アセットの公開フォルダです。画像、フォント、robots.txtなど、ビルドプロセスを経ずに直接アクセスされるファイルを配置します。Webサーバーのルートディレクトリに相当します。
静的アセットとは
静的アセットとは、サーバー側で処理や変更が加えられることなく、そのままの形でユーザーに配信されるファイルのことです。「静的（Static）」という名前の通り、誰がいつアクセスしても内容は変わりません。🎨 CSSでのスタイリングについて
それぞれのスタイリング手法のメリットと使い分けに重点を置いて解説します。
グローバルCSS
アプリケーション全体で共通のデザイン基盤を定義します。bodyタグのフォントファミリーや背景色、基本的なリセットCSSなど、プロジェクトの「お約束」となるスタイルをここで一元管理します。
Tailwind CSS
ユーティリティファーストという設計思想に基づいたCSSフレームワークです。flexやpt-4（padding-top: 1rem）のような小さなクラスをHTMLに直接書き込むことで、CSSファイルをほとんど書かずに迅速にUIを構築できます。
CSSモジュール
スタイルの影響範囲をコンポーネント内に限定（スコープ化）するための仕組みです。コンポーネントごとにCSSファイルをペアで作成し、クラス名が自動的に一意になるため、意図しないスタイル上書きや命名の衝突を構造的に防止します。
clsx (ライブラリ)
条件に応じてクラス名を動的に組み立てるためのヘルパー関数です。例えば、propsの値に応じて「通常ボタン」「無効化ボタン」「ローディング中ボタン」のスタイルを付け替える、といった状態に依存したスタイリングを、クリーンで可読性の高いコードで実現できます。
今回はここまで！
ご覧いただきありがとうございます！