Next.js のおすすめの教材8選！ 【 2023年3月 最新版】

「Reactってよく聞くけど、なんだか難しそう。。」

「HTML、CSS、JSは触ったことあるけど、Reactには壁を感じる。。」

「興味はあるけど自分には早いんじゃないか。。」

本コースはReactに興味があるけど、できるか自信がないフロントエンド入門者の方に向けて作成しました。

まず、皆さんにお伝えしたいのはReactは決して扱うのが難しいライブラリではないということです。

ただ、使いこなせるようになるためにはいくつか知っておくべきことがあります。

本コースではReactを使うにあたって知っておいてほしい基礎の部分を体系的、かつ網羅的に説明しています。

■ 知っておくべきこと１ | JavaScriptの挙動

JavaScriptの挙動自体が曖昧（あいまい）な場合、Reactを使いこなすことは難しいでしょう。

ReactはJavaScriptのライブラリですので、当然JavaScriptで記述することになります。

そのため、Reactに感じる複雑性の多くはJavaScript言語自体の独特の記法からくるものです。

また、Reactのコードを記述する際は分割代入やスプレッド演算子、配列の高階関数、await/asyncなどの比較的最新の記法を多用します。

そのため、十分なJavaScriptへの理解がない状態でReactを使うと、Reactが分かっていないのか、JavaScriptが分かっていないのかが切り分けられず、問題の解決が困難になります。

これがReactが難しいと思われる大きな原因の一つであると私は感じています。

本コースではReactの書き方だけではなくJavaScriptの記述で複雑に感じるであろう部分についても適宜説明しています。

これによって、JavaScriptへの十分な理解がなくてもコースを受講していただけるようにしています。

■ 知っておくべきこと２ | Reactが持つ独特の記述ポリシー

また、Reactを使いこなすためにはReactのポリシー（書き方）についても知る必要があります。

プログラミング入門者はプログラミング経験自体が浅いため、新しい言語やライブラリに出会った際に過去の経験に当てはめて最適な記述方法を考察することができません。

そのようなことを教えてくれる先輩がいればラッキーですが、多くの人はそのような恵まれた環境ではないと思います。そのため、「これで合ってるのかな？」と何となくモヤモヤした気持ちで学習をしていることと思います。

繰り返しになりますが、Reactのコードを記述する際は独特のポリシーが存在します。

そのため、そのポリシーを学べば、どのようにしてReactを記述すればよいかが自（おの）ずとわかってきます。

一つ例を見てみましょう。

例えば、本コースでは関数型プログラミングというプログラミング手法からみたReactについて触れています。関数型プログラミングというのはクラスを使わず、関数によってプログラムの保守性、拡張性、再利用性、テスト性を高めようというプログラミング言語の書き方です。

React 16.8のReact Hooksの導入からReactのポリシーはクラスを用いたオブジェクト指向型プログラミングから関数型プログラミングに完全に移行しました。そのため、関数型プログラミングがどういったプログラミング手法なのかを知ることはReactを知る上で大変重要な事になってきます。

本コースではそういったReactの背景にある思想なども交えながら、体系的にReactというライブラリについて学んでいきます。

■ 知っておくべきこと３ | Reactを取り巻く周辺知識

上で挙げた２つを学べばReact単体については使いこなせるようになるでしょう。しかし、Reactを実際のアプリで使用しようとするとReactだけを学べばよいということではないことがわかってきます。

実際にはどのようにしてサーバーとの通信をすればよいのか、どのようにReact上でデータを管理すればよいのか、どのようにしてページ管理をしていけばいいのかといった問題にぶち当たることになります。

そういった問題を解決するために本コースではReactのみに留（とど）まらず様々なRest API、Redux、Next.jsなどの周辺知識についても学んでいくことになります。ここで、それらについて全て挙げることはできませんので、興味のある方はレクチャー一覧を一度見てみてください。

■ なぜ本コースなのか？

既存の動画教材では、一本でReactとその周辺知識について体系的に、かつ網羅的に学べる教材がないように感じています。

ただ、初心者の頃は自分自身で断片的な知識をつなぎ合わせることは困難です。（そもそも、どの情報を学ぶべきで、どの情報は必要ないのかを取捨選択することも困難でしょう。）そのため、体系的、かつ網羅的に学べる教材は初心者の方にとってきっと大きな力になってくれると思います。

