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

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みたいなもの

参考