Next.jsを使用した映画情報アプリの作成

ご指摘いただきありがとうございます。
わからない所は画像の右側のようにカテゴリを（全て、映画、TV）クリックすると
検証ツールを開いた時に映画情報が取得できています。
私の画面（左側）ですとクリックしても映画情報が取得できません。
私の方でも取得できるようにしたいです。
何が原因で何が分かれば解決できるのか正直それすらもわかりません。
試した事はudemyを見ながらですのでコードのタイピングミスがないかの確認はしてあります。
こちらが検証ツールでみれるエラーメッセージになります。
Failed to load resource: the server responded with a status of 404 (Not Found)

質問者さんの言う「検証ツール」は何だか分からないし、何をどうしてそうなったのかも分かりませんが、エラーメッセージが何を言っているかは分かるのでそこのところだけ見てレスします。

Failed to load resource: the server responded with a status of 404 (Not Found)

404 応答というのは、(1) URL のホスト名は正しく名前解決されブラウザからの要求は Web サーバーに届いた、(2) 要求を受け取った Web サーバーは URL に指定されたリソースを探したが見つからなかった、(3) Web サーバーは見つからなかったという応答を返した・・・ということです。

その原因のほとんどは要求した URL が間違っているということなので、そのあたりをチェックしてみてください。

回答いただきありがとうございます。
検証ツールとはディベロッパーツールの事です。
やはりURLが間違っている可能性があると認識されますよね。
自分なりに何度も見直したのですがわからなくて.....
わかりずらい質問にお答えいただきありがとうございました。

Q&A を続けて解決する気があるなら、先に私が書いたように、問題がどこにあるのかの切り分けをして、その部分のコードなりエラーメッセージなりを提示し、何が分からないのか、何が分かれば解決できるのかを書けませんか？

たぶん、

React ⇔ Web API ⇔ DB

というような構成で、ブラウザ (React) から JavaScript の fetch メソッドなどで Web API に要求を出した結果 404 応答が返ってきたのではないかと想像してますが、であればそのあたりのコードを提示するなど詳細情報を提供してください。

がんばります。
import axios from "axios";

