Next.jsで共通の初期処理を作成する

2024/02/04

カスタムフックを利用して、Next.jsの各ページで共通の初期処理を行う方法です。

以下の例ではカスタムフック useCommonInitialization を作成し、その中で何らかの初期化処理（例えば、ユーザー情報のロードや状態の設定）を行っています。このフックを各ページコンポーネントで呼び出すことで、共通の処理を実行します。

カスタムフックの作成

hooksフォルダに共通処理を定義します。

// hooks/useCommonInitialization.js
import { useEffect } from 'react';

const useCommonInitialization = () => {
    useEffect(() => {
        // ここに共通の初期処理を記述します。
        console.log('共通の初期処理を実行');

        // 例: ユーザーデータのロードや状態の設定など
        // fetchData();
        // initializeState();
    }, []);


    // 必要に応じて何かを返すこともできます（例: 状態、関数など）
};

export default useCommonInitialization;

カスタムフックを使用

各ページで関数を呼び出し、ページがロードされるたびに共通の初期処理を実行できるようにします。

// pages/index.js
import useCommonInitialization from '../hooks/useCommonInitialization';

const HomePage = () => {
    useCommonInitialization(); // フックを呼び出し

    return (
        <div>
            <h1>ホームページ</h1>
            {/* ページの内容 */}
        </div>
    );
};

export default HomePage;

// pages/about.js
import useCommonInitialization from '../hooks/useCommonInitialization';

const AboutPage = () => {
    useCommonInitialization(); // フックを呼び出し

    return (
        <div>
            <h1>アバウトページ</h1>
            {/* ページの内容 */}
        </div>
    );
};

export default AboutPage;