API Routes を使用してフロントエンドで完結するロジックを実装したデモアプリです。
詳細の解説はこちらの note にて行っていますので、気になった方はご参照ください。

アプリ仕様

フリマアプリを想定し、新たに商品の出品者がクーポン URL を発行できる機能を実装したという仮定で実装しています。
※あくまで想定のため、フリマアプリの実装はしていません。

具体的な仕様としては

・ 出品者が独自にクーポンURL（ /coupon/<出品者のuserId> ）を発行できる
・ クーポンURLから購入した場合、出品者や購入者に特別な割引を効かせる
・ クーポンURLにはアクセスから購入までに1週間の有効期限がある
・ クーポンの情報はcookieで管理をする（クーポンURLでアクセスした際にcookieへ登録し、購入時にcookieの情報を参照して割引適用有無を判断する）
・ クーポンURLにアクセスされたら、その情報をcookieに保存しつつ、出品者の出品商品一覧画面（ /seller/<出品者のuserId> ）を表示する

のような機能を想定して実装しています。

実装仕様

今回はクーポン URL でアクセスされた際に、「cookie にデータを保存して出品者のページにリダイレクトする」という処理を API Routes を使用して実装しています。
主な実装としては、以下 2 つのみです。

・ Next.configのrewrites設定にて、/coupon/<userId> のアクセスを /api/coupon/[userId].ts　に飛ばす
・ API Routesでcookieにクーポン情報を保存し、出品者のページへリダイレクト

詳細は実際のコード、もしくは note の記事をご参照ください。

dependency

• node@14.17
• React@18.2
• Next.js@12.2
• nookies@2.5
• dayjs@1.11