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

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

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

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

MicroCMS

MicroCMSとは、APIベースのヘッドレスCMSです。日本製のため、デフォルトで日本語に対応しており、サポートも豊富。管理画面でも作成したコンテンツなどが見やすくシンプルで、APIの管理がしやすい点も特徴です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

1626閲覧

Next.jsの値をPHPへ渡したい

mahimiya

総合スコア32

Next.js

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

MicroCMS

MicroCMSとは、APIベースのヘッドレスCMSです。日本製のため、デフォルトで日本語に対応しており、サポートも豊富。管理画面でも作成したコンテンツなどが見やすくシンプルで、APIの管理がしやすい点も特徴です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2022/01/13 10:06

前提・実現したいこと

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は現在実装している削除機能のみで使用する予定です。
おそらく初歩的なエラーで、至らない点たたあるかと思いますが、ご教授していただけると幸いです。
よろしくお願いいたしたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

proxyを使ってjsからphpに値を渡すことができました

投稿2022/01/20 08:06

mahimiya

総合スコア32

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問