Next.js個人備忘録②：TypeScript + Tailwindで構築するNext.jsプロジェクトの手順をまとめてみた

## はじめに
Next.jsは、Reactをベースにしたフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）など、柔軟なレンダリング方式を提供してくれるのが特徴です。

:::note info
**個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。**
:::

個人開発・チーム開発のどちらでも活用されており、SEOやパフォーマンスにも強い影響を与える技術です。

## 書こうと思ったきっかけ
受講中のITスクールで取り組んでいるハッカソンにおいて、Next.js を採用することが決まりました。それに伴い、自分でもキャッチアップが必要となったため、基本的な概念から導入手順までを整理する目的で、この記事を作成しました。

## Next.jsの新規プロジェクト作成手順（TypeScript + Tailwind CSS 編）
今回は、Next.jsで新しいプロジェクトを作成し、TypeScript、ESLint、Tailwind CSSなどを導入する一連の流れを紹介します。

### 使用コマンド
```bash
npx create-next-app@latest my-next-app
```
このコマンドで、Next.jsの最新バージョンを使用して`my-next-app`という名前のプロジェクトを作成します。

### 対話形式の設定内容
コマンドを実行すると、いくつかの質問が表示されます。以下はその内容と選択した回答です：

| 設定項目                           | 回答  | 内容説明                                                   |
|----------------------------------|------|------------------------------------------------------------|
| TypeScript を使用しますか？        | Yes  | 型安全に開発できるTypeScriptを使用。                       |
| ESLint を使用しますか？           | Yes  | コードの品質を保つための静的解析ツール。                   |
| Tailwind CSS を使用しますか？     | Yes  | ユーティリティファーストなCSSフレームワーク。              |
| コードを `src/` ディレクトリ内に配置しますか？ | Yes  | ソースコードを整理された構成に。                          |
| App Router を使用しますか？      | Yes  | Next.jsの推奨ルーティングシステム。                        |
| Turbopack を使用しますか？       | Yes  | 高速な開発体験を提供する新しいビルドツール（試験中）。     |
| インポートエイリアスをカスタマイズしますか？ | Yes  | `@/` で `src/` を参照できるように設定。                    |
| どのエイリアスを使用しますか？    | @/*  | `@/components` などの記述が可能に。                        |

### 自動インストールされるパッケージ
- 本体パッケージ：
  - `react`
  - `react-dom`
  - `next`

- 開発用パッケージ：
  - `typescript`
  - `@types/node`, `@types/react`, `@types/react-dom`
  - `tailwindcss`, `@tailwindcss/postcss`
  - `eslint`, `eslint-config-next`, `@eslint/eslintrc`

### 作成完了メッセージの一例
```bash
Success! Created my-next-app at /Users/hondaakiratarou/Desktop/my-next-app
```
このメッセージが表示されれば、プロジェクトの作成は成功です。`cd my-next-app`でプロジェクトディレクトリに移動し、`npm run dev`で開発サーバーを起動できます。

### 次のステップ
1. `cd my-next-app` でプロジェクトディレクトリに入る
2. `npm run dev` で開発サーバーを立ち上げる
3. `http://localhost:3000` にアクセスし、アプリの初期画面を確認

このように、create-next-appを使えば、モダンな開発環境を数分で準備できます。今後はコンポーネントの作成やルーティングの追加など、自分のアプリケーションに合わせてどんどんカスタマイズしていきましょう。

## ディレクトリ構成（例）
```
my-next-app/
├── pages/
│   ├── index.js
│   └── about.js
├── public/
├── styles/
├── components/
└── next.config.js
```

## サーバーサイドレンダリング（SSR）
`getServerSideProps` を使うと、ページがリクエストされるたびにデータを取得して表示できます。
```js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}
```

## 静的サイト生成（SSG）
ビルド時にデータを取得するには `getStaticProps` を使います。
```js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}
```

## API Routes（バックエンド的な使い方）
`pages/api/hello.js` のようにすると、簡単なAPIエンドポイントを定義できます。
```js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from API!' });
}
```

## まとめ
Next.jsは、Reactをさらに発展させて、より本番向けのWebアプリケーション開発に特化したフレームワークです。

:::note warn
**SSRやSSGなどの高度な機能を簡単に使えることから、これからのフロントエンド学習・実務には必須のツールだと感じています。**
:::

今後は、認証（NextAuth.js）やCMS連携（例：microCMS）などの応用例についても試してみたいと思っています！