電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座
Next.js14/Stripe/Vercel Postgres/NextAuth.js/MicroCMSを用いてフルスタック販売Webアプリケーションを開発する講座です。デプロイ後もWebHook設定やパフォーマンス測定まで行います。
4.44 (47 reviews)
596
students
4 hours
content
Jan 2024
last update
$54.99
regular price
What you will learn
Nextjs14の基礎とその使い方が学べます
Nextjsの機能をフルで使いフルスタックアプリケーション開発手法を身につけます
NextAuthを使ったOAuth認証の実装ができる
MicroCMSとWebHookを使った記事作成の実装ができる
Vercel Postgresを使ったDB管理手法が学べる
NextjsにおけるGoogleFontを変更する方法が学べる
Nextjs14のappディレクトリの取り扱いについて学べる
GithubProviderを利用してOAuth認証実装ができる
PrismaORMを使ってデータ操作ができるようになる
getServerSessionを使ってサーバーサイドでセッション取得ができるようになる
microcms-sdkを使ってクライアント側でMicroCMS専用のAPIが作れるようになる
Next API RouteでAPIを実装したい方
商品購入時の際にモーダルを出現させることができる
NextAuthでログイン/ログアウトが実装できる
Stripeを使ってチェックアウト決済機能を実装できる
決済が完了したら購入完了ページへ遷移できる
購入時にDBに保存履歴を残すことができる
購入履歴のデータを利用して複数回購入を防ぐ実装ができる
useEffectが2回発火してしまう問題を解消できる
詳細記事ページを作成して動的ルーティングを学べる
商品購入履歴APIが実装できる
TypescriptベースでNextjs開発ができるようになる
ユーザープロフィールページが作成できる
ログイン中のユーザーの購入履歴を取得できる
購入した記事一覧取得APIが構築できる
Suspenseを利用してローディングを実装できる
Vercelを使って本番デプロイできる
最新記事データを反映させるためにSSRで実装できる
デプロイ後のパフォーマンス測定を体感できる
ISRに変更した際にSSRとパフォーマンスの差がどのくらい出るのかが分かる
CSRとSSRとISRをどのように使い分けるのかが大よそ理解できる
リファクタリングできる箇所がないか?最後に確認ができる
環境変数の取り扱いを学んでみたい方
Why take this course?
Next.js/Vercel Postgres/NextAuth.js/Prisma/API Route/Stripeを駆使して1つのフレームワークでWebアプリ開発を完結させることが可能になりました。MicroCMSで執筆した電子記事を販売できるアプリケーションを構築します。より実践的なアプリ開発を学びたい方はこちらの講座でご満足いただけることでしょう。
■ 本コースの対象者
・React、Next.js等の基礎技術を学んだだけでは物足りない方
・Vercelが提供しているNext.jsやVercel Postgresを使って開発したい方
・PrismaのORMを使ってDB操作をしてみたい方
・StripeAPIを使ってチェックアウト決済まで実装したい方
・NextAuth.jsでGithub等でOAuth認証してみたい方
・CSR/SSR/ISRの使い分けを理解したい方
・モダンな技術をキャッチアップしてみたい方
・ただただWebアプリ開発好きで好奇心がある方
・etc...
■ 本コースを受講する際の注意点
・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。
・ReactやNext.jsの基礎知識は知っている前提でお話を進めております(コンポーネントやJSX記法等)。
・ある程度Javascriptを触ったことがある人だとスムーズに受講できると思います。
Screenshots
Reviews
アスハ
January 31, 2024
全体的に「〜になります」からの「ならないですね」で原因を探る為に次の動画へと言うことが多いです。何故ならないのかも講師のケアレスミスな感じがします。
また、全体的にエラーハンドリングが無いです。APIを使っているのに関わらずAPIではステータスコードの判定も無かったり、ログイン・ログアウトに関してのハンドリングが欠けていると感じました。
決済に関してはセキュリティ面でも不安です。このやり方では有名なハッキング手法を用いれば決済レコードを追加させれてしまうと思います。もちろん基礎として説明されているのは解りますが、そう言った点の考慮についてもきちんとアドバイスするべきだと思います。
ドキュメントも深く読んでないのか、その後に書かれている公式の実装の注意事項についても説明が抜けている点が数件ありました。
しっかりと勉強しようと学習を進めていましたが…ちょっとこれは酷いのでは無いでしょうか?
また、コードがスマホなどの端末で動画を見た場合、読みにくいフォントと感じました。book の kがRに見えやすいです。サンプルコードの完成形が無いので自分で動画を見ながら完成形を打ち込むなどしないといけないので、これであれば、完成形のリソースもダウンロードできるようにしておいて頂ければと思いました。
それに prisma formatを用いて prisma のスキーマも自動整形できますから、それで綺麗にしたコードを動画内で表示するなども心がけてはどうでしょうか?
決済やユーザー認証と言った部分はセキュリティやデータ操作に深く関連する部分ですし、気配りをされたカリキュラムで適切な説明や進行のある講座制作に期待します。
Revocraft
January 20, 2024
Next.js14の他にもStripe/Vercel/NextAuth.js/MicroCMSと実際の物販サービスを構築する上での技術スタックが詰め込まれており、非常に密度の濃い講座でした。
学習する内容は多いのですが、講座の内容とは直接関係無い箇所についてはあらかじめコードが用意されており、効率的に学習を効率的に進められました。
また、画面を的確にズームイン/ズームアウトして頂ける点も配慮が行き届いていると感じました。
Shin Codeさんの講座はいつもクオリティが高く、大変参考になりありがたいです。
Charts
Price
Rating
Enrollment distribution
5662021
udemy ID
11/16/2023
course created date
12/16/2023
course indexed date
Bot
course submited by