export default async function handler (req,res) {
try {
const response = await axios(https://api.themoviedb.org/3/movie/popular?api_key=${process.env.TMDB_API_KEY}&language=ja-JP)
res.status(200).json(response.data);
console.log('取得した結果は...',response.data);
} catch(err) {
console.log(err);
res.status(500).json({message: 'エラーが発生しました'});
}
}
こちらと
import axios from "axios";

export default async(req,res) => {
const {searchQuery} = req.query;
console.log(searchQuery);

if(!searchQuery){
    return res.status(400).json({message: `検索文字がありません`});
}

try {
    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`);
    
    console.log(response.data.results)
    return res.status(200).json(response.data);
}  catch(err) {
        console.log('エラー内容は...',err);
        return res.status(500).json({message: 'サーバー側でエラーが発生しました'});
    }

}
こちらがAPIキーが記述されているコードになります。
これだけ協力して頂いてありがとうございます。

質問者さんの axios のコード（下記の部分）が間違っているのでは？　引数が文字列になってません。　

const response = await axios(https://api.themoviedb.org/3/movie/popular?api_key=${process.env.TMDB_API_KEY}&language=ja-JP)

key を入手してから上の URL の ${process.env.TMDB_API_KEY} を入手した key に差し替えてブラウザのアドレスバーに直打ちして要求してみましたが、key が無効という応答ではありますが、少なくとも 404 応答は返ってきません。（URL は正しい）

こちらの URL の方はそれらしい応答が返ってきています。

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`);

申し訳ございません。
const response = await axios(https://api.themoviedb.org/3/movie/popular?api_key=${process.env.TMDB_API_KEY}&language=ja-JP)
こちらは記入ミスです。
文字列にしてもやはりダメでした。

そもそも何で記入ミスが出てくるのですか？　開発環境のエディタからコピペしてないのですか？　提示したコードが実際と違うというのでは話が通じなくると認識してください。そこは細心の注意を払ってください。

文字列にしてもやはりダメでした。

「文字列にして」とは具体的にどうやったのですか？　やり方は分かってますか？

結果ダメと言うことですが、ダメと言うだけでは分かりません。ダメというのは具体的にどういう事ですか？

私の上のコメントの画像にあるようにブラウザのアドレスバーに URL を直打ちして要求をかけるとどうなりますか？

返信いただき有難うございます！
文字列にしては``で囲む事だと認識しております。
ダメとは変わらず映画情報が取得出来ないて意味です。

『私の上のコメントの画像にあるようにブラウザのアドレスバーに URL を直打ちして要求をかけるとどうなりますか？』
は良く意味がわかりませんでした。（調べてみます）

ダメとは変わらず映画情報が取得出来ないて意味です。

それはこのスレッドであなたを助けようとしている回答者・閲覧者にとっては何の意味もない情報ということが分かりませんか？　404 応答が返ってくるというのが前のあなたの情報でしたよね？　それは同じなのですか？　違うならどのようになったのですか？　それぐらい書けませんか？

改善されないなら自分はこのスレッドから撤退します。

返信いただきありがとうございます。
４０４応答が返ってきます

その画像は何だか分かりませんが、http://localhost:3000/api/searchMedia に要求を出した結果 404 応答が返ってきたように見えます。

一方、あなたが上のコメントで提示したコードの axios の引数に設定されている url は https://api.themoviedb.org/3/movie/popular と https://api.themoviedb.org/3/search/multi でそれとは違います。

先に、問題がどこにあるのかの切り分けをして、その部分のコードなりエラーメッセージなりを提示するように依頼しましたが、問題ではないところを提示しているのでは？　話は通じてますか？

ご教授いただきありがとうございます。
正直自分でもどこが問題かわからないのですがhttp://localhost:3000/api/searchMediaが記載してあるコードが怪しいのでしょうか。
わかりづらい中お答えいただきありがとうございます。

正直自分でもどこが問題かわからないのですが

そこを質問者さんに頑張って探してもらわないと、ここのような文章でやり取りする Q&A サイトで回答者・閲覧者がアドバイスして解決するというのは無理があります。

最初の回答で書きましたように、問題がどこにあるのかの切り分けをして、その部分のコードなりエラーメッセージなりを提示し、何が分からないのか、何が分かれば解決できるのかを書いてください。

お答えいただきありがとうございます。
Udemyの方で提供されているhttps://developer.themoviedb.org/reference/intro/getting-startedこちらでございます。
ログイン機能から映画の詳細などは取得できております。
わかりづらい説明だとは思いますがわかる事あれば教えていただければと思います。

なるほど、Udemy提供のAPIなのですね。

起こっている問題は、そのAPIから「映画情報が取得できない」のでしょうか？
つまり、取得するための処理は実行されているものの期待する情報が取得できない、という理解でいいでしょうか？

その場合、まずは最小限のコードでAPIとのリクエストを試してみることをおすすめします。

次の情報が提供されれば、もう少し具体的なことがわかるかもしれません。

• リクエストをしているAPI
• 実際のコード
• 実行結果のログ（コンソールログやデベロッパーツールの表示など）

私の回答欄下のコメントを見てください。「起こっている問題」は 404 応答が返ってくることだそうです（ちょっと疑問ですが）。「リクエストをしているAPI」「実際のコード」もコメントに書いてあります。

【追記】

質問者さんが提示したコードは記入ミスがあるそうなので注意

コメントを追ってみましたが状況が掴めないので整理させてください。

取り組んでいること（推測）

• Udemyのコードを書き写している
• 現時点で取り組んでいるのは、カテゴリをクリックすると映画情報がコンソールに表示される処理
• Udemyの見本はコンソールに映画情報が表示されるが、見本を書き写したコードは同じような結果にならない

回答に必要な情報

対象の機能が具体的にどのようなことをしているのかが正確に把握できていません。
まずは、対象の機能について具体的なコードを記載してください。カテゴリをクリックしたときに何をやっているのかを知る必要があります。

記載は質問本文に追記するのが良いと思います。（他の回答者も参照できます）
コードブロックを使用して読めるように記載してください。（コードブロックの使用は”Markdown記法 チートシート”を参照してください）

コードの状態と回答者とのやり取りに注意してください。試行錯誤して変更していると、回答者との話が合わなくなる可能性があります。