React

NextAuth.jsのセッションからAccessTokenを取得できるようにする。

一般的な話であるが、OAuth認証の基本的な仕組みを前提として確認する。OAuth認証を利用するWebアプリは、OIDCプロバイダから提供されたアクセストークンの正しさを、ユーザプロファイル情報の取得可否によって確認する。つまり、認証の過程においてWebアプ…

Next.JS App RouterにおいてSVGをAPIから出力する方法

SVGを最近よく活用している。CanvasよりReactとの相性はよいし、ベクターなのも好み。 (Three.jsを使えると面白いけど、、その機会はなかなかない。) だいたいの場合は、HTMLに埋め込んで使えばいいので、特別なことをする必要はない。 ただ、たまに画像と…

画像を返すAPIの作成

Azure Static Web Appではstaticなファイルにはmiddlewareが機能しないっぽいので、 画像にも認証をかけたい場合はAPIで画像を返すようにする必要がある。 Static Web Appってそういうものだよなーと思っているので仕方ない気がするし、 そもそも認証が必要…

Azure Static Web App ServiceにNext.js(App Router)をデプロイする。

以前にAzure Web App Serviceへのデプロイについての記事を書きました。 ma38su.hatenablog.com 今回はこのデプロイをブラッシュアップして、Azure Pipelineからstatic web appへもデプロイできるようにしました。 2024/2/10 追記 Next.JSのmiddlewareうまく…

NextAuth.jsでAutodeskアカウントでセッション管理するカスタムプロバイダーを作ってみた。

NextJsの認証を簡単に実現するモジュールのひとつであるNextAuth.jsについて、Autodeskアカウントを使ってみようということで、 今回はカスタムプロバイダーとしてAutodesk Platform ServicesのOAuthを試してみたので、その結果を残しておきます。 いまauth.…

SuspenseをNextJSで使う。

追記:NextJS(AppRouter)でSuspenseを使うときはCSRにしようと書いたのだが、CSRだとNextJSのRouter Cacheと相性がわるそう。というか、最近NextJSはオーバースペックだなぁと感じている。 Viteで作っていたReactのプロトをNextjsに移植したところ、Suspense…

Next.JSをAzureのWeb App Serviceにデプロイする

最近、新しいアプリを作ってみたらデプロイに苦労したのでメモを残しておく。 2023.9.13時点で、Next.JSのアプリは、VSCodeの拡張機能や、Web App Serviceから自動設定できるGitHub連携のデフォルトのGitHub Actionでは、Next.JSのデプロイに時間がかかりす…

React自作

少し前に話題になっていたReact自体の自作をやってみた。 一日かからないくらいの時間で、実装できるし、Reactの動作をかなりこまかく理解できるようになったので、React書く人にはお勧めしたい。 zenn.dev 自分が書いたのは以下。ほぼ写経。 github.com 気…

distrolessを試す。

軽量なコンテナを作るにはdistrolessのイメージをベースにするのがよいらしい。 distrolessは、Googleが管理しているイメージで、Google Container Registryで管理されているっぽい。 github.com 当たり前だけどdockerhubで検索してもでてこない。 とりあえ…

React Hooksでカウンターを実装してみる。

とりあえず実装すると以下のような形か。 import React from 'react'; const Counter = () => { const [count, setCount] = React.useState(0); const handleClick = React.useCallback((e: React.MouseEvent<HTMLInputElement, MouseEvent>) => { setCount(c => c + 1); }, []); return ( <div> <p></p></div></htmlinputelement,>…

React Hooksでタイマーを実装してみる。

状態が頻繁に更新されるコンポーネントということで、タイマーを実装してみる。とりあえず、実装すると以下のようになる。 import React from 'react'; const Timer = () => { const [time, setTime] = React.useState(0); React.useEffect(() => { const id…