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

はじめに

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

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

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

書こうと思ったきっかけ

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

Next.jsの新規プロジェクト作成手順（TypeScript + Tailwind CSS 編）

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

使用コマンド

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

作成完了メッセージの一例

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 を使うと、ページがリクエストされるたびにデータを取得して表示できます。

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

静的サイト生成（SSG）

ビルド時にデータを取得するには getStaticProps を使います。

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エンドポイントを定義できます。

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from API!' });
}

まとめ

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

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

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