Category: Next.js

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 Supabase

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

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

Published at: 2023/12/30

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

JavaScript Next.js React

Next.js App RouterでuseState / useEffectが動かないときは、Node.jsのバージョンを確認する

Next.js App Routerでサンプルアプリを動かしていたところ、useEffectとuseStateを使った非同期処理が動かない場面に遭遇しました。解決方法自体は、「Node.jsのバージョンをアップグレードする」だけでOKでしたが、また別PCやワークショップで遭遇するかもしれないので、覚書としてまとめます。

Published at: 2023/09/16

4cb692696ba40fb341993d0c132652e8-20230910153846

JavaScript microCMS Next.js React SaaS / FaaS Stripe

Next.jsとmicroCMS + Stripeで簡単なECサイトテンプレートを作った話

microCMSテンプレートのシンプルなECサイトを紹介しています。microCMSやStripeを組み合わせて商品データを連携する方法や、注文時に商品データを作成する方法を解説しています。また、microCMSのWebhookを使用してデータの同期を行ったり、価格が変更された場合の処理方法も説明しています。ただし、カスタマイズやリスク要素についても言及しており、Stripe Elementsを使ったデータ連携の方法も提案しています。今後はテンプレートの更新情報や有料テンプレートの配布を検討しています。

Published at: 2023/09/10

JavaScript microCMS Next.js React SaaS / FaaS

Next.js App RouterでmicroCMSの画面プレビューに対応する

microCMSのテンプレート作成に挑戦する中で、画面プレビューの実装を行いました。Next.js App Routerを使用してmicroCMSのプレビュー機能を実装する方法を紹介します。ngrokを使用してローカルのNext.jsアプリに中継するためのセットアップ方法も紹介されています。microCMSのAPI設定画面でngrokのURLを設定し、Next.js側では公開済みのコンテンツを表示するページを用意する必要があります。また、プレビューコンテンツの取得にはdraft_keyを利用します。

Published at: 2023/08/31

Cloudflare JavaScript Next.js React SaaS / FaaS

Next.js App Router + microCMSなサイトをCloudflare Pagesへ

microCMSのコンテンツをNext.jsで表示させるアプリをCloudflare Pagesにデプロイした際にエラーが発生しました。cacheの設定はCloudflare Pagesでは利用できないため、環境変数を分岐させることで対応しました。さらに、NODE_ENVを使ってAPIキーの切り替えも可能です。このように、NEXT_RUNTIMEとNODE_ENVを使い分けることでCloudflare Pagesと開発環境での挙動を変えることができます。なお、next-on-cloudflareは便利なツールです。

Published at: 2023/08/29