💡 この本で学べること

・Next.jsの基礎から応用まで、実践的なスキルが身につく
・実際に動くECサイトを作りながら学ぶ、ハンズオン形式
・幅広い知識と応用力
・ある一つのプロダクトの全機能を抑えた理想的な形でインプット / アウトプット出来ること。

🎯 対象読者

・初心者から中級者へのステップアップをしたい人
・Next.jsの概要はつかめているが、具体的なアウトプットがまだできていない人
・ポートフォリオを作成したい人
・Next.jsでの開発全般に興味がある

📘 本書の特徴

・実際に手を動かしながら学べ、質の高いアウトプットが出来ます。
・ハンズオンでありがちな、「そこがわからない」「同じようにやってるはずなのにエラーになって進まずモチベが下がってしまう」が極力なくなるように心がけました。
・Next.jsでサイトを作るだけでなく、Stripeでのクレカ決済やVercelでのデプロイなど、実務でも利用される技術を初心者の段階で習得することができます。

🛠 取り扱う技術とツール

・Next.js
・TypeScript
・Tailwind CSS
・Prisma (データベース操作)
・NextAuth.js (認証)
・Stripe (決済処理)
・Vercel (デプロイ)

🚀 完成するプロジェクト

本書で実装する本格的なECサイトには以下の機能が含まれます：

・商品一覧
・詳細表示
・ユーザー認証 ログイン / ログアウト（ソーシャルログイン対応）
・注文処理と決済機能
・管理者ダッシュボード

実際に動くアプリケーションを作り上げることで、座学だけでは得られない実践的なスキルが身につきます。

【脱・初心者】Next.jsでECWebサイトを作ろう！

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へのデプロイエラーを解決する

nextjs

typescript

vercel

microcms

stripe

Haruki Inoue | Notion公式キャンパスリーダー