テックブログWizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です。フロントエンドはじめに皆さんこんにちは、フロントエンドエンジニアのWooです。Functionsの実装方法を調べてみました。Functionsとは?Serverlessを直訳すると、「サーバーがない」という意味ですが、実際はサーバーがない訳ではありません。特定のタスクを実行するために、コンピュータを、あるいは仮想マシンにサーバーを設定していますが、実装者はサーバーの管理や運営をする必要がありません。サーバーリソースを意識することがなく、プログラムのみの実装に集中することができます。Functionsではユーザーの認証、フォームの送信、簡単なバックエンド処理からデータベースも実装でき、Vercelで完結することができます。vercel.com本来であればVercelのインストール/vercel.json作成/rootにAPIデータを作成するなど設定が少し必要ですが、Next.jsの良いところはprojectを作成したらpageフォルダの中にapiデータが自動生成されますのでjsかtsファイルを作成して処理を書いていくだけです。devディレクトリーpageフォルダ内にはapiフォルダが生成されhello.jsが作成されることが確認できました。...省略...hello.js中身はnameクエリを受信し、文字列を返すNode.jsの関数がデフォルトで含まれています。})}apiフォルダのjsファイルがそのままapiのurlになる仕様であり、http:localhost:3000/api/helloブラウザ接続でJSONが確認できました。TypeScriptが使えます。})}結果は同じです。POST各関数は、requestを受信し、responseを返す必要があります。なければ、タイムアウトしてしまいます。データを返す最も簡単な方法としては、response.sendを使用します。このメソッドは、テキスト、オブジェクト、またはバッファを受け取ります。codeを変更することができます。いうパッケージを利用してもっと簡単に実装することができます。successの文字列を返してくれるサンプルです。succesの文字列を返してくれるサンプルコードです。});};POSTではなく、直でapiにアクセスする場合は、400エラーになります。Functionsを利用する使い方を調べてみました。FunctionsでPOSTができるのでNext.jsでスピーディーに実装するのも便利そうだと思いました。読者になる関連記事2021-11-18express(nodejs)+node.jsからmysqlに接続してデータベースを作成するバックエンドはexpress(nodejs)を使ってMySqlに接続しクライア...2021-11-08Next.jsのmiddlewareを使ってbasic認証を実装するこんにちは、フロントエンドエンジニアの髙橋です。Workerを使ってOpenAPIに寄り添ったテストを行う。今回は、現在開発しているプロダクトに、テストを導入するにあ...2021-08-31Laravelで初めてのテストとTDDをサクッとやってみる【初心者向け】TDD(テスト駆動開発)が気にはなるけど実践するのはハードルが高...2021-08-05NextAuth.jsでカスタムログインページを実装する方法こんにちは、フロントエンドエンジニアの松尾です。第4回LT会を行いました。(1)リンク利用規約/免責事項このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。はてなブログをはじめよう!wiz012さんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。