本コースではReactにおける確固たる基礎とその周辺の学ぶ必要のある知識にフォーカスし、Reactを最短で習得することを目的としています。

最短でReactについての基礎を固めたい方は是非本コースを試してみてください。

■ 最後に

私は「なぜこのように書くのか？」「なぜそのような挙動になるのか？」を知ることがプログラミングの上達には極めて重要だと感じています。プログラミング言語やライブラリは日々進化し続けます。そのため、暗記した知識は時代とともに使い物にならなくなってしまいます。

また、プログラムの書き方はグーグルで検索すればいくらでも確認する事ができますが、それを自分の状況に合わせて使うためには動作を理解する必要があります。そのため、プログラミングの上達においては「覚えること」よりも「理解すること」が大切になってきます。

これは本コースで学ぶReactにおいても変わりません。ただ書き方を暗記するのではなく、「なぜそのように書くのか？」「なぜそのような挙動となるのか？」それを知ることによって応用の効く技術を習得することができます。

本コースを終えた方が「Reactってそんな難しくないじゃん！」と思っていただければ、大変嬉しく思います。

■ 各種バージョン情報

React: 18.1.0

Redux: 4.2.0

Next.js: 12.1.6

TypeScript: 4.6.4

Node.js: 16

1. はじめに
2. なぜReactなのか？
3. コース概要
4. コースの進め方
5. Udemyでの学習の進め方
6. ★重要★資材のダウンロード & 受講準備
7. ★重要★コースで使用するVSCodeの拡張機能を準備しよう
8. VSCodeのショートカットの使い方について学ぼう
9. 【スキップ可】Reactで頻出のJavaScriptの記法
10. セクション紹介
11. npmコマンドの使い方
12. 本セクションのコードの実行方法
13. アロー関数の記法について学ぼう
14. ESModuleのExport/Importについて学ぼう
15. コールバック関数の挙動について学ぼう
16. DOMとイベントリスナについて学ぼう
17. 配列のmap、filterメソッドについて学ぼう
18. 分割代入について学ぼう
19. スプレッド演算子と残余引数について学ぼう
20. 三項演算子について学ぼう
21. truthyな値、falsyな値について学ぼう
22. Promiseについて学ぼう
23. await/asyncの使い方について学ぼう
24. まずはReactに触れてみよう
25. Reactを動かしてみよう
26. Reactコンポーネントって何？コンポーネントを定義してみよう
27. Reactのプロジェクトの作成方法（create-react-appの使い方）
28. ★重要★本コースで使用するプロジェクトの使い方
29. コンポーネントにスタイルを当ててみよう
30. コンポーネントの分割方法
31. 【練習】コンポーネントの分割方法
32. 不要なタグを出力しないFragmentの使い方
33. JSX内でJSコードを実行してみよう
34. 【TIPS】式と文の違い
35. 【練習】JSX内で式を使ってみよう
36. propsでコンポーネントに値を渡してみよう
37. propsに色々な値を渡してみよう
38. 【練習＆解答】propsで値を渡してみよう
39. 特別なプロパティ ~ props.children
40. propsの重要なルール
41. JSXの正体
42. React要素ツリーとコンポーネントツリー
43. セクションまとめ
44. イベントリスナと状態管理（State）
45. セクション紹介
46. イベントに合わせて関数を実行してみよう
47. 開発でよく利用するイベントタイプ
48. イベントに合わせて画面表示を更新してみよう
49. 【重要】ステートとは？
50. 【重要】ステートとレンダリングの仕組み
51. 【複数のステート】ステート使用時の注意点！
52. 【更新は即時ではない】ステート使用上の注意点！
53. 【練習】ステートの処理を自分で記述してみよう
54. オブジェクト型のステートを使う際の注意点！
55. 【重要】オブジェクトのステートは新しいオブジェクトを設定する！
56. 【練習】オブジェクトのステートを更新
57. 配列のステートを使う際の注意点！
58. ステートとコンポーネントの関係
59. ステートを複数のコンポーネントで管理しよう！
60. 【練習】ステートの受け渡し
61. セクションまとめ
62. 制御構文とフォームの制御
63. セクション紹介
64. 配列をリスト表示
65. 【重要】リストには必ずキーを設定
66. 【練習】リストにキーを設定してみよう
67. 配列のフィルターメソッドの使い方
68. 【練習】フィルターメソッドの使い方を練習してみよう
69. 条件分岐を設ける方法まとめ
70. コンポーネントのリファクタリング
71. 【Form】inputとtextareaの作成方法
72. 【Form】ラジオボタンの作成方法
73. 【Form】チェックボックスの作成方法
74. 【Form】複数選択チェックボックスの作成方法
75. 【Form】プルダウンの作成方法
76. Todoアプリを作ってみよう
77. スタイリング
78. セクション紹介
79. インラインスタイルの使い方！
80. インラインスタイルの注意点！
81. 外部CSSのimportを使ったスタイリング
82. CSS Modulesを使ったスタイリング
83. 【styled-components】CSS-in-JSを使ったスタイリング
84. 【styled-components】【発展】CSS-in-JSを使ったスタイリング
85. 【練習&解答】styled-components
86. 【まとめ】Reactでのスタイルの適用方法
87. 【付録】ReactでのCSSフレームワーク【Part.1】
88. 【付録】ChakraUIを使ってみよう【Part.2】
89. 【付録】ChakraUIを使ってみよう【Part.3】
90. ReactでDOM操作を行う方法
91. セクション紹介
92. 【createPortal】モーダルの作り方
93. 【Bubbling】Portalを使う際の注意点！
94. 【練習＆解答】createPortalでトーストを作成してみよう
95. 【useRef】refでDOMを直接操作してみよう
96. 【useRef】refで動画プレイヤーを作成してみよう
97. 【useRef】refとは？refとstateの違い
98. 【forwardRef】他のコンポーネントのDOMにアクセスする方法
99. 【useImperativeHandle】refへのアクセスを限定する方法
100. 【練習＆解答】refの使い方
101. セクションまとめ
102. 【スキップ可】問題への対処法
103. セクション紹介
104. エラーの解消方法
105. デバッガーを使ってみよう
106. React Developer Toolsの使い方
107. Google検索の仕方
108. 【発展】関数型プログラミング
109. セクション紹介
110. 関数型プログラミングとは？
111. 状態と処理の分離
112. 純粋関数
113. 不変性（immutability）【Part.1】
114. 不変性（immutability）【Part.2】
115. Reactと純粋関数
116. Reactにおける状態と処理の分離
117. Reactにおける不変性
118. 【まとめ】関数型プログラミング
119. JavaScriptコードと見比べてみよう
120. 【React Hooks】様々な状態管理の方法
121. セクション紹介
122. useReducerを使ってみよう
123. useReducerとuseStateの違い
124. useReducerとuseStateの違い（関数型プログラミング視点）
125. 【練習＆解答】useReducer
126. useContextでグローバルな値を管理しよう
127. useContextでstateを管理してみよう
128. useContextのリファクタリングをしてみよう
129. useContextを使う際の注意点！
130. useContextとuseReducerを組み合わせて使ってみよう
131. 【練習＆解答】useContextとuseReducer
132. 【練習】useContextとuseReducer
133. 【解答】useContextとuseReducer
134. 【解答続き】useContextとuseReducer
135. 【React Hooks】useEffectとカスタムフック
136. セクション紹介
137. useEffectとは？タイマーを作りながら学んでみよう
138. useEffectの依存配列の使い方
139. 【練習&解答】useEffect
140. useEffectのクリーンアップ処理の使い方
141. useEffectの実行タイミングをおさらいしよう
142. useLayoutEffectって何？useEffectとの違いについて学ぼう
143. useEffectの実行順を意識して実装してみよう
144. 独自のフックを作成してみよう
145. 【練習&解答】Custom Hook
146. 【発展】関数型プログラミングから見たuseEffectの使用ケース
147. 【発展】ReduxとRedux Toolkit
148. セクション紹介
149. Reduxとグローバルな状態管理
150. ★本セクションのサンプルコードの実行方法
151. Reduxを使ってみよう
152. Reduxの状態管理方法について学ぼう
153. 複数のReducerを使う方法
154. Action CreatorでActionを定義してみよう
155. Redux ToolkitでReduxを書き換えてみよう
156. Redux Toolkitにおけるミュータブルな値の変更
157. Immerを使ったミュータブルな値の変更
158. Redux Thunkとは？Redux Middlewareとの関係
159. Redux Thunkで非同期処理を記述してみよう
160. 非同期処理のステータスを画面に表示してみよう
161. Redux Middlewareを作成してみよう
162. セクションまとめ
163. 【スキップ可】クラスコンポーネント
164. セクション紹介
165. クラスコンポーネントとは？
166. クラスコンポーネントを定義してみよう
167. クラスコンポーネントでの状態管理
168. ライフサイクルメソッドとは？
169. Error Boundaryの実装方法
170. 【発展】パフォーマンスの最適化
171. セクション紹介
172. 【レンダリング】画面が更新されるまで
173. Stateの比較処理（Object.is）
174. 【TIPS】StrictModeとは？
175. 子コンポーネントの不要なレンダリング
176. React.memoを使った不要なレンダリングの防止
177. useCallbackを使った関数のメモ化
178. useCallbackの依存配列の使い方
179. useMemoを使った値のメモ化
180. セクションまとめ
181. 【React18】useTransitionでUIのパフォーマンス改善
182. 【React18】useDeferredValueでUIのパフォーマンス改善
183. Rest APIを使ったサーバーとの通信
184. セクション紹介
185. REST APIとは？
186. JSONとは？
187. JSON ServerでモックアップAPIを作成
188. Axiosを使ってサーバーからデータを取得しよう
189. 取得したデータを画面に反映してみよう
190. GUIでリクエストの状態を確認しよう
191. 更新リクエストをサーバーに送信してみよう
192. リクエストと画面処理を統合しよう
193. 【発展】ダイナミックインポートとは？
194. 【発展】コンポーネントのダイナミックインポート
195. Next.js（Part.1）基本的な使い方
196. セクション紹介
197. Next.jsとは？なぜNext.jsを使うのか？
198. Next.jsをインストールしてみよう
199. 書きながら学びたい人はこちらを受講ください
200. ルーティングとは？基本的な書き方について学ぼう

