前提・実現したいこと
Next.js×MicroCMSで自分のバイト先のドリンクアプリを開発しています。
そこで、MicroCMSのDELETE APIを用いて、コンテンツの削除をAPI経由で行うことが目標です。
JavaScriptでDELETE APIが未対応なので、Next.jsで取得した値(id)をPHPに渡し、処理を終えたらNext.jsに返す非同期処理を行いたいです。
発生している問題・エラーメッセージ
POST http://localhost:3000/pages/api/Main.php 404 (Not Found)
下記はconsole.logの結果
Error: Not Found
at Request.eval (client.js?f551:470)
at Request.Emitter.emit (index.js?92f8:145)
at XMLHttpRequest.eval
該当のソースコード
Next.js
1 2 3//質問該当部分以外のコードは省略しています。 4 5 6 7import request from "superagent"; 8 9export const WineLists: React.FC<Props> = (props) => { 10 const handleDelete = async (deleteId: string) => { 11 try { 12 await request 13 .post("../../pages/api/Main.php") 14 .type("application/json") 15 .send({ id: deleteId }) 16 .end((res) => { 17 console.log(res); 18 // stateを更新する 19 }); 20 } catch (error) { 21 console.log(error.message); 22 } 23 }; 24 25 return ( 26 <div> 27 <button onClick={() => handleDelete(data.id)}>削除</button> 28 </div> 29 30 31 ); 32}; 33
PHP
1<?php 2 require_once('vendor/autoload.php'); 3 4 Dotenv\Dotenv::createImmutable(__DIR__)->load(); 5 header('X-MICROCMS-API-KEY:'.$_ENV["X_MICROCMS_API_KEY"].'; Content-Type: application/json; charset=utf-8'); 6 7 $client = new \Microcms\Client( 8 "ikgroup", 9 $_ENV["X_MICROCMS_API_KEY"] 10 ); 11 12 if($_POST["id"]){ 13 $post_id = $_POST["id"]; 14 $result = $client->delete("wine", $post_id); 15 echo json_encode($result); 16 } 17?> 18
試したこと
●superagentについてドキュメントを確認し、post送信について調べた。
●Next.js側からidを渡さすに、PHPのファイルで$post_idの部分に既知のidを入れて実行すると、MicroCMSのコンテンツが削除されたことを確認した。→Next.js側からの値の受け渡しに問題があると思います。。。
補足情報(FW/ツールのバージョンなど)
Next.js 12.0.4
superagent 7.0.1
●うまくいかない推測としては、Next.js側で、request.post(url). ...のurl部分に原因があると考えていますが、長考した結果解決が難しいと判断したので質問させていただきました。
サーバーサイドは初心者です。
今回の開発では削除機能は必須だったのでPHPは現在実装している削除機能のみで使用する予定です。
おそらく初歩的なエラーで、至らない点たたあるかと思いますが、ご教授していただけると幸いです。
よろしくお願いいたしたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。