コンポーネント指向 Next.js 実践活用

Next.js Javascript フロントエンド

目次: 1. はじめに 2. Next.jsとは？ 3. コンポーネント指向とは？ 4. Next.jsのコンポーネントの基本 5. Next.jsでのコンポーネント指向開発 6. 実例：ヘッダーコンポーネント作成 7. まとめ

はじめに

この記事では、ReactベースのフレームワークであるNext.jsを用いたコンポーネント指向開発について解説します。

Next.jsとは？

Next.jsはReactを基盤としたJavaScriptフレームワークで、サーバーサイドレンダリングや静的サイト生成などが容易に行えます。

import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>My Next App</title>
      </Head>
      <h1>Hello, World!</h1>
    </div>
  )
}

上記の例では、<Head>タグを使ってHTMLの<head>セクションを編集しています。これもNext.js特有の機能です。

コンポーネント指向とは？

コンポーネント指向設計（Component-Oriented Design）では、システムを再利用可能な部品（コンポーネント）に分割します。これら各部品が独立して動作し、一緒に組み合わせることで全体的な機能を実現します。

Next.jsのコンポーネントの基本

ReactおよびNext.jsでは、UI要素は個々の"components"（コンポ―ネント）として表現されます。以下に単純なReact/Next.jsコード例を示します：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default function App() {
  return (
    <>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
    </>
  );
}

この例では、Welcomeという名前のコンポーネントを作成し、それをAppコンポーネント内で再利用しています。

Next.jsでのコンポーネント指向開発

Next.jsはReactベースなので、自然とコンポーネント指向開発が可能です。各ページは個々のReactコンポーネントとして表現され、さらにその中に小さなReactコンポーネントが含まれます。

実例：ヘッダーコンポーネント作成

以下に、再利用可能なヘッダーコンポーネントを作成する具体的なNext.jsのコード例を示します：

// components/Header.js
export default function Header({ title }) {
  return (
    <header>
      <h1>{title}</h1>
    </header>
  );
}

// pages/index.js
import Header from '../components/Header';

export default function Home() {
  return (
    <div>
      <Header title="Welcome to My Next App!" />
      {/* Other components go here */}
    </div>
  );
}

この例では、ヘッダーコードを共通化し別ファイル（Header.js）に分けています。そしてそれをindexページからインポートして使用します。

まとめ

Next.jsはReact上に構築されたフレームワークであり、強力なUI構築能力を持つことから、効率的かつ組織的な方法でウェブアプリケーションやウェブサイトを開発するための優れた選択肢です。特に大規模プロジェクトやチーム作業ではその真価が発揮されます。