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

「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: 14.1.3

TypeScript: 4.6.4

Node.js: 18.17.0

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

Next.jsフルスタックWebアプリケーション開発入門

Next.jsは、Reactのエコシステム内で急速に人気を集めるフレームワークです。

特に最近のアップデートで、Next.jsのコア機能であるルーティングにおいて、Pages RouterからApp Routerと呼ばれる方法に変わり、パフォーマンスや開発体験を大きく向上させる機能として非常に注目度が高まっています。

本コースはApp RouterやServer ActionsなどNext.jsのモダンな機能を中心にステップバイステップで学習を進めます。

また実践的なプロジェクトを通じて、Next.jsでのフルスタックアプリケーション開発について学びます。

コースの内容：

1. Next.jsの基礎: 簡単なサンプルを通じて、App Router、Server Actionsを含むNext.jsのコア機能を学習します。

2. Next.jsを使用したフルスタックアプリケーション開発: 実際のプロジェクトを通じて、フロントエンドとバックエンドの両方でNext.jsを使用した開発の流れをマスターします。

3. アプリケーションのデプロイ: アプリケーションをデプロイして公開する方法を学びます。

   
   

コースの目標：

• Next.jsのモダンな機能をキャッチアップ

• Next.jsを使用した基本的なフルスタックアプリケーションの開発方法を習得

このコースは、Reactの基礎を習得し次のステップとしてNext.jsを0から学びたい初心者から、旧バージョンのNext.jsは学習済みで最新機能を素早くキャッチアップしたい経験者まで幅広く対応しています。

実践的な例を通じて、モダンなNext.jsの機能について学んでいきましょう。

1. イントロダクション
2. コースの紹介
3. 注意事項
4. 必要なソフトウェアのインストール
5. Next.js（App Router）の基礎
6. Next.jsの環境構築
7. 基本的なルーティング Part1
8. 基本的なルーティング Part2
9. 動的ルーティング
10. 共通レイアウト
11. ルートグループ
12. エラーコンポーネント
13. サーバーコンポーネントとクライアントコンポーネント Part1
14. サーバーコンポーネントとクライアントコンポーネント Part2
15. ルートハンドラー Part1
16. ルートハンドラー Part2
17. ローティングコンポーネント
18. Server Actions Part1
19. Server Actions Part2
20. Server Actions Part3
21. ミドルウェア
22. タスク管理アプリケーションの画面実装
23. コースで作成するアプリケーションのデモ
24. プロジェクトのセットアップ
25. 共通レイアウトの作成
26. サイドメニューの実装 Part1
27. サイドメニューの実装 Part2
28. メインページの実装
29. タスクカードの実装 Part1
30. タスクカードの実装 Part2
31. 完了タスクページと期限切れタスクページの実装
32. タスク作成ページの実装
33. タスク編集ページの実装
34. NotFoundページの実装
35. エラーページの実装
36. タスクのCRUD機能の実装
37. MongoDBのセットアップ
38. MongoDBとの接続設定
39. タスクモデルの作成
40. ライブラリアップデートに伴う変更点
41. タスク作成機能の実装 Part1
42. タスク作成機能の実装 Part2
43. タスク一覧取得APIの実装
44. メインページからタスク一覧の取得 Part1
45. メインページからタスク一覧の取得 Part2
46. IDによるタスク取得APIの実装
47. タスク編集機能の実装 Part1
48. タスク編集機能の実装 Part2
49. タスク削除機能の実装
50. 完了タスクページの実装
51. 期限切れタスクページの実装
52. ローディングコンポーネントの実装
53. デプロイ
54. GithubにRepositoryの作成とpush
55. Vercelにデプロイ
56. ボーナスレクチャー
57. 最終的なソースコード
58. ボーナスレクチャー

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

