題材

https://www.udemy.com/course/nextjslaravelweb/

500 (Internal Server Error)がなかなか解決できない

画像の通りエラーが表示されているが、原因の特定ができず、1時間くらい詰まった

解決策
Reactでaxiosがインポートされていないことが原因だった。
import axios from "axios";を追加することで解決できた。

どうやらフォームに入力された値をそのままGETパラメータに渡した場合にも同じエラーが発生するらしい
以下でいうsearchQueryの部分がそれ

const response = await axios.get(`https://api.themoviedb.org/3/search/multi?api_key=${process.env.TMDB_API_KEY}&query=${searchQuery}&language=ja-JP`);

encodeURIComponentでエンコードして渡すことで、解決できる

const response = await axios.get(`https://api.themoviedb.org/3/search/multi?api_key=${process.env.TMDB_API_KEY}&query=${encodeURIComponent(searchQuery)}&language=ja-JP`);

api.phpで以下のようにルーティングしたら、Controller側の引数の変数名も同じ名前にする必要がある
公式サイト：ルートモデルバインディング

api.php

ReviewController

フロント側でDBから取得されたデータをコンソール出力

例えばController側だけ$reviewIdに変更したら値を取得できない

コンソールに出力された値はnull

画面の名前の右側に投稿日付(更新日付)を表示しようとしたらフォーマットが必要だった。

そもそも

以下のコードで画面にDBにある更新日付を表示させたら、想定と違っていた。

<Grid item>
    {review.updated_at}
</Grid>

解決策

色々試した結果、以下でうまく行くことが分かった（若干のレイアウト崩れは一旦無視）

<Grid item>
    {new Date(review.updated_at).toISOString().replace('T', ' ').split('.')[0]}
</Grid>