モダンフレームワークのNext.jsでショッピングサイトを構築してみよう【Stripeで決済システム構築】

---

モダンフレームワークのNext.jsでショッピングサイトを構築してみよう【Stripeで決済システム構築】

ハンズオン形式で、実践的なショッピングサイトをNext.jsからCMS（Strapi）まで、一緒に構築しましょう！

---

【コース概要】

本コースの対象者

• Next.js初心者から中級者へステップアップしたい方
• Next.jsを使ってショッピングサイトを作ってみたい方
• Next.jsを一通り学び終え、より実践的なアプリケーションを作りたい方
• Stripe決済システム込みのショッピングサイトを構築したい方
• Strapiと呼ばれるヘッドレスCMSでWebAPIをサクッと構築したい方
• GraphQLを使ってAPIフェッチング手法を学びたい方

これからNext.jsを使った業務・お仕事をする方には、必見の内容です。

---

【コース内容】

1. Next.jsとは？ - Next.jsの基本概念と特徴について学びます。
2. ショッピングサイトの設計 - ユーザーが使いやすく、機能的なUI/UX設計の基礎を確認します。
3. Next.jsからプロジェクトの構築 - Next.jsで新しいショッピングサイトのプロジェクトを作成し、基本的なページ構造を整えます。
4. Strapi CMSの導入 - Strapiを使って、商品データや管理者向けパネルを設定します。
5. Stripe決済システムの統合 - Stripe APIを使用して、安全で信頼性のある決済システムを実装します。
6. GraphQLを使ったAPIフェッチング - 効率的なデータ取得手法を学び、実際にAPIを呼び出す経験を積みます。
7. ユーザー認証とセキュリティ - NextAuth.jsを使用してユーザー認証機能を追加し、ショッピングサイトの安全性を確保します。
8. デプロイメント - 学んだ知識を運用に移行するための最終ステップで、実際にショッピングサイトをデプロイします。

---

【学習効果】

• Next.jsの中級レベルの技術を身につける
• Stripe決済システムの構築体験を積む
• Strapi CMSとGraphQLの使い方を学ぶ
• 実際のショッピングサイトをデプロイするスキルを獲得する
• フロントエンド開発者として、業務対応能力を高める

---

【前提知識】

• HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。 (基本的なプログラミング知識が必要です)
• Next.jsの基礎的な使い方を理解している

---

【受講注意点】

• コースはNext.jsの中級者向けです。初心者であれば、基本的な知識を補完した後に受講を検討ください。
• HTML/CSS/JavaScriptの理解が不足している場合は、それらの基礎知識を先に身につけることをお勧めします。

---

【コースで得られるもの】

• 実践的なNext.jsプロジェクトの構築体験
• Stripe決済システムとStrapi CMSの導入方法
• セキュリティとデプロイメントの最新情報
• Q&Aセッションで疑問や課題を解決するサポート
• 完成したプロジェクトをポ트フォリオに追加できる実作業体験

この機会にぶつけましょう！今すなわち、Next.jsとStripeで新しいチャレンジを受け入れてみませんか？

このフィードバックや質問の連続で提供されている内容から、以下のポイントをまとめることができます：

1. トールするJs の講座に関して、以下の点が指摘されています：

   • Typescriptでコードを書く方法について講座を行いたいと考えています。
   • チャプター79で注文確認ボタンの実装中、APIキーに関するエラーが発生し、最後までの進行に問題を起こしました。
   • Nextjsの知識を深めたいという意思表明がありますが、コードの説明や修正は不足している可能性があります。
   • セキュリティ上の問題（クライアントから直接商品や金額を処理すること）についての解説が欠けていると感じされています。
   • Strapiのバージョンが古いため、最新の状態でのレクチャーが必要であると指摘されています。

2. 講師へのフィードバック に関しては、以下の点が特徴です：

   • 講師「Shin Code」の他のコースでも同様のミスを修正して動画をアップすることで、学習者に実際の開発プロセスを示す価値があると指摘されています。
   • エラーが発生した際にそのデバッグや修正プロセスを明確に示すことが貴重であるとも述べられています。

3. 次のアクション は以下の通りです：

   • Typescriptによるコード書き直しを行い、必要に応じてNextjsの知識を深めること。
   • Strapiのバージョンを最新のものにアップデートした上で、レクチャー内容を更新すること。
   • セキュリティの説明を加え、注文処理時のクライアントからのデータ保護についての解説を充実させること。

4. 個人的な反応 は、ミスやエラーを含むコードの提示も学競して歓迎する立場であるという点に留まります。

これらのフィードバックを基に、講座の改善やアップデートを行うことで、学習者により質的な学習体験を提供することが可能です。また、Strapiのバージョンのアップデートに伴い、より新しい機能やAPIの変更点を取り入れることで、実際の開発現場との一致を図ることが重要です。