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

Next.jsを使って実践的なショッピングサイトを1からハンズオン形式で構築します。バックエンドAPIはCMSで有名なStrapiを使用し、決済システムの導入はStripeを使用。よりNext.jsの知識を深めたい人に贈る開発実践講座

4.31 (174 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
1,819
students
5.5 hours
content
Jul 2022
last update
$39.99
regular price

What you will learn

Nextjsでショッピングサイトの作り方を体系的に学べる

ReactフレームワークのNextjsの実践的な使い方が学べる

Nextjsの雛形を自分の手で1から自作する方法が学べる

WebAPI構築用CMSであるStrapiの使い方が学べる

Strapiにおけるユーザーログイン手法が学べる

Stripeで決済システムをWebアプリに導入する方法が学べる

StripeAPIの扱いの基礎が理解できる

Postmanの使い方とAPIテスト方法が学べる

基本的なHTMLとCSSが学べる

useRefやuseContext等のHooksの使い方が学べる

クッキーを用いたユーザー管理方法が学べる

クッキーを使った自動ログイン手法が学べる

GraphQLの基礎的な使い方が理解できる

GraphQLを用いたデータ取得手法が学べる

Javascriptを使ったフィルター検索機能が実装できる

アカウント登録機能が実装できる

状態管理されているショッピングカートが実装できる

非同期処理のPromiseオブジェクトが理解できる

Description

■ 本コースの対象者

・Next.js初心者から中級者へステップアップしたい方

・Next.jsを使ってショッピングサイトを作ってみたい方

・Next.jsを一通り学び終え、より実践的なアプリケーションを作りたい方

・Stripe決済システム込みのショッピングサイトを構築したい方

・Strapiと呼ばれるヘッドレスCMSでWebAPIをサクッと構築したい方

・GraphQLを使ってAPIフェッチング手法を学びたい方


Next.jsフレームワーク中級者向けの講座内容です。

Amazonのような決済システム込みのショッピングサイトを

1から構築しながらNext.jsの理解をより深める内容となっています。

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


■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

・Next.jsの基礎的な使い方を理解している

Content

はじめに

本講座で学ぶこと
本講座の学習の流れ

Strapi入門

Strapiって一体なに?
まずはStrapiを試しに使ってみよう
食べ物のコレクションを作成してみよう
具体的な食べ物のデータを入力してみよう
登録した食べ物データをGETメソッドで取得してみよう
Postmanとは
Postmanをインストールしよう
Strapiにユーザー追加と権限を与えてみよう
Postmanを使って新しい食べ物を追加する作業を始めよう
本セクションを振り返ってみよう

Next.jsでショッピングサイトを構築(Nextjsセットアップ編)

完成品のデモ
Next.jsでフロントエンド用プロジェクトを作成してみよう
Next.jsのローカルサーバーが立ち上がるか確認しよう
_app.jsの中身を1から記述してみよう
CSSライブラリのreactstrapをインストールして使ってみよう
ページ共通部分のLayoutコンポーネントを作成しよう

Next.jsでショッピングサイトを構築(データフェッチング編)

【補足】次の動画のMongoDBがインストールできない場合
MongoDBをインストールしてみよう
Strapiでバックエンド用プロジェクトを作成しよう
レストランのデータを作成してみよう
レストランのデータを取得できるか確認してみよう
GraphQLプラグインをインストールして利用してみよう
Next.jsにApolloをインストールしてみよう
GraphQLが使えるようにサーバー設定をしよう
レストラン一覧を検索・表示するページを作成しよう
レストランカードのコンポーネントを作成してみよう
レストランカードをCSSでスタイリングしよう
GraphQLからAPIを叩いてデータを取得してみよう
APIから取得したデータでHTMLを書き換えてみよう
検索欄に打ち込む値を格納する機能を追加しよう
検索バーにおけるフィルタリング機能を実装しよう
データ取得の失敗、ローディング時に出力する内容を追加しよう
レストラン個別に料理データを追加しよう
レストラン固有のページを作成してみよう
レストランIDを使って個別にAPIを叩いてみよう
料理データをページに出力して表示させよう
レストラン固有ページのレイアウトを修正しよう

Next.jsでショッピングサイトを構築(ユーザー登録・ログイン編)

ユーザーアカウント登録に必要なライブラリ群をインストールしよう
アカウント登録用のページを作成してみよう
アカウント登録ページをCSSでスタイリングしよう
アカウント登録やログイン用のファイルを作成してみよう
ユーザー状態をグローバルに監視してみよう
実際にアカウント登録の関数を使ってみよう(その1)
実際にアカウント登録の関数を使ってみよう(その2)
ヘッダーのリンクをユーザー状態によって変更してみよう
ログイン用コンポーネントを作成してみよう
ユーザーログイン関数を自作してみよう
実際にログインしてみよう
Promiseオブジェクトを使って修正をしよう
クッキーが残っていればそのユーザーで自動的にログインさせよう

Next.jsでショッピングサイトを構築(ショッピングカート編)

ショッピングカート用コンポーネントを作ってみよう(その1)
ショッピングカート用コンポーネントを作ってみよう(その2)
ショッピングカートをCSSでスタイリングしてみよう
カートに商品を追加するロジックを構築してみよう
すでにカートに同じ商品が入っている場合のロジックを構築してみよう
商品フィールドに数量のフィールドを追加しておこう
実際にカートに商品を追加してみよう
追加した商品をカートへ出力してみよう
カートから商品を削除するロジックを構築してみよう
実際にカートから商品を削除してみよう
クッキーを利用して以前注文した商品を取得してみよう

Next.jsでショッピングサイトを構築(決済システム編)

注文用のコレクションを新しく追加しよう
決済システム用にStripeに登録してみよう
バックエンド側で注文用ロジックを構築してみよう
Stripeドキュメントを見ながら料金支払いロジックを構築しよう
バックエンドにStripeライブラリをインストールしよう
JSON.parseエラーを解決しよう
チェックアウトページを作成してみよう
チェックアウトページをCSSでスタイリングしよう
住所やカード情報を打ち込むコンポーネントを作成しよう
カード情報を打ち込むためのCardSectionコンポーネントを作成しよう
カード情報を送信するボタンを作成してみよう
注文情報を送るロジックを考えて構築してみよう
住所情報も一緒に合わせて注文してみよう
安全にカード情報を送るためのトークンも追加しよう
実際に料理を注文して決済してみよう!
決済が完了したかどうかを画面に表示させよう

ボーナスレクチャー

ボーナスレクチャー

Screenshots

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

Reviews

Koki
May 5, 2023
クライアントから送信された情報(商品・金額)を元に注文を作成し決済を行なうのは、セキュリティ上絶対にやってはいけないことです。 仮に勉強目的だとしても、講義内で何も説明がないことに強い不信感を覚えます。 他にも TypeScript じゃなくて JavaScript を使っている点や、途中まで GraphQL を使っていたのに突然 REST API を使い始めた点(なぜ Mutation を使わないのか)、Strapi のバージョンが古い点などの不満点はありますが、上記に比べれば大した問題ではないです。 個人的には有益な情報が得られたので良いですが、絶対にやってはいけないことをやっているのでこのような評価になります。
ドエム
April 20, 2023
講師「Shin Code」さんの他のコースでも当てはまることなのですが、 コーディングミスの修正まで動画にアップしてくれています。 「講師だからミスのシーンは載せてはだめなのでは?」と感じる方もいらっしゃる方もいるかと思いますが、私はむしろ逆の意見です。 エラーコードが出たら ①Googleで検索して、②どこにあたりをつけて、③修正する その過程を包み隠さず、見せてくれるのは貴重な資料です。 それらも含めてNext.jsの中級者向け(?)に最適な内容です。
lewis
January 3, 2023
質問に対し、解説や返答しないまま6ヶ月も放置しています。 javascriptのmap関数などについては詳しく解説されているもののライブラリを使ったstripeに関わることは詳しく解説されておらず、購入者を置き去りにして進んで行きます その他、useStateでオブジェクトを宣言しているが、オブジェクトの片方を何も使用しないことや、カートに追加した時にエラーが出ていますが、動画内で後で直すと二度ほどおっしゃってますが結局カートに物を入れないようにし最後はごまかして終わられています 他の動画も拝見しておりますが、素晴らしいものが多い分、今回はかなり雑な動画だと思いました。
はっく
December 31, 2022
何を教えたいのかわかりません。Nextjsの知識を深めたい方?? 推奨されない書き方で書いています。英語の発音もかなり間違いが多い。 ただ作って動けばOKだと思っているように見受けられます。 とにかくツッコミどころが多いのでこの辺で失礼します。
Tanaka
September 7, 2022
日本語でStrapiやStripeの講座は少ないので、それらを扱ってることや解説が分かりやすく、総じていい講座だと思いました。 2022年6月頃から配信された講座にしては使っているライブラリのバージョンがかなり古いのは残念で4.5としました。Next.jsやnext-apollo、graphqlなど。 React経験者なら、公式ドキュメントを読んで最新バージョンをインストールする、Jsで進行する講座をTypescriptで書き直すのがおすすめです。
yompi
September 5, 2022
チャプター79で注文を確認ボタン押下でtokenのリクエストが 'Invalid API Key provided' (pk_test_のキーはあってます)になってしまって最後までは行けませんでしたが講座はほぼ終えられましたし、注文情報のstrapiへの格納やstripeでの売上発生などは見てませんが、雰囲気はわかったのでまぁよしとしようかなと。 幅広く手を動かせたので満足です。
Takayuki
July 13, 2022
■ 取り扱っている内容について Next.js の SSR を利用した開発には触れられておらず残念でした。 ■ 動画全般について 打ち間違い、設定ミスなどが多く、視聴しながら実際にコーディングをしていると、都度エラーに遭遇し非常にストレスを感じました。(しかもエラーの修正が少し後の動画で説明されたり) 動画の後半になると書かれているコードを疑心暗鬼しながら視聴する状態でした。 実際の開発の流れを意識してあえてそのままにされているかもしれませんが、教材としては非常にストレスの溜まる構成に感じました。 それと動画ごとに音量が違って聞きづらかったです。
渡辺悌
May 26, 2022
モダンなWebアプリケーション開発を体験できます。 日本にNextJS+Strapi という題材でこのレベルの教材が存在することがありがたいです。 私は決済の部分は環境上クラウドサービスが利用できずできなかったのですが、それ以外はほぼ教材のままで完走することができました。 バックエンドがほぼノーコードで完結するってすごいですね。 【実施に向けてのご注意】 ・バージョンについては素直に教材に従うことをお勧めします。バージョンの組み合わせによって確実にエラーとなりますし、初心者の方だと解決は難しいと思います。 ・私はstrapi側で、 npm install sqlite3 を手動で打たないとエラーになったのですが、環境によるかもしれません。 (それ以外にも少しだけ変えたところあったかもしれませんがよく覚えてないです) ですが、他の問い合わせをしたときに質問したら即日回答をもらえたので、信頼できます。

Charts

Price

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

Rating

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

Enrollment distribution

モダンフレームワークのNext.jsでショッピングサイトを構築してみよう【Stripeで決済システム構築】 - Distribution chart
4634764
udemy ID
4/9/2022
course created date
5/23/2022
course indexed date
Bot
course submited by