1. はじめに
2. はじめに
3. 本講座で扱う技術スタックフロー
4. 本講座の完成品デモ
5. 本講座の完成品ソースコード
6. 電子記事販売ECサイト開発【レイアウト実装～認証機能追加編】
7. Next.js14でプロジェクトの雛形を作成しよう
8. Vercel Postgresのセットアップをはじめよう
9. Next.js14でGoogleFontを変更してみよう
10. Headerコンポーネントを作成してみよう
11. HomePageに本の疑似データを出力させてみよう
12. ログインページの作成してみよう
13. NextAuth.jsで認証機能の実装をはじめよう
14. GithubProviderで必要なIDとシークレットキーを準備しよう
15. Prismaをインストールして初期セットアップをはじめよう
16. prismaをグローバルインスタンスで定義しよう
17. Prismaのモデルを作成してマイグレーションしよう
18. NextAuthのプロバイダー取得のために認証用APIを作ってみよう
19. getProvidersを利用してgithubからサインインできるようにしよう
20. ログイン時のエラーを解決してみよう
21. useSessionを利用してログインしているユーザー情報にアクセスしてみよう
22. 電子記事販売ECサイト開発【MicroCMSで電子記事作成～API構築編】
23. MicroCMSの初期セットアップをはじめよう
24. 実際に電子記事データを作ってみよう
25. microcms-sdkを使ってクライアントの初期化をしよう
26. 全電子記事取得用の関数を用意しよう
27. 電子記事用の型を用意しておこう
28. 商品をクリックした時のモーダルを実装してみよう
29. ログアウト機能を実装してみよう
30. 電子記事販売ECサイト開発【Stripe決済～電子記事詳細ページ編】
31. Stripeアカウントを作成してAPIキーを取得してみよう
32. Stripeチェックアウト決済用APIを作ってみよう
33. 実際にチェックアウト決済APIを叩いてみよう
34. チェックアウト決済ページへ遷移しない問題を解決してみよう
35. 購入成功ページを作って購入履歴を保存するAPI作成をはじめよう
36. 購入履歴の保存を行うために必要なユーザーと書籍情報を準備しよう
37. 購入履歴保存の重複を回避しよう
38. 実際に電子記事の購入履歴を保存してみよう
39. PrismaValidationErrorとその他エラーを解決してみよう
40. useEffectが2回発火されている問題を解決しよう
41. 購入成功ページから電子記事詳細ページへ飛べるようにしよう
42. 電子記事詳細ページを作成してみよう
43. MicroCMSから固有の記事を取得する関数を作ってみよう
44. 実際に記事詳細ページを表示してみよう
45. 商品購入履歴検索のAPIを作ってみよう
46. 購入履歴検索APIを叩いてレスポンスを確認しよう
47. bookIdを取り出して選択した商品のbookIdと比較してみよう
48. ユーザーの型を定義しておこう
49. 電子記事販売ECサイト開発【ユーザープロフィール編】
50. ユーザープロフィールページを作成しよう
51. ユーザーの購入履歴からbookIdを取り出し、それを利用して詳細記事を取得しよう
52. ユーザー購入記事をプロフィール画面に出力させよう
53. もう1記事追加して今までの実装が動くのか確認しよう
54. 電子記事販売Webアプリ開発【修正編】
55. ログイン/ログアウト実装をNextAuth.js搭載のAPIから行おう
56. Suspenseを使ってローディングを実装しよう
57. 電子記事販売Webアプリ開発【デプロイ編】
58. Vercelへデプロイしてみよう
59. 本番環境でのNextAuthエラーを解決してみよう
60. 購入成功ページへ正常にリダイレクトできるように修正しよう
61. MicroCMSのWebHook設定をはじめてみよう
62. 最新記事データを反映させるためにmicrocms-sdk-jsでSSRを実現してみよう
63. 電子記事販売Webアプリ開発【チューニング～リファクタリング編】
64. デプロイ後のパフォーマンス検証をやってみよう
65. ISRに変更して、どのくらい速度が変わるのか体感してみよう
66. リファクタリングできる箇所がないか探してみよう
67. ボーナスレクチャー
68. 最後までご受講くださった方へ

Next.js13の最新バージョンを学ぶ講座となっています。

以前のNext.js12のバージョンでは/pagesディレクトリ構造が基本でしたが、最新バージョンでは/appディレクトリ構造が基本となっています。

■ 本コースの対象者

・Next.js12のバージョンは扱えるが、Next.js13の最新バージョンのキャッチアップが出来ていない方

・Next.js13におけるApp Routerの取り扱い方とAPI構築(App Routing)の方法を学びたい方

・Next.js初心者の方

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

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

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

・CDNやキャッシュについて学びたい方

