Categories
ClerkJavaScriptNext.jsReactSaaS / FaaS未分類
Clerk Billingを使ったサブスクリプション管理をNext.jsで実装する方法を解説。環境構築から料金プラン設定、認証連携まで、Clerkの新機能を活用したサブスク機能の導入手順を詳しく紹介します。
Next.jsStripe
この記事では、Vercel AI SDKとStripe V2 APIを組み合わせた高スループットなAI利用量計測の実装方法を解説しています。Stripe V2 APIの新機能であるMeter EventStream APIを活用することで、秒間10,000リクエストまでの処理が可能になり、大規模なAIサービスでの利用量計測に適しています。
JavaScriptNext.jsReact
この記事では、RemixアプリケーションでVercel AI SDKを使用する際に発生する「z8.string(…).base64 is not a function」エラーの原因と解決策を解説しています。エラーの原因はzodライブラリの依存関係が明示的にインストールされていないことでした。zodをインストールすることで問題が解決し、Anthropicの言語モデルを使ったストリーミングレスポンスの実装例も紹介されています。
CloudflareNext.jsSaaS / FaaS
Next.jsのページをCloudflareにデプロイする際にビルドエラーが発生しました。”not-found”エラーの対処法として、”app/not-found.tsx”に”export const runtime = ‘edge’;”を追加する必要があります。これによってCloudflare上で正しく動作することが確認できます。ビルドエラーの原因はデフォルトのNot Foundページが”export const runtime = ‘edge’;”を持っていないことにあるようです。
Cloudflare PagesでNext.jsアプリをデプロイする際のエラーと対応方法についての覚書です。REST APIを追加するとWranglerでのプレビューがエラーになる場合、compatibility_dateを更新することで解決できます。最新の日付に更新後、再度ビルドとプレビューを行うと問題が解消されます。
RevTech / Serverless Devの岡本さんがCloudflare Pagesでアプリをデプロイする際にハマった点を共有しました。Next.jsのバージョン15.1.0でawaitが使えないエラーが発生し、next.config.tsをmjsに変更することで対応しました。変更後に再起動すると問題が解決し、Next.js 15.1.0でアプリが正常に動作したようです。
ドキュメントをよく読んで、ClerkをNext.jsのApp Routerで使う際の注意点をまとめました。ClerkMiddlewareをプロジェクトルートに配置し、Middlewareのmatcherも設定する必要があります。プロジェクトルートに配置してもうまく動かない場合は、ファイルをプロジェクトルートに移動させると問題が解決される可能性があります。参考記事に詳細が記載されています。
Next.js
この記事では、Next.jsアプリケーションにshadcn/uiを追加する際に発生したエラーとその対処方法について紹介しています。Reactのdependencyの解決で問題が発生し、npm config set legacy-peer-deps trueコマンドを実行することで解決できることがわかりました。また、追加したファイルが原因でエラーが起きる場合もあるため、components.jsonファイルを削除してから再度実行する必要があることも記載されています。
この記事では、Next.jsのApp Routerを使用してREST APIを作成する際のTypeScript型定義に関するTipsが紹介されています。パスパラメータを受け取るAPIを想定し、v15以降でのビルドエラー回避方法やコードの変更点が説明されています。Page RouterやRemixに慣れている人も戸惑うかもしれないが、理解すれば問題ない内容です。
JavaScriptNext.jsReactSaaS / FaaSStripe
タイトルの通り、Stripe ElementのJSファイルを使ったデモアプリ作成時のハマりをメモ。loadStripe関数の返り値がPromise<null>になり、決済フォームが表示されない問題を解決。解決策は、’use client’を設定しているコンポーネントでloadStripeを実行すること。詳細は参考リンクに記載。