【脱・初心者】Next.jsでECWebサイトを作ろう!
💡 この本で学べること ・Next.jsの基礎から応用まで、実践的なスキルが身につく ・実際に動くECサイトを作りながら学ぶ、ハンズオン形式 ・幅広い知識と応用力 ・ある一つのプロダクトの全機能を抑えた理想的な形でインプット / アウトプット出来ること。 🎯 対象読者 ・初心者から中級者へのステップアップをしたい人 ・Next.jsの概要はつかめているが、具体的なアウトプットがまだできていない人 ・ポートフォリオを作成したい人 ・Next.jsでの開発全般に興味がある 📘 本書の特徴 ・実際に手を動かしながら学べ、質の高いアウトプットが出来ます。 ・ハンズオンでありがちな、「そこがわからない」「同じようにやってるはずなのにエラーになって進まずモチベが下がってしまう」が極力なくなるように心がけました。 ・Next.jsでサイトを作るだけでなく、Stripeでのクレカ決済やVercelでのデプロイなど、実務でも利用される技術を初心者の段階で習得することができます。 🛠 取り扱う技術とツール ・Next.js ・TypeScript ・Tailwind CSS ・Prisma (データベース操作) ・NextAuth.js (認証) ・Stripe (決済処理) ・Vercel (デプロイ) 🚀 完成するプロジェクト 本書で実装する本格的なECサイトには以下の機能が含まれます: ・商品一覧 ・詳細表示 ・ユーザー認証 ログイン / ログアウト(ソーシャルログイン対応) ・注文処理と決済機能 ・管理者ダッシュボード 実際に動くアプリケーションを作り上げることで、座学だけでは得られない実践的なスキルが身につきます。
Chapters
Next.jsプロジェクトをセットアップしよう
Vercelとは?
Vercelを使ってみよう
フォントを設定しよう
ヘッダーコンポーネントを追加しよう
HomePageに販売する商品のデータを出力しよう
ログインページを作ろう
NextAuth.jsとは?
NextAuth.jsを実装しよう
Prismaとは?
Prismaをセットアップしよう
Prismaのインスタンスを作成しよう
Prismaのモデルを作成しよう
Prismaをマイグレーションしよう
認証用APIを構築しよう
ログインと同時にアイコン画像を反映させよう
MicroCMSとは?
MicroCMSをセットアップしよう
MicroCMSのAPIを実装しよう
MicroCMSにコンテンツを登録しよう
MicroCMSとNext.jsを連携しよう
MicroCMSのAPIをコールしよう
商品個別ページを実装しよう
ログアウト機能を実装しよう
Stripeとは?
Stripeで支払い受付のセットアップをしよう
Stripeチェックアウト決済のAPIを作成しよう
StripeAPIを実行しよう
ファイルを分割してエラーを解消しよう
Stripeを経由して購入してみよう!(テストモード)
購入成功ページを作成しよう
購入履歴の保存用APIを作成しよう
実際に購入情報を保存してみよう
ReactStrictModeの設定を変更する
プロフィールページを作成しよう
ログインしていない場合はログインページに遷移させよう
購入履歴を実装しよう
購入履歴を取得するAPIを作成しよう
プロフィールに表示させよう
Vercelへのデプロイエラーを解決する
Author
Topics
- 公開
- 文章量
- 約88,818字
- 価格
- 700円