最近のフロントエンド界隈ではReactよりも高速に動くNext.jsが採用されるケースが増えてきました。

最新のNext.js13のバージョンをキャッチアップしておくことで、すぐに応用して実務で活かすことができます。

知っておきたいクライアント・サーバーサイドレンダリングやプリレンダリング(SSG/SSR/ISR)の知識がこの講座１つで身に着けることができます。

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

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

・Reactの基礎は教えていません(JSXや関数コンポーネントの作り方等)

・簡単なターミナルコマンドの取り扱いも教えておりません。

1. はじめに
2. 本講座で学べること
3. 本講座の完成品デモ
4. 完成品のソースコード
5. Next.jsの基礎とNext.js12とNext.js13の違いを理解しよう
6. なぜNext.jsが誕生したのか？
7. ReactとNext.jsの違いってなに？
8. Next.jsの使いどころとメリット・デメリット
9. SSRとSSGってなに？使い分けはどうするの？
10. ISRってなに？どんな場面で使うの？
11. 具体的にNext.js13になって何が変わったの？
12. Next.js13の開発環境を構築しよう
13. VSCodeをインストールしよう
14. Node.jsをインストールしよう
15. Next.js13最新版で開発環境を構築してみよう
16. ファイル群とappディレクトリの説明
17. プログラムの開発効率が上がるプラグインをインストールしよう
18. ①Next.js13でマイクロブログを構築(ブログのレイアウト構築編～TailWindCSSを使用～)
19. layout.tsxにヘッダーとフッターを追加してみよう
20. ブログ共通ヘッダーを作ってみよう
21. ブログ共通フッターを作ってみよう
22. page.tsxの中身を記述してsectionを追加してみよう
23. ブログ記事投稿一覧をHTMLとTailwindCSSで作ってみよう：その１
24. ブログ記事投稿一覧をHTMLとTailwindCSSで作ってみよう：その２
25. ブログ新規作成用のページを作成してみよう
26. ②Next.js13でマイクロブログを構築(json-serverを使ってブログ用モックデータ構築編)
27. モックデータ用にjson-serverを導入してみよう
28. SSRでブログ全記事データを取得するAPIを作ってみよう
29. APIを叩いて全記事をブラウザに出力してみよう
30. 【補足】SSRではなくCSRでAPIを叩く場合
31. エラー用ページを作成して意図的にエラーを発生させよう
32. ローディング用ページを作成して遅延した際のローディングを実装してみよう
33. ブログ記事の詳細ページを作ってみよう
34. ISRでブログ詳細取得用APIを作ってみよう
35. 詳細記事内容の表示とサムネイル表示を修正しよう
36. ブログ本文の文字数制限を設けてみよう
37. Footerの位置をTailwindCSSで調整しよう
38. 404notFoundページを作ってみよう
39. ブログ投稿用APIを構築してみよう
40. APIを叩いて新規ブログ投稿してみよう
41. 投稿時のローディングアニメーションを実装してみよう
42. ブログ記事削除用のAPIを作ってみよう
43. 削除ボタンを作って実際にAPIを叩いて削除してみよう
44. ②Next.js13でマイクロブログを構築(SupabseでDBを利用してみよう編)
45. Supabaseでデータベースを使ってみよう
46. Supabaseの初期セットアップをしてみよう
47. ブログ記事を保存するためにテーブルを作成してみよう
48. pages/apiディレクトリを作って簡易的にAPIを作ってみよう
49. 実際にブログ全記事取得用APIを叩いてみよう
50. Supabaseで詳細ページ取得用のAPIを作って呼び出してみよう
51. ブログ記事投稿用APIを作って呼び出してみよう
52. ブログ記事削除用APIを作って呼び出してみよう
53. app/apiディレクトリに簡易APIを作ってみよう
54. 詳細記事取得用APIもapp/apiで書き換えてみよう
55. appディレクトリで記事投稿APIを作ってみよう
56. appディレクトリで記事削除APIを作ってみよう
57. ボーナスレクチャー
58. 最後まで受講いただいた方へ
59. ボーナスレクチャー

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

※Next.js13の最新バージョンには対応しておりませんのでご了承くださいませ。Next.js13以前の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.js13の最新バージョンには対応しておりません。

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