ReactからCognitoオーソライザーを使ったAPI Gatewayをコールする | DevelopersIO
情報システム室 進地 です。 ReactからCognitoオーソライザーを設定したAPI Gateway + Lambdaをコールしてみました。 XHRのライブラリにはaxiosを使っています。 Backend AWS CDKコードサンプル lib/someStack.ts import { aws_lambda, Stack, StackProps, Duration } from 'aws-cdk-lib'; import { Construct } from 'constructs'; import { PythonFunction } from '@aws-cdk/aws-lambda-python-alpha'; import { ManagedPolicy, Role, ServicePrincipal } from "aws-cdk-lib/aws-iam"; import
ReactにおけるRef：DOMへのアクセスから命令的APIまで | POSTD
この記事では、ReactにおいてDOMへのアクセスが必要な理由と、その際にRefがどう役立つのかを見ていきます。また、useRef、forwardRef、useImperativeHandleという3つのフックについて説明し、これらを適切に使用する方法を紹介したいと思います。 この記事と同じ内容を扱ったYouTube動画も公開していますので、活字媒体よりも動画視聴を好まれる方はそちらをご覧ください。文字ではなく、アニメーションと音声で同じ概念を解説しています。 この記事は動画形式でも公開しています。 目次 useRefを使用してReactでDOMにアクセスする 親から子にRefをpropとして渡す forwardRefを使用して親から子にRefを渡す useImperativeHandleを使用した命令型API useImperativeHandleを使用しない命令型API Reactには
Next.js + OpenAI API で作った画像生成アプリで遊んでみた | DevelopersIO
OpenAI API と React(Next.js) を利用した簡単な画像生成アプリの作り方を、サンプルコード付きでご紹介しています。 こんにちは、アノテーション テクニカルサポートの Shimizu です。 筆者の前回の記事では OpenAI API を使用した基本的な質問アプリを Next.js で作成しました。 そこで今回は OpenAI の画像生成 API を利用して、テキストで入力した通りの画像を生成してくれるアプリを作って遊んでみました。 本記事ではサンプルコード付きで画像生成アプリの作成手順をご紹介しています。 完成品イメージ 前回と同様に Docker コンテナ上の Next.js 環境で作成したアプリを、ブラウザ上で動かすという手順です。 それでは、いってみましょう！ step1. 事前準備 まず、事前に下記を用意しましょう。 (1) OpenAI のアカウント登録、A
Next.jsのAPI Routesを中間APIとして使う方法
全体の概要 基本的なAPI結合 基本的にはフロント(Next.js)からaxios等を利用して、サーバー側のAPIエンドポイントに対して直接リクエストを送る構成かと思います。 今回紹介するNext.jsのAPI Routesを中間APIとして挟んだ場合 今回紹介する構成は下記のようになっています。 この構成にするメリット・デメリットは後の章で解説をしていきます。 この記事の対象者 フロントエンド初級者から中級者 Next.jsのAPI Routesの基本を学びたい人 セキュリティーを考慮したAPI通信手法について知りたい人 Next.jsのAPI Routesを中間APIとして挟むメリット セキュリティーが強化できる ログの管理ができる APIエンドポイントの抽象化 セキュリティーが強化できる Next API Routesを中間APIとして挟むことで、外部から直接本体のAPIにアクセスさ
React：簡易APIクライアント - Qiita
React でクライアントを書いて、Goサーバーに GET したところ、エラーが出ました。 このエラー blocked by CORS policy については次の記事が参考になりました。 blocked by CORS policyはもう怖くない！！ GoでCORSの設定 Goサーバーの main.go に次のヘッダーをつけたら、 ちゃんと GET できる様になりました。 Go簡易サーバーからReact簡易クライアントで GET できる様になりました。 次は、GET したデータをReactに表示させていきたいと思います。 ここまでのソースコード Go簡易サーバー React簡易クライアント Get したデータを表示 get したデータを表示させるコードを追加しました。useStateを追加しました。 function App() { const [getData, setGetData]
How to Build and Consume an API in Next.js
Go end-to-end with this tutorial covering every part of a simple API’s journey. Gone are the days when you had to create a separate backend for your website. With Next.js file-based API routing, you can make your life easier by writing your API inside a Next.js project. Next.js is a React meta-framework with features that simplify the process of building production-ready web apps. You will see how
Next.js API Routes に Zod を組み込む
バリデーションライブラリである Zod を、Next.js で活用する TIPS の紹介です。筆者が Zod を知り・使い始めたのは、React Hook Form のリゾルバーがきっかけです。ブラウザでバリデーションを行うので、不正な入力値検証を API リクエストが発生する前に実行できます。 この Zod はフロントだけではなく、サーバープロセスでも使用できます。例えば、tRPC・Zodiosなどに見られるように、サーバーへのリクエスト（入力値）を検証しつつ型推論も解決してくれるソリューションとして注目されています。 Next.js API Routes に Zod を組み込む Next.js には REST API の実装手段として、API Routes が提供されています。しかし、reqに含まれる入力値検証は自前で用意する必要があります。この入力値検証に Zod を使用されている方
React(Node js +Express +Reset API)の構成でアプリを作成をしました【CRUD Rest API】 - Qiita
React(Node js +Express +Reset API)の構成でアプリを作成をしました【CRUD Rest API】Node.jsREST-APIReactdatastax C (create) R (read) U (update) D (delete) Get ⇨ /Users get all users Post ⇨ /Users create a new user Get ⇨ /User/:id get single user details Delete ⇨ /User/:id delete a user Put ⇨ /User/:id update a user APIとは ? APIは「Application Programming Interface」の略語。 3つの単語には、それぞれ下記のような意味がある。 アプリケーション： パソコンやスマホの中で動くソフト
Amplify x Next.js の API Routes で AWSクレデンシャル情報を取得してみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 Amplify UI の Authenticator で認証をかけたアプリで、 Next.js の API Routes を利用しているときに「あー、AWSのクレデンシャル情報を利用したいなー！」と思うことはありませんか？私はあります。 例えば、API Routes で aws-sdk を利用して DynamoDB にアクセスするようなケースでは、DynamoDBClientにcredentialsを設定してあげる必要があるので、AWSのクレデンシャル情報が必要になってきます。 今回はこのAWSクレデンシャル情報の取得について書いていきたいと思います。 前提条件 今回試した環境は以下のとおりです。なお、利用している Amplify Hosting の関係でちょっとバージョンが古いです。 next ^11
React-Hook-Form APIを使って、ボタンによるフォーム値の操作を行ってみた | DevelopersIO
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 react-hook-formはReact用のフォームバリデーションライブラリになります。一から実装するよりも、フォーム値の管理や検証が容易になります。ドキュメントも見やすく、人気の高いライブラリです。 今回は、react-hook-formで提供されているAPIをいくつか使用して、ボタンによるフォームの操作を、簡単にまとめてみました。 基本的な使用方法 Next.jsプロジェクトを作成します。 npx create next-app --ts プロジェクトに移動し、react-hook-formをインストールします。 yarn add react-hook-form register react-hook-formでは、useFormフックを使用して、フォームの値を管理します。 register()の引数に、
Next.jsのISRを独自に構築する ~ Cloudflare Workers編（Cache APIの注意点） ~
Next.jsにはIncremental Static Regeneration（以降: ISR）というレンダリングの仕組みが存在します。ところがこれを利用するにはVercel上でNext.jsを使用しないと完璧な動作をしないことは知られています。ですが、このISRの仕組みは従来のSSRよりサーバの処理コストはもちろん、キャッシュという仕組み上レスポンスにも非常に効果のあるものです。 今回はこのISRを独自に構築するための技術を記事として起こしていきます。 本記事の続きとなるものはこちらに記載しておりますので、合わせて御覧ください。 【前提条件】 ISRが何という説明は本記事では行いません。 システム構成上、1記事ですべてを説明するにはボリュームが大きいので複数記事に分けさせて頂きます。 本記事で詳細するシステム構成には一部成約が存在します。 使用するNext.jsもしくはそれに準ずるもの
React + Unsplash APIで画像検索アプリを作ろう
2023年2月7日 JavaScript, React Reactの勉強がてら、高画質な画像を配布しているUnsplashが提供しているUnsplash APIを使って画像検索アプリを作ってみました。その復習に作成手順をまとめてみたので、これからReactを勉強しよう！と思っている方の役に立てれば幸いです！ ↑私が10年以上利用している会計ソフト！ この記事は動画でも解説しています。動画派の方はぜひご覧ください！ 目次 Unsplashとは こんなアプリを作ってみよう 1. Unsplash APIの開発者登録 2. ViteでReactアプリのベースを作成 3. タイトル部分の作成（Title.jsx） 4. 検索フォームの作成（Form.jsx） 5. Unsplashのデータを取得 6. 検索結果の表示（Results.jsx） 7. 環境変数の作成（.env） 完成！ 白黒画像の検
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React And .NET Core 6.0 Web API Sample Project with Docker
fetch API (get method) in React - Examples Java Code Geeks - 2024
How to Store and Access API Keys in a React Application
Accept Payments through Stripe Checkout using Next.js API Routes
Integrating Google Places Autocomplete API in a React App
2D sketches with React and the Canvas API
Fundamental Next.js API and Patterns
Rails API + React による開発ではまった点 - Qiita
