AppRouterなNext.jsで新しいページを作ってリンクを貼るやつ入門

シリーズのトップは↓こちら

前回の記事は↓こちら

たまたまプライベートで人にAppRouterなNext.jsを叩き込む機会がありまして、せっかくなので再びこの場をお借りしていっしょに復習します。

前回までのポイント（再掲）（抜粋）

• cd
  • フォルダの中に入る
• npm run dev
  • （作ってる途中の）Next.jsを動かす
  • だいたいhttp://localhost:3000で見れる

今回のポイント

• src/app/名前/page.tsx
  • 新しいページを作る
• <Link href="リンク先">リンクにする内容</Link>
  • HTMLのaみたいなもの

新しいページを作る

src/app/URLにしたい名前/page.tsxのようにするとhttp://localhost:3000/URLにしたい名前とすることができます。

例えばここではsrc/app/cart/page.tsxとしてみます。

src/app/cart/page.tsx

export default function Home() {
  return (
    <>
      empty
    </>
  );
}

中身は何でもいいので、ここではemptyとでもしておきます。

リンクを貼る

src/app/page.tsxにいくつか追加してこのようにします。

src/app/page.tsx

import Image from "next/image";
import icon from './icon_in_app.png';
import Link from 'next/link';

export default function Home() {
  return (
    <>
      hello world
      <Image src="/icon_in_public.png" alt="just an ordinary icon" width={100} height={100} />
      <Image src={icon} alt="just an ordinary icon" />
      <Link href="/cart">cart</Link>
    </>
  );
}

まず上の方にこのimportを追加しました

src/app/page.tsx（抜粋）

import Link from 'next/link';

これはリンクを貼るために必要です。

次にリンクを貼りたい場所に

src/app/page.tsx（抜粋）

<Link href="/cart">cart</Link>

これを書きました。

ここでhref="/cart"としていますがこれは先程src/app/cart/page.tsxを作ったからです。このcartの部分をそろえます。

リンクを踏んでみる

まずは（まだ動かしていなければ）ターミナルでnpm run devを動かしておきます。

画像の下にcartの文字があります。全然リンクに見えませんがリンクにはなっているので、これをクリックしてみます。

新しく作った画面に遷移することができました🎉

そしてURLは……

http://localhost:3000/cartになっています🎉

このcartがsrc/app/cart/page.tsxのcartの部分です。

今回のポイント（再掲）

• src/app/名前/page.tsx
  • 新しいページを作る
• <Link href="リンク先">リンクにする内容</Link>
  • HTMLのaみたいなもの

参考