1. Next.jsのhooksフォルダとは？

Next.jsのhooksフォルダとは、カスタムフックと呼ばれる特別な関数をまとめて保存するための場所です。フックとは、ReactやNext.jsで使われる仕組みで、画面の状態を管理したり、便利な処理を部品のように使い回したりできます。

プログラミング未経験の方は、「よく使う作業を一つの箱にまとめておく引き出し」と考えると分かりやすいです。 hooksフォルダを作ることで、どこに何が書いてあるのか迷いにくくなります。

2. hooksフォルダを作る場所

Next.jsでは、hooksフォルダは自由に作れますが、一般的にはプロジェクトの直下、またはsrcフォルダの中に作ります。例えば、pagesフォルダやappフォルダと同じ階層にhooksフォルダを作ると管理しやすくなります。

フォルダ構成を整理することは、本棚にジャンルごとに本を並べるのと同じです。 hooksフォルダがあるだけで、「ここを見れば便利な処理が全部ある」とすぐ分かります。

3. 最初のカスタムフックを作ってみよう

カスタムフックは、useから始まる名前の関数です。ここでは、文字を表示するための簡単なカスタムフックを作ります。


import { useState } from "react";

export function useMessage() {
  const [message, setMessage] = useState("こんにちは");

  return { message, setMessage };
}

（最初は「こんにちは」という文字を管理し、あとから自由に変更できる仕組みです）

4. hooksフォルダのフックをページで使う

作ったカスタムフックは、Next.jsのページやコンポーネントから呼び出して使います。これにより、同じ処理を何度も書かなくて済みます。


import { useMessage } from "../hooks/useMessage";

export default function Home() {
  const { message, setMessage } = useMessage();

  return (
    <div>
      <p>{message}</p>
      <button onClick={() => setMessage("変更されました")}>
        変更する
      </button>
    </div>
  );
}

（画面に文字が表示され、ボタンを押すと表示内容が切り替わります）

5. よく使う処理をhooksにまとめるメリット

hooksフォルダに処理をまとめる最大のメリットは、コードが読みやすくなることです。ページの中には画面表示の内容だけを書き、裏側の処理はhooksに任せられます。

これは、料理で例えると、下ごしらえを別の場所で済ませてから盛り付けをするイメージです。見た目と中身が整理され、ミスも減ります。

6. 複数の値を扱うカスタムフック例

カスタムフックでは、複数の状態をまとめて管理できます。次は、数を増やすためのシンプルな例です。


import { useState } from "react";

export function useCounter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return { count, increment };
}

（ボタンを押すたびに数字が1ずつ増えていく仕組みです）