電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座

Next.js14/Stripe/Vercel Postgres/NextAuth.js/MicroCMSを用いてフルスタック販売Webアプリケーションを開発する講座です。デプロイ後もWebHook設定やパフォーマンス測定まで行います。

4.44 (47 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座
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

電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座 - Screenshot_01電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座 - Screenshot_02電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座 - Screenshot_03電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座 - Screenshot_04

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

電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座 - Price chart

Rating

電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座 - Ratings chart

Enrollment distribution

電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座 - Distribution chart
5662021
udemy ID
11/16/2023
course created date
12/16/2023
course indexed date
Bot
course submited by