Next.jsで画面遷移を行う方法

概要

Next.js(バージョンは14.2.3)で画面遷移を行うのに少し詰まったのでそのような事が今後ないように備忘録として記録を残しておきます。

やりたいこと

今回はボタンを押したらほかのフォルダにあるtsxファイルへ遷移できるようにしたい

フォルダ構造は以下のようになっている

.
└── app/
    ├── page.tsx                      
    └── AnotherPage/
        ├── page.tsx

最初はapp/page.tsxにいる。そのページに設置してあるボタンをクリックするとapp/AnotherPage/page.tsxへ遷移するようにしたい。

やるべきことは2つ

1つ目・[useRouter()]を記述する

まずapp/page.tsxに以下のような記述を行う

const router = useRouter();

そしてapp/page.tsxのbuttonタグに以下のような記述を書く

<button 
  onClick={() => {
      router.push("/AnotherPage")
  }}

このように記述することでボタンをクリックするとアドレスバーに「(現在のURL) + (/AnotherPage)」が打ち込める。

2つ目・遷移を行いたいファイルの名前は必ず[page.tsx]にする

遷移を行いたいファイルの名前は必ず[page.tsx]にしなければならない。そうしないと[404エラー]が出てしまう。

この2つを行えばできるようになったはず・・・！