Reactフレームワークの「Next.js」を初めて触る人に向けたコース構成になっています。

■ 本コースの対象者

・Reactは一通り学んだから次のステップとしてNext.jsを学びたい方

・Next.js完全初心者の方

・Next.jsを学んでReactの違いを明確に理解しておきたい方

・Next.jsの公式ドキュメントを読んでもイマイチ理解が深まらない方

・公式ドキュメントよりも動画でサクッと理解したい方

・CSRではない最新のレンダリング手法のSSG・SSRを学んでみたい方

Reactよりも最適化されたアプリやサイトを構築できます。

Next.jsフレームワークを学べば高速化されたWeb開発が可能に。

モダンなフロントエンド技術に乗り遅れたくない方は必見の内容です。

■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

・Next.jsの公式ドキュメントに沿った内容で講座を構成しています。

・すでにNext.jsの公式ドキュメントを読み終えて理解済みの方は、

この講座では新しい学びがないので受講しないようにしてください。

・ISRについては取り扱っておりません。

1. 本講座を受講する流れ
2. 本講座で学ぶこと・デモ
3. 本講座の学習の流れ
4. Next.jsの基礎を学ぼう
5. Next.jsって何？なぜ必要なの？
6. プリレンダリングって何？
7. SSGとSSRって何？
8. 【追加教材】SSGのより分かりやすい説明
9. Next.jsの開発環境を構築しよう
10. VSCodeをインストールしよう
11. Node.jsをインストールしよう
12. 開発用フォルダを作ってNext.jsのひな型を作成しよう
13. Next.jsファイル群の中身の説明
14. Next.jsの開発効率が上がるプラグインをインストールしよう
15. ①Next.jsでマイクロブログを構築(ページ遷移、スタイリング編)
16. はじめに：完成品デモ
17. Next.jsにおけるホットリローディングを体感しよう
18. pagesフォルダでルーティング設定をしてみよう
19. Linkコンポーネントでページ遷移をしてみよう
20. 静的な画像ファイルの取り扱いについて(publicディレクトリ)
21. Headコンポーネントを使ってメタデータを追記しよう
22. 複数ページに共通して使えるレイアウトコンポーネントを作成してみよう
23. Next.jsにおけるcssスタイリング適用方法を学ぼう
24. タイポグラフィに関するCSSモジュールを用意しよう
25. _app.jsにグローバルスタイリングを適用させてみよう
26. トップページのレイアウトを更新しよう
27. トップページのスタイリングを調整しよう
28. ②Next.jsでマイクロブログを構築(プリレンダリング編)
29. はじめに
30. Next.jsでプリレンダリングを実感してみよう
31. ブログ投稿用データを準備しよう
32. マークダウン解析のためのライブラリを作成しよう
33. getStaticPropsでSSGを実装してみよう
34. propsで受け取った静的データをmap関数で出力して表示しよう
35. getServerSidePropsの書き方も知っておこう
36. ③Next.jsでマイクロブログ構築(動的ルーティング編)
37. はじめに
38. Next.jsにおける任意のURLを動的ルーティングとして設定する方法
39. 各ブログファイル名(id)のオブジェクトを返す関数を作成しよう
40. getStaticPathsを実際に使ってみよう
41. 外部から一度だけデータを取得するSSGを実装しよう
42. ブログIDに応じた記事内容を返す関数を用意しよう
43. 実際にgetStaticPathsとgetStaticPropsを実感してみよう
44. ブログ記事のレイアウトを訂正しよう
45. フォールバックについて補足
46. 404 Not Foundページをカスタマイズしてみよう
47. ブログの細かい訂正をしよう(その１)
48. ブログの細かい訂正をしよう(その２)
49. ④Next.jsでマイクロブログ構築(デプロイ編)
50. buildコマンドを実行して本番前にプレビューしてみよう
51. デプロイするためにGitHubアカウントを作成しよう
52. Vercel社が開発したデプロイサービスを利用しよう
53. DPSワークフローを体験してみよう(その１)
54. DPSワークフローを体験してみよう(その２)
55. Next.jsが本当にページを高速にレンダリングしているか確認してみよう
56. ボーナスレクチャー
57. 最後まで受講していただいた方へ
58. ボーナスレクチャー

