Category: Next.js

Next.jsStripe

Vercel AI SDK × Stripe V2 API で効率的にAI利用量を計測する実装方法

この記事では、Vercel AI SDKとStripe V2 APIを組み合わせた高スループットなAI利用量計測の実装方法を解説しています。Stripe V2 APIの新機能であるMeter EventStream APIを活用することで、秒間10,000リクエストまでの処理が可能になり、大規模なAIサービスでの利用量計測に適しています。

Okamoto Hidetaka

JavaScriptNext.jsReact

RemixでVercel AI SDKを使う時はzodを添える

この記事では、RemixアプリケーションでVercel AI SDKを使用する際に発生する「z8.string(…).base64 is not a function」エラーの原因と解決策を解説しています。エラーの原因はzodライブラリの依存関係が明示的にインストールされていないことでした。zodをインストールすることで問題が解決し、Anthropicの言語モデルを使ったストリーミングレスポンスの実装例も紹介されています。

Okamoto Hidetaka

CloudflareNext.jsSaaS / FaaS

next-on-pagesでのビルドでerror _not_foundが出たら読む記事

Next.jsのページをCloudflareにデプロイする際にビルドエラーが発生しました。”not-found”エラーの対処法として、”app/not-found.tsx”に”export const runtime = ‘edge’;”を追加する必要があります。これによってCloudflare上で正しく動作することが確認できます。ビルドエラーの原因はデフォルトのNot Foundページが”export const runtime = ‘edge’;”を持っていないことにあるようです。

Okamoto Hidetaka

CloudflareNext.jsSaaS / FaaS

next-on-pagesでApp RouterのREST APIがエラーになった時に見る記事

Cloudflare PagesでNext.jsアプリをデプロイする際のエラーと対応方法についての覚書です。REST APIを追加するとWranglerでのプレビューがエラーになる場合、compatibility_dateを更新することで解決できます。最新の日付に更新後、再度ビルドとプレビューを行うと問題が解消されます。

Okamoto Hidetaka

CloudflareNext.jsSaaS / FaaS

Next.jsをCloudflareで使う時に `await is not defined`が出たら見る記事

RevTech / Serverless Devの岡本さんがCloudflare Pagesでアプリをデプロイする際にハマった点を共有しました。Next.jsのバージョン15.1.0でawaitが使えないエラーが発生し、next.config.tsをmjsに変更することで対応しました。変更後に再起動すると問題が解決し、Next.js 15.1.0でアプリが正常に動作したようです。

Okamoto Hidetaka

JavaScriptNext.jsReact

ClerkをNextjsのApp Routerで使う時、middlewareの扱いに注意しよう

ドキュメントをよく読んで、ClerkをNext.jsのApp Routerで使う際の注意点をまとめました。ClerkMiddlewareをプロジェクトルートに配置し、Middlewareのmatcherも設定する必要があります。プロジェクトルートに配置してもうまく動かない場合は、ファイルをプロジェクトルートに移動させると問題が解決される可能性があります。参考記事に詳細が記載されています。

Okamoto Hidetaka

Next.js

Next.js App Routerでshadcn/uiのセットアップが失敗した時に読む記事

この記事では、Next.jsアプリケーションにshadcn/uiを追加する際に発生したエラーとその対処方法について紹介しています。Reactのdependencyの解決で問題が発生し、npm config set legacy-peer-deps trueコマンドを実行することで解決できることがわかりました。また、追加したファイルが原因でエラーが起きる場合もあるため、components.jsonファイルを削除してから再度実行する必要があることも記載されています。

Okamoto Hidetaka

JavaScriptNext.jsReact

Next.js のApp RouterでREST APIを作る時は、型定義にPromiseをお忘れなく

この記事では、Next.jsのApp Routerを使用してREST APIを作成する際のTypeScript型定義に関するTipsが紹介されています。パスパラメータを受け取るAPIを想定し、v15以降でのビルドエラー回避方法やコードの変更点が説明されています。Page RouterやRemixに慣れている人も戸惑うかもしれないが、理解すれば問題ない内容です。

Okamoto Hidetaka

JavaScriptNext.jsReactSaaS / FaaSStripe

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

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

Okamoto Hidetaka

Next.jsSupabase

Supabase AuthをNext.jsで触ってみた-1

公式のチュートリアルに従って、Supabaseを使用した認証画面をNext.jsで作成しました。手順を紹介します。まず、create-next-appを使用してNext.jsアプリをセットアップしました。次に、Supabase CLIを使用してSupabaseプロジェクトをセットアップしました。.env.localにプロジェクトIDとAPIキーを設定し、SDKをインストールしました。ログインページを作成し、ユーザーの作成とログインを試しました。セットアップに時間がかかりましたが、便利でカスタマイズ可能なAPIも使用できるため、CLIがあることは素晴らしいと感じました。チュートリアルの続きは後日紹介します。

Okamoto Hidetaka
Home
Search
Bookmark