Next.js入門４ Hooks

記事一覧

1. Next.js × Docker 最速環境構築
2. Next.js入門１ ページ追加
3. Next.js入門２ コンポーネント
4. Next.js入門３ 無記名関数 & イベントハンドラー
5. Next.js入門４ Hooks
6. Next.js入門５ Todoアプリ（タスク一覧）
7. Next.js入門６ Todoアプリ（タスク追加）
8. Next.js入門７ Todoアプリ（タスク詳細）
9. Next.js入門８ Todoアプリ（タスク編集, 削除）

Hooks

Hooksとは

Next.js（React）で使用できる、便利な機能を追加するための特別な関数
（今回はよく使われるもの3つを紹介）

useState

• page.tsx

"use client";

// useStateをインポート
import { useState } from "react";

function Page() {
  // const [変数名, 関数名] = useState(初期値);
  // 初期値が変数に入る
  const [text, setText] = useState("");

  return (
    <div>
      <input
        className="p-2 rounded-xl border"
        onChange={(e) => {
          // useState(値)のようにすると、変数の値を変更することができる
          setText(e.target.value);
        }}
      />
      {/* 入力値を表示 */}
      <p>入力値: {text}</p>
    </div>
  );
}

export default Page;

以下のように、入力値に応じて表示を動的に変更可能

useEffect

• page.tsx

"use client";

// useEffectをインポート
import { useState, useEffect } from "react";

function Page() {
  const [text, setText] = useState("");
  const [count, setCount] = useState(0);

  // useEffect(関数, 依存配列);
  // 依存配列に指定した変数が更新されると、関数が実行される
  // 依存配列が空の場合は、初回のみ実行される
  useEffect(() => {
    setCount(text.length);
  }, [text]);

  return (
    <div>
      <input
        className="p-2 rounded-xl border"
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
      <p>入力値: {text}</p>
      {/* 文字数を表示 */}
      <p>文字数: {count}</p>
    </div>
  );
}

export default Page;

以下のように依存配列に指定した変数が更新時に関数が実行され、常に文字列を表示し続ける

useRouter

• page.tsx

"use client";

// useRouterをインポート
import { useRouter } from "next/navigation";

function Page() {
  // ルーターを取得
  const router = useRouter();

  return (
    <button
      className="p-3 rounded-xl border"
      onClick={() => {
        // ルーター.push("パス")でページ遷移
        router.push("/");
      }}
    >
      トップページ
    </button>
  );
}

export default Page;

ボタンを押した際にNextのトップページに遷移する