Motivation
Reactとサーバを連携させるサンプルコードを書くときに、Railsのコード書くのもなぁー。
という時に使えるかなと思って、今更ながら理解することにしました。
本題
nextの準備自体は、npx create-next-app@latestでサクッと行って、あとはこの記事を読みました。
まずはこんな感じでactionを作りました 明らかに、ブラウザ上では動かなそうなコード(nodeでは動きそう)を書いてみました。
crypto.randomBytes(16)は、ブラウザでも動くみたいですが、pwdは流石に無理かなと思い書いてみました。
また、↑のactionを呼び出すボタンをこんな感じで作ります。
これを、page.tsx辺りで呼び出してあげて、npm run devすると、
こんな感じの画面が開いて、Createのボタンを押したところです↓
↑レスポンスがちゃんと帰ってきてます。
レスポンスヘッダーはこんな感じ↓
Next-Actionというヘッダーが関数を一意に特定しているっぽいですね。
あとは、POSTでリクエストしていることがわかります。
postmanでリクエストするとこんな感じで返ってきます。
bodyも一応こんな感じで入れないとjsonのパースエラーで怒られます。
PWDButtonの方はこんな感じで返ってきます。
ディレクトリ情報がちゃんと見れますね。
商用のコードではやらないでください。(やる人なんていないと思いますが。。。)
最後にコンソールログです。
サーバから帰ってきた結果が、client側のコードで利用できることが確認できると思います。
Discussion