【Next.js】リダイレクトでハマったこと

やりたいこと

クライアントサイドでリダイレクトを使いたかったがエラーが出たので、その対処をする。
下記のコードを実施すると、エラーが発生。

Error: No router instance found.
You should only use "next/router" on the client side of your app.

"use client"
import Router from 'next/router';

export default function SignIn() {
  const router = useRouter();

  async function handleSubmit(e) {
    e.preventDefault();

    try {
      router.push('/'); 
    } catch (error) {
      console.error("Error adding document: ", error);
    }

redirectも使ってみたが、うまく行かず。
ちなみに、redirectはtryの中に入れるとうまく動かないらしいです。ちなみに。

Error: NEXT_REDIRECT

"use client"
import { redirect } from "next/navigation"

export default function SignIn() {
 

  async function handleSubmit(e) {
    e.preventDefault();

    redirect("/")
    // try {
    //   // サインアップ後のリダイレクト
    // } catch (error) {
    //   console.error("Error adding document: ", error);
    // }
  }

解決方法

next/router → next/navigation (2023/12)

参照リンクから以下の方法で対応。
Next.jsにおける、CSRとSSRの理解が足りてないため、現状は理解するところまで落ちていない。
が、おそらくNext13の変更にともなって変更になったと思われる。
これでsignuo完成しました。
深いぜ・・・。

"use client"
import { useRouter } from "next/navigation";

export default function SignIn() {
  const router = useRouter();

  async function handleSubmit(e) {
    e.preventDefault();

    try {
      // サインアップ後のリダイレクト
      router.push('/'); 
    } catch (error) {
      console.error("Error adding document: ", error);
    }

参考

参考ページ
https://chakkun1121.github.io/blog/20230823-nextDedirect
https://zenn.dev/panda_program/scraps/6c66f160636969

以下おまけ
https://zenn.dev/hamo/articles/31133919b987b9
https://qiita.com/TaikiTkwkbysh/items/3a353b306b2eabd5205e
https://zenn.dev/uttk/articles/4649e49f1e6628
https://chaika.hatenablog.com/entry/2021/06/23/083000
https://qiita.com/ke_na/items/ee6a6edd24847c616b62