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

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

What's inside

Syllabus

本講座で学べる事から技術スタックのフローが理解できます。

はじめに

本講座で扱う技術スタックフロー

本講座の完成品デモ

本講座の完成品ソースコード

アプリのレイアウト実装からNextAuth.jsを使って認証機能まで実装できるようになります。

Next.js14でプロジェクトの雛形を作成しよう

Vercel Postgresのセットアップをはじめよう

Next.js14でGoogleFontを変更してみよう

Headerコンポーネントを作成してみよう

HomePageに本の疑似データを出力させてみよう

ログインページの作成してみよう

NextAuth.jsで認証機能の実装をはじめよう

GithubProviderで必要なIDとシークレットキーを準備しよう

Prismaをインストールして初期セットアップをはじめよう

prismaをグローバルインスタンスで定義しよう

Prismaのモデルを作成してマイグレーションしよう

NextAuthのプロバイダー取得のために認証用APIを作ってみよう

getProvidersを利用してgithubからサインインできるようにしよう

ログイン時のエラーを解決してみよう

useSessionを利用してログインしているユーザー情報にアクセスしてみよう

MicroCMSを使ってコンテンツを配信する仕組みを作ります。sdkを使ってクライアント側でデータ取得APIを構築します。

MicroCMSの初期セットアップをはじめよう

実際に電子記事データを作ってみよう

microcms-sdkを使ってクライアントの初期化をしよう

全電子記事取得用の関数を用意しよう

電子記事用の型を用意しておこう

商品をクリックした時のモーダルを実装してみよう

ログアウト機能を実装してみよう

StripeAPIを用いてチェックアウト決済を行います。作成した記事をユーザーが購入できるようになります。

Stripeアカウントを作成してAPIキーを取得してみよう

Stripeチェックアウト決済用APIを作ってみよう

実際にチェックアウト決済APIを叩いてみよう

チェックアウト決済ページへ遷移しない問題を解決してみよう

購入成功ページを作って購入履歴を保存するAPI作成をはじめよう

購入履歴の保存を行うために必要なユーザーと書籍情報を準備しよう

購入履歴保存の重複を回避しよう

実際に電子記事の購入履歴を保存してみよう

PrismaValidationErrorとその他エラーを解決してみよう

useEffectが2回発火されている問題を解決しよう

購入成功ページから電子記事詳細ページへ飛べるようにしよう

電子記事詳細ページを作成してみよう

MicroCMSから固有の記事を取得する関数を作ってみよう

実際に記事詳細ページを表示してみよう

商品購入履歴検索のAPIを作ってみよう

購入履歴検索APIを叩いてレスポンスを確認しよう

bookIdを取り出して選択した商品のbookIdと比較してみよう

ユーザーの型を定義しておこう

ログイン中のユーザープロフィールページを作成できるようになります。購入履歴の表示も行います。

ユーザープロフィールページを作成しよう

ユーザーの購入履歴からbookIdを取り出し、それを利用して詳細記事を取得しよう

ユーザー購入記事をプロフィール画面に出力させよう

もう1記事追加して今までの実装が動くのか確認しよう

アプリの修正を行います。Suspenceを使ってローディング状態を実装します

ログイン/ログアウト実装をNextAuth.js搭載のAPIから行おう

Suspenseを使ってローディングを実装しよう

Vercelを使ってデプロイ作業を行います。ビルド時に発生するエラーの解消やWebhookの設定まで行います。

Vercelへデプロイしてみよう

本番環境でのNextAuthエラーを解決してみよう

購入成功ページへ正常にリダイレクトできるように修正しよう

MicroCMSのWebHook設定をはじめてみよう

最新記事データを反映させるためにmicrocms-sdk-jsでSSRを実現してみよう

PageSpeedInsightを使ってパフォーマンス測定を行います。その後はチューニングとリファクタリングの説明まで行います

デプロイ後のパフォーマンス検証をやってみよう

ISRに変更して、どのくらい速度が変わるのか体感してみよう

リファクタリングできる箇所がないか探してみよう

今後どのようにプログラミングを学ぶべきかが分かります。

最後までご受講くださった方へ

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Teaches how to integrate various technologies into a single framework for web development, including Next.js, Vercel Postgres, NextAuth.js, Prisma, and Stripe API

