はじめに

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

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

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

書こうと思ったきっかけ

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

基本構成と特徴

Reactベースのフレームワーク
SSR（サーバーサイドレンダリング）対応
SSG（静的サイト生成）対応
API Routes でバックエンド機能も一部実装可能
自動ルーティング（pages ディレクトリ構成）
TypeScript, Tailwind CSSなどとの統合が容易

導入手順（初回）

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

これで localhost:3000 でアプリケーションが立ち上がります。

ディレクトリ構成（例）

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）などの応用例についても試してみたいと思っています！