🐱

Next.jsのApp Routerで普通にリンクする

2023/10/02に公開

Next.js

TypeScript

App Router

tech

page-routerサンプルのhello-worldに似たリンク構造をApp Routerで作ります。

npx create-next-appから作成します。
npx create-next-app --typescript

質問	入力内容
√ What is your project named?	app-router-link
√ Would you like to use ESLint?	Yes
√ Would you like to use Tailwind CSS?	Yes
√ Would you like to use `src/` directory?	Yes
√ Would you like to use App Router? (recommended)	Yes
√ Would you like to customize the default import alias?	No

app-routerでは、page.tsxがルートページとなるので、about,day各ディレクトリにpage.tsxを配置しました。app/page.tsxから、day/page.tsxとabout/page.tsxへリンクするようにボタンを配置します。
ディレクトリ構造は以下となります。

src
    └─app
        │  favicon.ico
        │  globals.css
        │  layout.tsx
        │  page.tsx
        │
        ├─about
        │   page.tsx
        │
        └─day
            page.tsx

cssは以下のデフォルト値にしておきます

src/spp/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

src/app/layout.tsx

import "./globals.css";
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>
  );
}

'use client'を記載し、クライアントであることを明示しないといけません。また、リンクに使用するモジュールは、'next/navigation'となります。next/linkから代わりました。

src/app/page.tsx

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
const router = useRouter()
  return (
    <>
        <button type="button" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 m-4 rounded-full" onClick={() => router.push('/day')}>
        dayへ
        </button>
        <button type="button" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 m-4 rounded-full" 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" className="bg-red-500 hover:bg-red-700 text-white 
        font-bold py-2 px-4 m-4 rounded-full" 
        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 (
    <div>
      <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full m-4" 
      onClick={handleClick}>戻る</button>
    </div>
  );
};

export default About;

以上となります

Discussion