NestJSは、ExpressをベースとしたNode.jsのバックエンド開発フレームワークであり、依存性注入を始めとしたモジュールの疎結合を実現する優れたアーキテクチャを導入しているため、誰でも保守性が高くスケーラブルで高品質なバックエンドアプリケーション開発を行うことが可能になります。

本コースでは、NestJSを使用したREST API開発手法及び、フロントエンドフレームワークであるNext.jsとの連携手法について学習します。

• Controller, Service, Module

• DI (Dependency Injection)

• DTO (Data Transfer Object)

• class-validator

• Prisma (ORM)  with Postgres (Docker)

• Cookie based JWT

• HttpOnly, SameSite, Secure property

• CSRF token

• CORS

• Deploy to Render or Heroku *Heroku無償プラン廃止に伴い, Render無償プランでのDeploy方法を追加済み

• Integration of NestJS and Next.js

• Mantine UI

• State management by @tanstack/react-query + zustand

• Deploy to Vercel

1. Introduction
2. Overview
3. Node version
4. REST API by NestJS
5. GitHub repo
6. Create NestJS project
7. DI (Dependency Injection)
8. Prisma with Postgres (Docker)
9. Module・Controller・Service
10. Prisma Service
11. Authentication Strategy
12. AuthService + AuthController
13. [補足] custom.d.ts
14. JWT strategy + User Service/Controller
15. Todo Service + Controller
16. CSRF Token
17. Integration of Next.js and NestJS
18. GitHub repo
19. create-next-app
20. Authentication page
21. useQuery
22. useMutation
23. Todo functionality
24. Deploy NestJS to Render
25. Deploy Nextjs to Vercel
26. 更に学びたい人向け
27. ボーナスレクチャー