Instructed by Shin Code, a reputable source of information on web development

Suitable for learners with a solid foundation in React and Next.js

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in 電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座 with these activities:

Build a Micro CMS CRUD App

Show steps

Develop a practical web application that reinforces the course concepts and provides hands-on experience with the full technology stack.

Browse courses on Next.js

Show steps

Follow the course hands-on and implement the steps
Read the course materials thoroughly
Create a Micro CMS account and familiarize yourself with the platform
Modify the provided app code to implement CRUD operations (Create, Read, Update, Delete) for articles
Deploy your app on Vercel and test its functionality

実装した内容を復習してみよう

Show steps

本講座で学んだ内容がしっかり身についているか確認するために、実装した内容を復習してみましょう。

Show steps

Next.jsプロジェクトを起動して、すべての機能が正常に動作することを確認しよう
Vercel Postgresに接続して、データが正しく保存されていることを確認しよう
Stripe APIを使用して、チェックアウト決済が正しく動作することを確認しよう
NextAuth.jsを使用して、認証機能が正しく動作することを確認しよう
MicroCMSからコンテンツが正しく取得されていることを確認しよう

Vercelのドキュメントを参照しよう

Show steps

Vercelのドキュメントを参照して、デプロイメントやホスティングに関する理解を深めましょう。

Browse courses on Vercel

Show steps

Vercelのドキュメントを閲覧しよう
Vercelのベストプラクティスを学ぼう

Show all three activities

Career center

Learners who complete 電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座 will develop knowledge and skills that may be useful to these careers:

Web Developer

Web Developers are responsible for designing and developing websites and ensuring the websites are up-to-date. With the skills you learn in 電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座, you will be able to create a new website for the company or organization you work for. If you are looking to become a Web Developer, this course may help you prepare to build the websites needed in your future role.

See salaries and explore the career path for Web Developer

Web Designer

Web Designers are responsible for user interface, user experience, and brand coherence across all web platforms.

See salaries and explore the career path for Web Designer

Software Engineer

Software Engineers are responsible for the design, development, testing and deployment of computer software. With the skills you learn in 電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座, you will be able to more easily understand more complicated programming concepts and how to implement them in real-world applications.

See salaries and explore the career path for Software Engineer

Front-End Engineer

Front-End Engineers are responsible for the user interface and user experience of a website. With the skills you learn in 電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座, you will be able to create more engaging websites for users to interact with.

See salaries and explore the career path for Front-End Engineer

Back End Engineer

Back-End Engineers are responsible for designing, developing, deploying and maintaining the server-side of web applications. With the skills you learn in 電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座, you will be able to better understand how the server-side of a web application works and be able to implement more complex server-side functionality.

See salaries and explore the career path for Back End Engineer

Full-Stack Developer

Full-Stack Developers are responsible for designing, developing, testing and deploying both the front-end and back-end of web applications. With the skills you learn in 電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座, you will be able to create web applications from the ground up.

See salaries and explore the career path for Full-Stack Developer

Data Analyst

Data Analysts collect, clean, prepare and analyze data to discover insights and trends that can be used to make better decisions.

See salaries and explore the career path for Data Analyst

Data Engineer

Data Engineers design, build, test and maintain data pipelines and manage the data used by data scientists, data analysts and other downstream users.

See salaries and explore the career path for Data Engineer

Data Scientist

Data Scientists use data to predict future trends.

See salaries and explore the career path for Data Scientist

Database Administrator

Database Administrators maintain the databases used by applications and systems.

See salaries and explore the career path for Database Administrator

Systems Analyst

Systems Analysts study an organization's current system, identify its problems and needs, design a new or modified system to correct the problems, and implement the new system.

See salaries and explore the career path for Systems Analyst

IT Manager

IT Managers plan, direct and coordinate IT activities within an organization.

See salaries and explore the career path for IT Manager

Information Security Analyst

Information Security Analysts protect an organization's computer networks and systems from unauthorized access, use, disclosure, disruption, modification or destruction.

See salaries and explore the career path for Information Security Analyst

Computer Programmer

Computer Programmers write, test, debug and maintain the programs that run computers and other devices, like smartphones and tablets.

See salaries and explore the career path for Computer Programmer

Software Tester

Software Testers test software to identify bugs and ensure that it meets requirements.

See salaries and explore the career path for Software Tester