質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

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

kuralie
kuralie

総合スコア8

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0グッド

0クリップ

190閲覧

投稿2022/12/08 09:03

前提

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

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

nonaka-shu

総合スコア45

uky😍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

kuralie

2022/12/23 03:15

お返事が遅くなってしまい申し訳ありません! わかりやすい回答をありがとうございました!エラーが解決できました。本当に助かりました

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。