「Next.jsの基礎から応用まで！実践的な使い方を徹底解説」

eyecatch125 WEB制作

こんにちは、SouDogです。

Web開発を始めると、Reactを使ったフレームワークとしてNext.jsの名前をよく耳にするでしょう。

本記事では、Next.jsの基本概念から実践的な使い方までを詳しく解説します。

Next.jsは、Reactの拡張フレームワークであり、サーバーサイドレンダリング(SSR)や静的サイト生成(SSG)を簡単に実装できることが特徴です。

また、SEO対策やパフォーマンスの向上にも優れています。

1. Next.jsとは？

Next.jsは、Vercelが開発するReactベースのフレームワークで、以下の機能を提供します。

  • サーバーサイドレンダリング(SSR)：サーバー側でページを生成し、ユーザーに返す
  • 静的サイト生成(SSG)：事前にページを生成し、高速なページ表示を実現
  • クライアントサイドレンダリング(CSR)：通常のReactアプリのように動的なページ更新が可能
  • Incremental Static Regeneration (ISR)：一部のページのみを再生成し、高速なページ更新を実現

Next.js公式サイト

なぜNext.jsを使うのか？

Next.jsを使うメリットには、以下のようなものがあります。

  1. SEOに強い：SSRやSSGを活用することで、検索エンジンに最適化されたページを作成できる。
  2. パフォーマンスが向上：静的サイト生成(SSG)を利用すると、ユーザーに高速なページを提供できる。
  3. 開発が効率化：デフォルトでルーティング機能があり、設定不要でページ遷移ができる。
  4. フルスタック対応：API Routesを使うことで、サーバーサイドの処理も簡単に実装できる。

2. Next.jsの環境構築

Next.jsのプロジェクトを作成するには、Node.jsがインストールされていることを確認した後、以下のコマンドを実行します。

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

このコマンドを実行すると、ローカルサーバーが起動し、http://localhost:3000でアプリが表示されます。

3. Next.jsの基本的な使い方

3.1 ページとルーティング

Next.jsでは、pagesフォルダにファイルを作成するだけで、自動的にルーティングが設定されます。

例えば、pages/about.jsを作成すると、http://localhost:3000/aboutでアクセスできます。

// pages/about.js
export default function About() {
  return <h1>Aboutページ</h1>;
}

3.2 API Routes

Next.jsでは、pages/apiフォルダ内にAPIを作成することができます。

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: "Hello, Next.js!" });
}

これで、http://localhost:3000/api/helloにアクセスすると、JSONレスポンスが返ってきます。

4. データフェッチの方法

Next.jsでは、データを取得するために以下の3つのメソッドを使用できます。

  1. getStaticProps (SSG): ビルド時にデータを取得し、静的ページとして生成する
  2. getServerSideProps (SSR): リクエストごとにデータを取得し、動的なページを提供する
  3. useEffect (CSR): クライアントサイドでデータを取得する

4.1 getStaticPropsを使ったデータフェッチ（SSG）

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

export default function Blog({ posts }) {
  return (
    <div>
      <h1>ブログ一覧</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

5. 実践的なプロジェクトでの活用例

5.1 WordPressとNext.jsを連携（ヘッドレスCMS）

Next.jsは、WordPressのREST APIと連携してヘッドレスCMSとして利用することができます。

export async function getStaticProps() {
  const res = await fetch('https://example.com/wp-json/wp/v2/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

5.2 eCommerceサイトを構築

Next.jsは、ShopifyやWooCommerceと連携してECサイトを構築するのにも適しています。

まとめ

Next.jsは、Reactベースのフレームワークとして、SSR・SSG・ISRを活用できる柔軟な開発環境を提供します。本記事では、基本概念から実践的な使い方までを紹介しました。

ぜひ、Next.jsを活用して、自分のプロジェクトを構築してみてください！

コメント

スポンサーリンク