Skip to main content

AppRouterによる遷移

Next.js13で登場した新しいルーティングの機能が「App Router」

App Routerとは​

  • ✅App Routerは1フォルダ = 1ページのルーティング。
  • ✅フォルダの中にpage.jsを作るとページができる。
  • ✅ルーティング以外にも追加機能、廃止機能がある。

Pages Routerとの比較​

Pages RouterApp Router
1ファイル = 1ページ1フォルダ = 1ページ
ファイル名がURLになるフォルダ名がURLになる
ファイル名は何でもOKファイル名が決まっている
pagesフォルダを使うappフォルダを使う

例：2ページだけのフォルダ構成​

pages/
├── index.js        --> /
└── about.js        --> /about
app/
├── page.js           --> 「/」トップページ
└── about/
    └── page.js       --> 「/about」ページ

ページの数だけpage.jsが必要ということ

ページ遷移の実装​

app/page.tsxから、day/page.tsxとabout/page.tsxへ遷移するようにボタンを配置する。

ディレクトリ構造は以下。

.
└─ app # アプリケーション
   ├── public # パブリック
   └── src # ソース
       └── app # App Router
           ├── page.tsx # ルートページ
           ├── layout.tsx # 共通レイアウト
           ├── recoilProvider.tsx # recoil
           ├── about ☆
           │   ├── page.tsx 
           │   └── layout.tsx
           └── about ☆
               ├── page.tsx 
               └── layout.tsx
src/app/layout.tsx
export const metadata = {
  title: "app-routerテストページ",
  description: "Next.jsのApp Routerで普通にリンクする",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body className="">{children}</body>
    </html>
  );
}
src/app/page.tsx
'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter();
  return (
    <>
        <button type="button" onClick={() => router.push('/day')}>
          dayへ
        </button>
        <button type="button" onClick={() => router.push('/about')}>
          aboutへ
        </button>   
    </>
  )
}
src/app/day/page.tsx
'use client'

import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter();
  return (
    <>
        <button type="button" onClick={() => router.push('/')}>
          戻る
        </button> 
    </>
  )
}

関数handleClickを定義して記載することもできる。

src/app/about/page.tsx
'use client'
 
import { useRouter } from 'next/navigation'

const About = () => {
  const router = useRouter();

  const handleClick = () => {
    router.push("/");
  };

  return (
    <>
        <button onClick={handleClick}>
          戻る
        </button>
    </>
  );
};

export default About;