Category: React

Remixでroot.tsxにClerkのUI Componentを使いたい

提供されたUI Componentをレイアウト要素で使用する際の覚書。Remixを使用する場合、app/route.tsxにコンポーネントを配置。ヘッダーナビゲーションコンポーネント内にログインやログアウトボタンを配置したいが、エラーが発生。ClerkProviderの外でUI Componentを使うことがエラーの原因。Layout要素をProviderの内側に配置すると問題解消。ただし、キャッシュとSSRに関して懸念があり、Cloudflareのレポートを参考に検証を行う予定。

Published at: 2024/10/08

JavaScript React remix

RemixのLayoutではuseRouteLoaderDataを使おう

Remixでloaderの情報を使う際、useLoaderDataよりも他のフックを利用するケースもある。LayoutコンポーネントでClerkの認証情報を使用しようとした際に、HTTP404エラーがHTTP500エラーに変わる現象が起きた。ErrorBoundary周りを調査し、useRouteLoaderDataを使うことで問題が解決した。エラーが発生する原因はloaderの情報が正しく取得できないこと。useLoaderDataとuseRouteLoaderDataを使い分けることが重要。

Published at: 2024/09/23

React remix SaaS / FaaS Supabase

Remixで@supabase/ssrを使ったログイン処理を実装する

サーバー側の処理を利用して、Supabaseのログイン処理をRemixに実装する方法についてまとめました。 @supabase/ssrを使うことで、Cloudflare Pages上でクライアントを作成し、Cookieに関する処理を行います。ログイン処理後は、作成したクライアントを使用してCookieに情報を設定し、ログイン画面から移動できるようにします。さらに、参考資料に従い、ログイン処理を実装します。

Published at: 2024/09/18

JavaScript React remix SaaS / FaaS Supabase

Supabaseのログアウト処理で、Remixのloaderを再読み込みする方法

RemixアプリにSupabase Authのログアウト処理を組み合わせる際の方法を紹介。ログアウト後はuseNavigate()でページ遷移し、「Sign out」ボタンをクリックするとログアウトと同時にリダイレクトされる。再読み込みや状態更新後のリダイレクトも実装可能。ログアウト時に取得した情報を破棄するために使われる。Loader処理を再実行したい時はuseRevalidatorを利用。 Reminx APIを使うことを推奨。

Published at: 2024/09/13

Cloudflare JavaScript React remix SaaS / FaaS

RemixアプリをCloudflare Pagesへデプロイする際は、ライブラリ名に注意

Remixアプリ開発でCloudflare Pagesへデプロイ時に発生した”Could not resolve”エラーの対策をまとめました。ライブラリのインポート元を@remix-run/cloudflareに変更し、Node.js環境依存エラーを解消できました。Remixではライブラリの選択に注意し、プロキシーファイルを作成することで環境別のライブラリインポートも検討できます。

Published at: 2024/08/08

JavaScript Next.js React SaaS / FaaS Stripe

Next.js App RouterでStripe Elementを使う場合は、`loadStripe`はクライアントコンポーネントで実行する

タイトルの通り、Stripe ElementのJSファイルを使ったデモアプリ作成時のハマりをメモ。loadStripe関数の返り値がPromise<null>になり、決済フォームが表示されない問題を解決。解決策は、’use client’を設定しているコンポーネントでloadStripeを実行すること。詳細は参考リンクに記載。

Published at: 2024/03/29

Next.js React SaaS / FaaS Supabase

SupabaseのAuth UIをNext.js ( App Router )で使ってみた

最近のIDP系サービスは認証系のUIライブラリも提供しており、今回はSupabaseのReact向けライブラリをNext.jsで利用してログインページを実装しました。SupabaseのAuth UI Reactパッケージを使うことで、SNSログインにも対応した簡単なUIが実装できました。テーマやCSSのカスタマイズも可能で、試してみた結果を今後の記事にする予定です。ただし、RSCでは使えないようです。また、use clientを外すとエラーが発生し、クライアント側での設計が必要です。参考記事はこちら：https://supabase.com/docs/guides/auth/auth-helpers/auth-ui

Published at: 2023/12/27

AWS JavaScript Next.js React

Amazon DynamoDBとCognito User Pools + Next.jsで、簡単なブックマークシステムを実装する

このテキストは、特定のユーザーによって利用される有料のブックマーク機能についての説明です。DynamoDBとCognitoを使用して構築されており、APIの作成やデータの管理方法などが簡単にまとめられています。ブックマークの追加、削除、取得のための関数も提供されています。また、UIの作成にはReactとAmplify UIが使用されています。

Published at: 2023/12/27

JavaScript microCMS Next.js React SaaS / FaaS

Next.js App RouterでmicroCMS Webhookの発行元を検証する

この記事では、Webhookを利用してCMSと外部サービスを連携する方法について説明されています。Webhook機能は最近のWebサービスやCMSで標準で提供されており、サービス同士の連携ワークフローを自動化することができます。microCMSでは、コンテンツごとにWebhookを設定することができ、APIで検証するためにシークレットキーを登録することもできます。また、Next.jsを使用してWebhookからのリクエストを検証する方法も説明されています。Webhookを利用してシステムとの連携を安全に行うために、シークレットの利用が重要です。

Published at: 2023/12/12

Hono / Sonik JavaScript Next.js React

Next.js（App Router）でHonoを使ってREST APIを実装する

Next.jsをベースにして、Honoを使ったAPIの作成方法を試してみました。ファイルベースのルーティングに不便さを感じたため、ルーティング部分だけHonoを使用する方法を試しました。Honoで作成したAPIはNext.jsのミドルウェア上で動かします。APIパスの定義は、Next.js側で処理するパスも含める必要があります。また、Next.jsのミドルウェアでパスを書き換えることもできます。参考にしたものはこちらです：https://nextjs.org/docs/app/building-your-application/routing/middleware、https://github.com/honojs/examples/blob/main/nextjs-stack/pages/api/%5B…route%5D.ts

Published at: 2023/11/12