テックコード -web関連の情報サイト- 
はじめに
Next.jsは、Vercel社によって開発されたReactベースのフレームワークであり、現代のWeb開発において非常に人気があります。特に、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を簡単に実現できる点が大きな魅力です。本記事では、Next.jsの基本から応用までを詳しく解説し、その強力な機能と活用方法についてご紹介します。
Next.jsの基本概念
Reactとの関係
Next.jsはReactの上に構築されているため、Reactの知識がある開発者にとっては非常に親しみやすいフレームワークです。Reactのコンポーネントベースのアーキテクチャを継承しつつ、SSRやSSGなどの高度な機能を簡単に導入できる点が特徴です。
ファイルベースのルーティング
Next.jsのルーティングは非常に直感的です。pagesディレクトリ内にファイルを配置することで、自動的にルートが生成されます。例えば、pages/index.jsはホームページを、pages/about.jsは/aboutページを表します。これにより、複雑なルーティング設定を手動で行う必要がなくなります。
my-next-app/
├── pages/
│ ├── index.js
│ ├── about.js
│ └── blog/
│ └── [id].js
API Routes
Next.jsでは、同じプロジェクト内にAPIエンドポイントを定義することができます。pages/apiディレクトリ内にファイルを配置することで、簡単にAPIを作成できます。これにより、バックエンドのコードをフロントエンドと統合することが可能です。
/ pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: 'Hello World' });
}
サーバーサイドレンダリング（SSR）
SSRの利点
SSRは、ユーザーがリクエストを送信するたびにサーバー側でHTMLを生成し、ブラウザに送信する方式です。これにより、以下のような利点があります。
- SEOの向上：検索エンジンは完全にレンダリングされたHTMLをインデックスするため、SEOに有利です。
- 初回表示の高速化：ユーザーは初回アクセス時に完全にレンダリングされたページを受け取るため、表示が高速です。
- ユーザー体験の向上：クライアントサイドでのJavaScriptの実行を待たずにページが表示されるため、ユーザー体験が向上します。
実装例
Next.jsでSSRを実装するには、getServerSidePropsという関数を使用します。この関数は、リクエストごとにサーバー側でデータをフェッチし、そのデータをページコンポーネントに渡します。
// pages/index.js
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return { props: { data } };
}
const Home = ({ data }) => (
<div>
<h1>Data from Server</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
export default Home;
静的サイト生成（SSG）
SSGの利点
SSGは、ビルド時にすべてのページを静的ファイルとして生成する方式です。これにより、以下のような利点があります。
- 超高速なパフォーマンス：静的ファイルはCDNから直接提供されるため、ページの読み込みが非常に高速です。
- スケーラビリティ：静的ファイルは簡単にキャッシュでき、多くのユーザーに同時に提供できます。
- コスト削減：サーバー側での処理が不要なため、ホスティングコストが削減されます。
実装例
Next.jsでSSGを実装するには、getStaticPropsという関数を使用します。この関数は、ビルド時にデータをフェッチし、そのデータをページコンポーネントに渡します。
/ pages/index.js
export async function getStaticProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return { props: { data } };
}
const Home = ({ data }) => (
<div>
<h1>Data from Build Time</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
export default Home;
Incremental Static Regeneration（ISR）
ISRの利点
ISRは、静的サイト生成の利点を活かしながら、定期的にコンテンツを更新することができる方式です。これにより、以下のような利点があります。
- 最新のデータ提供：ユーザーに常に最新のデータを提供できます。
- パフォーマンスの維持：静的ファイルとして提供されるため、高速な読み込みが維持されます。
- SEOの向上：検索エンジンは更新されたコンテンツをインデックスできます。
実装例
Next.jsでISRを実装するには、revalidateオプションをgetStaticPropsに追加します。このオプションに指定した秒数ごとにページが再生成されます。
// pages/index.js
export async function getStaticProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return { props: { data }, revalidate: 10 }; // 10秒ごとに再生成
}
const Home = ({ data }) => (
<div>
<h1>Incremental Static Regeneration</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
export default Home;
Next.jsの追加機能
画像最適化
Next.jsは、画像の自動最適化機能を提供しています。next/imageコンポーネントを使用することで、画像の遅延読み込みやサイズ調整が自動で行われ、パフォーマンスが向上します。
import Image from 'next/image';
const MyImage = () => (
<Image
src="/path/to/image.jpg"
alt="My Image"
width={500}
height={300}
/>
);
export default MyImage;
カスタムドキュメントとヘッド
Next.jsでは、カスタムドキュメントを使用してHTMLドキュメント全体を制御できます。これにより、特定のメタタグやスタイルシートを全ページに適用することができます。
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link rel="stylesheet" href="/path/to/styles.css" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Next.jsのデプロイ
Vercelへのデプロイ
Next.jsは、Vercelによって開発されているため、Vercelへのデプロイが非常に簡単です。GitHubリポジトリをVercelにリンクするだけで、自動的にデプロイが行われます。
- Vercelアカウントを作成し、GitHubリポジトリをリンクします。
- リポジトリ内のNext.jsプロジェクトを選択し、デプロイします。
- デプロイが完了すると、VercelのダッシュボードからプロジェクトのURLを確認できます。
その他のホスティングサービス
Next.jsは、他のホスティングサービス（AWS、Netlify、Google Cloudなど）でも簡単にデプロイできます。ビルドした静的ファイルやサーバーサイドのコードをホスティングサービスにアップロードするだけでデプロイが完了します。
 | 作って学ぶ Next.js/React Webサイト構築 [ エビスコム ] 価格:3509円 |
結論
Next.jsは、Reactを基盤とした強力なフレームワークであり、SSRやSSG、ISRなどの高度な機能を簡単に導入できます。これにより、高速でSEOに強いウェブサイトを構築することが可能です。また、ファイルベースのルーティングやAPI Routes、画像最適化など、開発者の利便性を考慮した機能も豊富に備わっています。Reactでの開発を次のレベルに引き上げたいと考えているなら、Next.jsは間違いなく検討すべきツールです。
