ECサイトのカート機能の実装

カート機能の作成

Next.jsでのカート機能は、useReducerやContext APIを活用することで実装できます。Context APIを使用することで、カートの状態（商品情報、数量、価格など）をアプリ全体で共有し、コンポーネント間で簡単に操作できます。 また、商品データはAPIルートやgetStaticPropsで取得することで、パフォーマンスを最適化しつつ動的に表示することが可能です。

const CartContext = createContext();
const cartReducer = (state, action) => {
  switch(action.type) {
    case 'ADD_TO_CART':
      return [...state, action.payload];
    case 'REMOVE_FROM_CART':
      return state.filter(item => item.id !== action.payload.id);
    default:
      return state;
  }
};
export const CartProvider = ({ children }) => {
  const [cart, dispatch] = useReducer(cartReducer, []);
  
  return (
    <CartContext.Provider value={{ cart, dispatch }}>
      {children}
    </CartContext.Provider>
  );
};

支払い機能の統合

Stripeを使用した決済

Stripeは非常に人気のある決済プラットフォームで、Next.jsと簡単に統合できます。StripeのAPIキーを使用して、決済をサーバー側で処理し、セキュアな通信を確保します。また、Webhooksを活用することで支払いの確認と通知を自動化し、注文処理の信頼性を高めます。

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
export default async function handler(req, res) {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: req.body.items,
    mode: 'payment',
    success_url: `${req.headers.origin}/success`,
    cancel_url: `${req.headers.origin}/cancel`,
  });
  res.json({ id: session.id });
}

Razorpayを使用した決済

Razorpayはインド市場をターゲットとした決済プロバイダで、簡単にNext.jsに統合できます。initializeRazorpayを使って決済モジュールを呼び出し、支払いフローを開始します。

const makePayment = async () => {
  const res = await initializeRazorpay();
  if (!res) {
    alert("Razorpay SDK Failed to load");
    return;
  }
  const data = await fetch("/api/razorpay", { method: "POST" }).then(t => t.json());
  const options = {
    key: process.env.RAZORPAY_KEY,
    amount: data.amount,
    currency: data.currency,
    order_id: data.id,
    handler: function (response) {
      console.log(response.razorpay_payment_id);
    }
  };
  const paymentObject = new window.Razorpay(options);
  paymentObject.open();
};

統合されたECサイトの構築

Next.jsを使ったECサイトでは、カート機能と支払い機能の統合により、ユーザーがスムーズに商品を購入できるフローを提供します。また、SnipcartやStripe、Razorpayなどのツールを利用することで、支払い処理がセキュアかつ効率的に行えるため、開発者は簡単に高機能なECサイトを構築できます。

結論

Next.jsを利用したECサイト構築では、カート機能と決済の実装が重要なステップです。Context APIやuseReducerを使ったカート管理、StripeやRazorpayを使用した支払い処理により、使いやすく安全な買い物体験を提供できます。