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