Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座
Rating: 4.0 out of 5(161 ratings)
3,306 students

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

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

What you'll 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をどのように使い分けるのかが大よそ理解できる
  • リファクタリングできる箇所がないか？最後に確認ができる
  • 環境変数の取り扱いを学んでみたい方

Course content

9 sections • 59 lectures • 4h 9m total length

  • はじめに1:07
  • 本講座で扱う技術スタックフロー4:03
  • 本講座の完成品デモ3:27
  • 本講座の完成品ソースコード0:11

Requirements

  • HTML/CSSの基礎知識(divタグやクラス名のつけ方や当て方)
  • React/Nextjsの基礎知識(JSXやコンポーネント管理)

Description

Next.js/Vercel Postgres/NextAuth.js/Prisma/API Route/Stripeを駆使して1つのフレームワークでWebアプリ開発を完結させることが可能になりました。MicroCMSで執筆した電子記事を販売できるアプリケーションを構築します。より実践的なアプリ開発を学びたい方はこちらの講座でご満足いただけることでしょう。(Next.js AppRouterに対応しております)


■ 本コースの対象者

・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を触ったことがある人だとスムーズに受講できると思います。

Who this course is for:

  • モダンな技術スタックを使って開発経験を積みたい方
  • Nextjs14の最新バージョンで開発をしてみたい方
  • アプリ全体のフローを俯瞰して開発してみたい方
  • ポートフォリオの1つとしてWebアプリケーションを持っておきたい方
  • Web開発が純粋に楽しめて好きな方

Report abuse