Category: Next.js

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

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

Published at: 2024/12/07

JavaScript Next.js React

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

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

Published at: 2024/12/06

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