Update log

2022/08/27: 2022 11月にHerokuの無料プランが廃止される為、Render無料プランでのDeploy手順を追加 (lecture 24)

Webサイト開発の最新技術、Nextjs + Tailwind CSSを習得します。

*本コースでは、Nextjsの解説がメインなので、Django REST Frameworkは解説少なめでさくっと作ってしまうのでご了承ください*

Incremental Static Regeneration(ISR), Static Site Generation(SSG), SSG+ISR+Client Side Fetching(useSWR)の挙動を完全理解する為、REST APIのサーバーデータを操作しながらNextjsの理解を深めていきます。コースでは、Nextjsの機能を理解しながらNextjsプロジェクトを二つ作成していきます。

Project 1 : 簡易ホームページ (外部APIのブログ記事をpre-rendering)

Project 2 : 認証機能付き ブログ+Todos (オリジナルREST APIと連携してSSG+ISR+useSWR)

本コースで学ぶトピック

• Nextjsプロジェクト作成

• Tailwind CSSの導入

• LinkによるClient-side-navigation

• Layoutコンポーネントの活用

• useRouter

• Static Site Generation(SSG)

• Incremental Static Regeneration(ISR)

• Stale While Revalidation

• useSWR

• fallbackの理解

• revalidateの理解

• Dynamic routing

