Next.js ダイナミックルーティングについて

前提

Next.jsでダイナミックルーティングを作成しようとしています
しかし、不明なエラーでつまづいているので、有識者の方にご教授いただければ幸いです

実現したいこと

ディレクトリ構造

.
├── src
│   ├── components
│   │        ├── Header.tsx
│   │        ├── index.ts
│   │        └── RestaurantCard.tsx
│   ├── mockData
│   │        └── RestaurantData.tsx
│   ├── pages
│   │        └── restaurants
│   │                └── [id].tsx
│   └── types

import Head from 'next/head';
import { useRouter } from 'next/router';
import Restaurant from '../../types/restaurant';
import { mockData } from '../../mockData/RestaurantData';

type Props = {
  restaurant: Restaurant;
};

const RestaurantDetail: React.FC<Props> = ({ restaurant }) => {
  const router = useRouter();
  console.log(router.query.name);

  return (
    <>
      <Head>
        <title></title>
      </Head>
      <p>サンプルコード</p>
    </>
  );
};
export default RestaurantDetail;

pages/restaurants/[id].tsx にダイナミックルーティングを設定したいのですが、うまくいきません
上記のコードでlocalhost:3000/restaurant/1にアクセスすると、しっかり出力できています

発生している問題・エラーメッセージ

この[id].tsxの中に{name}や{description}などの配列を取得したいのですが、以下のエラーが出ます

...略

const RestaurantDetail: React.FC<Props> = ({ restaurant }) => {
  const router = useRouter();
  console.log(router.query.name);

  return (
    <>
      <Head>
        <title>{name}</title>
      </Head>
      <p>{description}</p>
    </>
  );
};

ReferenceError: description is not defined

該当のソースコード

import Restaurant from '../types/restaurant';

export const mockData: Restaurant[] = [
  {
    id: 1,
    name: 'あ',
    description: 'あ',
    price: 1000,
    holidays: ,
    thumbnailUrl: '/images/shop-1.png',
    reviews: [
      { id: 1, content: 'まじうま', userName: '匿名', createdAt: '2022/12/21 2:21' },
      { id: 2, content: 'まじうま', userName: '匿名', createdAt: '2022/12/21 2:21' },
    ],
  },
  {
    id: 2,
    name: '',
    description: '',
    price: 1200,
    holidays: ,
    thumbnailUrl: '/images/shop-2.png',
    reviews: [
    ],
  },
]

試したこと

descriptionやnameが定義されていないことは何となく読み取れるのですが、どのように定義すれば良いのかあまりわかりません。初歩的な質問で申し訳ないのですが、ぜひよろしくお願い致します

行動規範の内容に同意します

回答1件

ベストアンサー

/pages内に配置されるReactコンポーネントが受け取るPropsは同じファイル内で定義されるgetStaticPropsかgetServerSidePropsが返す必要があります。

また、[id].tsx内で使っているnameやdescriptionはpropsで受け取っているrestrauntの中に入っています。

なので、RestaurantDetailを次のように書き換えてしまいましょう。

...略

... 略
const RestaurantDetail: React.FC<Props> = ({ restaurant }) => {
  const router = useRouter();
  console.log(router.query.name);

  return (
    <>
      <Head>
        <title>{restaurant.name}</title>
      </Head>
      <p>{restaurant.description}</p>
    </>
  );
};

しかし、このままではまだ動きません。getServerSidePropsが定義されていないからです。なので、この関数を追加してあげましょう。

import Head from 'next/head';
import { useRouter } from 'next/router';
import Restaurant from '../../types/restaurant';
import { mockData } from '../../mockData/RestaurantData';

type Props = {
  restaurant: Restaurant;
};

const RestaurantDetail: React.FC<Props> = ({ restaurant }) => {
  const router = useRouter();
  console.log(router.query.name);

  return (
    <>
      <Head>
        <title></title>
      </Head>
      <p>サンプルコード</p>
    </>
  );
};
export default RestaurantDetail;

export const getServerSideProps = async (ctx) => {
  const id = ctx.query.id;
  
  return {
    props: {
      restraunt: mockData[id]
    }
  }
}

投稿2022/12/08 09:45