Navigation

📁 React

Next.jsでダイナミックルーティングを実装する方法

📅 7月 8, 2025
👤
⏱ 1 min read

Next.jsでダイナミックルーティングを実装する方法

概要

Next.jsはReactフレームワークの中でも人気の高いものの1つであり、ダイナミックルーティングを実装することができます。この記事では、Next.jsを使用してダイナミックルーティングを実装する方法について解説します。

なぜこの技術/パターンが必要なのか

ダイナミックルーティングを実装することで、動的なURLパスに基づいてコンポーネントをレンダリングすることが可能となります。これにより、柔軟性の高いページ構築やユーザーエクスペリエンスの向上が期待できます。

解決する問題やユースケース

静的なページだけでなく、動的なコンテンツを表示する必要がある場合や、異なるパラメータに基づいて異なるコンポーネントを表示したい場合に、ダイナミックルーティングが役立ちます。

前提知識と必要な依存関係

  • ReactとNext.jsの基本的な知識
  • ルーティングの概念

基本実装


import React from 'react';
import { useRouter } from 'next/router';

const DynamicPage = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Dynamic Page</h1>
      <p>ID: {id}</p>
    </div>
  );
};

export default DynamicPage;

このコードでは、`useRouter`フックを使用してURLのクエリパラメータからIDを取得し、その値を表示する例を示しています。

TypeScript型定義


interface Props {
  // プロップスの型定義
}

interface State {
  // ステートの型定義
}

テストコード


import { render, screen } from '@testing-library/react';
import DynamicPage from './DynamicPage';

test('should render correctly', () => {
  render(<DynamicPage />);
  const headingElement = screen.getByText('Dynamic Page');
  expect(headingElement).toBeInTheDocument();
});

パフォーマンス最適化

Next.jsでは、デフォルトでコード分割と自動的なプリフェッチが行われるため、パフォーマンス面でも優れています。さらに、React.memoやuseMemo、useCallbackを適切に活用することで、不要な再レンダリングを防ぎ、パフォーマンスを向上させることができます。

実践的な応用例

ダイナミックルーティングを活用した実際の応用例として、ブログアプリケーションで個々の記事ページを動的に表示する場合などが挙げられます。

関連技術・参考情報

  • [Next.js 公式ドキュメント](https://nextjs.org/docs)
  • [React.memo 公式ドキュメント](https://reactjs.org/docs/react-api.html#reactmemo)
  • [useMemo 公式ドキュメント](https://reactjs.org/docs/hooks-reference.html#usememo)
  • [useCallback 公式ドキュメント](https://reactjs.org/docs/hooks-reference.html#usecallback)

この記事では、Next.jsを使用したダイナミックルーティングの実装方法やパフォーマンス最適化の手法について紹介しました。Next.jsを活用することで、柔軟かつ効率的なWebアプリケーションの開発が可能となります。

← Back to React