• getStaticProps

• getStaticPaths

• useContext(state management in Nextjs)

• Deploy to Vercel

• JWT認証機能

• universal-cookie

• Django REST FrameworkによるREST API実装

• REST APIのDeploy

• REST APIとNextjsの連携 (node-fetch + client side fetch(useSWR)

• SSG + ISR + CSR(useSWR)を組み合わせた、SEO対策+リアルタイムデータ取得手法

1. What is Nextjs ?
2. はじめに
3. Next.jsを学ぶモチベーション
4. SSG, ISR, CSR (useSWR)
5. コースで必要なツールのインストール
6. Nextjs Project 1 (HP編)
7. Source code
8. [注意] Tailwind CSS ver3.0
9. [注意] create-next-appのversion
10. create-next-appとTailwind設定
11. Nextjs ver11以降対応
12. Layout component
13. Contact page
14. getStaticProps
15. getStaticPaths (Dynamic routes)
16. [注意] Vercel deploy document link
17. Deploy to Vercel
18. Automatic Deploy
19. [訂正] オブジェクト変換
20. REST API (Django REST Framework)
21. Source code
22. [注意] PyJWT version
23. django startproject
24. [注意] install version
25. models, serializers, views, urls
26. End pointの動作確認
27. [訂正] Python runtime と requirements.txtファイル
28. Deploy to Heroku
29. [追加] Deploy to Render
30. Nextjs Project 2 (Blog + Todos編)
31. Source code
32. [補足] 次のレクチャーのTailwind設定
33. [注意] Tailwind CSS ver3.0
34. [注意] create-next-appのversion
35. create-next-app
36. [補足] Sign-in and Registration テンプレートについて
37. Auth component UI
38. [補足] remove cookie
39. Auth component (Function)
40. Heroku going to sleep mode
41. Main page
42. getStaticProps (Blog REST API)
43. Incremental Static Regeneration (ISR)
44. [更新] useSWR ver 1.0.0 以降
45. [訂正] npm run dev
46. useSWR + ISR + SSG
47. [更新] useSWR ver 1.0.0 以降
48. Dynamic routes (useSWR + ISR + SSG)
49. deleteTask
50. create and update Task
51. Deploy to Vercel + update CORS whitelist
52. [訂正] オブジェクト変換
53. 更に学びたい人向け
54. ボーナスレクチャー

■ 本コースの対象者

・Next.js初心者から中級者へステップアップしたい方

・Next.jsを使ってショッピングサイトを作ってみたい方

・Next.jsを一通り学び終え、より実践的なアプリケーションを作りたい方

・Stripe決済システム込みのショッピングサイトを構築したい方

・Strapiと呼ばれるヘッドレスCMSでWebAPIをサクッと構築したい方

・GraphQLを使ってAPIフェッチング手法を学びたい方

Next.jsフレームワーク中級者向けの講座内容です。

Amazonのような決済システム込みのショッピングサイトを

１から構築しながらNext.jsの理解をより深める内容となっています。

これからNext.jsを使った業務・お仕事をする方には必見の内容です。

■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

・Next.jsの基礎的な使い方を理解している

1. はじめに
2. 本講座で学ぶこと
3. 本講座の学習の流れ
4. Strapi入門
5. Strapiって一体なに？
6. まずはStrapiを試しに使ってみよう
7. 食べ物のコレクションを作成してみよう
8. 具体的な食べ物のデータを入力してみよう
9. 登録した食べ物データをGETメソッドで取得してみよう
10. Postmanとは
11. Postmanをインストールしよう
12. 実際にPostmanを使ってAPIテストをはじめよう
13. Strapiにユーザー追加と権限を与えてみよう
14. Postmanを使って新しい食べ物を追加する作業を始めよう
15. 本セクションを振り返ってみよう
16. Next.jsでショッピングサイトを構築(Nextjsセットアップ編)
17. 完成品のデモ
18. Next.jsでフロントエンド用プロジェクトを作成してみよう
19. Next.jsのローカルサーバーが立ち上がるか確認しよう
20. _app.jsの中身を１から記述してみよう
21. CSSライブラリのreactstrapをインストールして使ってみよう
22. ページ共通部分のLayoutコンポーネントを作成しよう
23. Next.jsでショッピングサイトを構築(データフェッチング編)
24. 【修正最新版】Strapiでバックエンド用プロジェクトを作成しよう
25. 【修正最新版】Nodeのバージョンを14.xx.xxに変更してみよう
26. レストランのデータを作成してみよう
27. レストランのデータを取得できるか確認してみよう
28. GraphQLプラグインをインストールして利用してみよう
29. Next.jsにApolloをインストールしてみよう
30. GraphQLが使えるようにサーバー設定をしよう
31. レストラン一覧を検索・表示するページを作成しよう
32. レストランカードのコンポーネントを作成してみよう
33. レストランカードをCSSでスタイリングしよう
34. GraphQLからAPIを叩いてデータを取得してみよう
35. APIから取得したデータでHTMLを書き換えてみよう
36. 検索欄に打ち込む値を格納する機能を追加しよう
37. 検索バーにおけるフィルタリング機能を実装しよう
38. データ取得の失敗、ローディング時に出力する内容を追加しよう
39. 料理のデータ構造を定義してみよう
40. レストラン個別に料理データを追加しよう
41. レストラン固有のページを作成してみよう
42. レストランIDを使って個別にAPIを叩いてみよう
43. 料理データをページに出力して表示させよう
44. レストラン固有ページのレイアウトを修正しよう
45. Next.jsでショッピングサイトを構築(ユーザー登録・ログイン編)
46. ユーザーアカウント登録に必要なライブラリ群をインストールしよう
47. アカウント登録用のページを作成してみよう
48. アカウント登録ページをCSSでスタイリングしよう
49. アカウント登録やログイン用のファイルを作成してみよう
50. ユーザー状態をグローバルに監視してみよう
51. 実際にアカウント登録の関数を使ってみよう(その１)
52. 実際にアカウント登録の関数を使ってみよう(その２)
53. ヘッダーのリンクをユーザー状態によって変更してみよう
54. ログイン用コンポーネントを作成してみよう
55. ユーザーログイン関数を自作してみよう
56. 実際にログインしてみよう
57. Promiseオブジェクトを使って修正をしよう
58. クッキーが残っていればそのユーザーで自動的にログインさせよう
59. Next.jsでショッピングサイトを構築(ショッピングカート編)
60. ショッピングカート用コンポーネントを作ってみよう（その１）
61. ショッピングカート用コンポーネントを作ってみよう(その２)
62. ショッピングカートをCSSでスタイリングしてみよう
63. カートに商品を追加するロジックを構築してみよう
64. すでにカートに同じ商品が入っている場合のロジックを構築してみよう
65. 商品フィールドに数量のフィールドを追加しておこう
66. 実際にカートに商品を追加してみよう
67. 追加した商品をカートへ出力してみよう
68. カートから商品を削除するロジックを構築してみよう
69. 実際にカートから商品を削除してみよう
70. クッキーを利用して以前注文した商品を取得してみよう
71. Next.jsでショッピングサイトを構築(決済システム編)
72. 注文用のコレクションを新しく追加しよう
73. 決済システム用にStripeに登録してみよう
74. バックエンド側で注文用ロジックを構築してみよう
75. Stripeドキュメントを見ながら料金支払いロジックを構築しよう
76. バックエンドにStripeライブラリをインストールしよう
77. JSON.parseエラーを解決しよう
78. チェックアウトページを作成してみよう
79. チェックアウトページをCSSでスタイリングしよう
80. 住所やカード情報を打ち込むコンポーネントを作成しよう
81. カード情報を打ち込むためのCardSectionコンポーネントを作成しよう
82. カード情報を送信するボタンを作成してみよう
83. 注文情報を送るロジックを考えて構築してみよう
84. 住所情報も一緒に合わせて注文してみよう
85. 安全にカード情報を送るためのトークンも追加しよう
86. 実際に料理を注文して決済してみよう！
87. 決済が完了したかどうかを画面に表示させよう
88. ボーナスレクチャー
89. 最後までご受講いただいた方へ
90. 【※補足追加】nodistをインストールした方へ
91. ボーナスレクチャー