Outlecture
Home
About
Technology
Design
Video
Contact
Official
Outlecture
Home
About
Technology
Design
Video
Contact
Twitter Official
  • Home
  • Technology

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

更新日:2023年3月11日

こちらは、独学で Next.js を学ぼうとしている初学者の方に最適な学習講座を紹介するページです。

目次

1. 本ページの説明

1. 本ページの説明

Next.js を独学で学ぶ上でおすすめの講座を動画プラットフォームから合計8選紹介します。

Next.js とは

Next.js(ネクストジェイエス)は、SSRを可能とするReactをベースに開発されたJavaScriptフレームワークです。Reactとの違いはサーバー機能を持っており単体でWebアプリを動作させることができます。また、画像・レンダリングを最適化するという特徴があり、ページの読み込み速度が高速になりSEOにも効果があります。

本サイト「Outlecture(アウトレクチャー)」は講座の評価、情報の鮮度、購入者や視聴者数、直近の数値上昇率などを全てバランスよく採点し、ユーザーにとって最適な講座のみ抜粋できるよう独自のアルゴリズムで評価を行っています。

また、各動画プラットフォームもそれぞれ特徴があり、「こういう状況の方にはこちらの方が良い」というユースケースも合わせて説明していきます。

Next.jsをこれから学ぼうとしているみなさまのご参考にしていただければ幸いです。

2. Udemy おすすめ講座5選

Outlectureで厳選したおすすめのUdemy講座5選はこちらです。

コース名 平均評価 総購入者数 先月の購入者数
(2023年2月)
コースレベル コース時間 作成日 更新日 料金

【2023年最新】React(v18)完全入門ガイド|Hooks、Next.js、Redux、TypeScript

thumbnail
4.62 7,919 702 初級〜上級 24 時間 41 分 2022年3月29日 2023年1月10日 ¥10,000

【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座

thumbnail
4.52 2,738 190 初級 3 時間 22 分 2022年2月22日 2022年7月17日 ¥21,800

NestJS + Next.js によるフルスタックWeb開発

thumbnail
4.43 1,052 82 初級 3 時間 46 分 2022年7月28日 2023年2月25日 ¥27,800

Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発

thumbnail
4.04 3,625 68 初級 4 時間 1 分 2020年12月23日 2023年2月25日 ¥27,800

モダンフレームワークのNext.jsでショッピングサイトを構築してみよう【Stripeで決済システム構築】

thumbnail
4.41 1,112 77 中級 5 時間 39 分 2022年4月9日 2022年7月26日 ¥21,800

Udemy(ユーデミー)は、アメリカ・シリコンバレー発祥のユニコーン企業で、世界最大級のオンライン学習プラットフォームを運営しています。

Udemyの特徴は、

  • 15.5万以上(※海外講座含む)の豊富な講座を提供している
  • 講師陣の多くが世界最先端の現場で活躍されている
  • 1講座あたり数千~数万円で、キャンペーン時は70~90%OFFとなる良心的な値段
  • 講座は1度購入すれば視聴期限なく受講でき、30日返金保証もついている
  • 講座は0.5~2倍の変速機能を備え、自分のペースで学習することができ、専用アプリを使えばスマホからでもオフライン環境で受講可能
  • 講師に直接掲示板から質問ができるため、疑問を解決し自学自習をサポートしてくれる

等があげられます。

Outlectureの管理メンバーは、ソフトウェアエンジニアやクリエイター、webデザイナーが現役で活躍しています。私たちは初めて触るプログラミング言語やプロダクトの多くはUdemyの受講からキャッチアップをはじめています。
私たちの体験談として、Udemyの講座の質は非常に高いと感じています。講師陣が世界最先端で活躍している方々ばかりで、最先端の知識や現場でのノウハウを丁寧にわかりやすく教えてくれます。試験で使う知識ではなく、実際の現場・案件で使う知識と技術を習得することができます。

Udemyの講座は、実際の現場で活用したい方や自己学習を始めたい方に特におすすめです。一度購入すれば、視聴期限がなく、30日間の返金保証もあるため、安心して学びを始めることができます。

こんな方におすすめ

  • 実案件でNext.jsを使用する
  • 現役の(世界)トップ戦線で活躍している方のノウハウを学びたい
  • サブスクリプションの加入に抵抗のある
  • ITの基礎的な知識がある

各講座の詳細は以下に記載します。


【2023年最新】React(v18)完全入門ガイド|Hooks、Next.js、Redux、TypeScript

HTML、CSS、JavaScriptの基礎を終えた方に最適!React入門の決定版!Reactについて知っておくべき基礎知識について体系的、かつ網羅的に学習して、最短でReactをマスターしよう!

thumbnail
平均評価
4.62
総購入者数
7,919
先月の購入者数
(2023年2月)
702
コースレベル
初級〜上級
コース時間
24 時間 41 分
作成日
2022年3月29日
更新日
2023年1月10日
料金
¥10,000

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

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

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


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


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

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


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



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

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

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


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

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


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


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


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

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



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

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

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


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


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

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


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


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


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


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



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

上で挙げた2つを学べば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. ルーティングとは?基本的な書き方について学ぼう
【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座

Next.jsフレームワークでマイクロブログを実際に構築しながら、Webアプリ読み込み速度やWebパフォーマンスを最大化するSSG/SSRプリレンダリング手法が学べる講座。モダンなフロントエンド技術をキャッチアップしてみよう。

thumbnail
平均評価
4.52
総購入者数
2,738
先月の購入者数
(2023年2月)
190
コースレベル
初級
コース時間
3 時間 22 分
作成日
2022年2月22日
更新日
2022年7月17日
料金
¥21,800

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. ブログの細かい訂正をしよう(その1)
  48. ブログの細かい訂正をしよう(その2)
  49. ④Next.jsでマイクロブログ構築(デプロイ編)
  50. buildコマンドを実行して本番前にプレビューしてみよう
  51. デプロイするためにGitHubアカウントを作成しよう
  52. Vercel社が開発したデプロイサービスを利用しよう
  53. DPSワークフローを体験してみよう(その1)
  54. DPSワークフローを体験してみよう(その2)
  55. Next.jsが本当にページを高速にレンダリングしているか確認してみよう
  56. ボーナスレクチャー
  57. 最後まで受講していただいた方へ
  58. ボーナスレクチャー
NestJS + Next.js によるフルスタックWeb開発

Dependency Injection, Prisma, Postgres, Cookie based JWT, CSRF token

thumbnail
平均評価
4.43
総購入者数
1,052
先月の購入者数
(2023年2月)
82
コースレベル
初級
コース時間
3 時間 46 分
作成日
2022年7月28日
更新日
2023年2月25日
料金
¥27,800

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. ボーナスレクチャー
Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発

[最新技術] : ホームページ、LP、ブログなどSEO対策や高速レンダリングに最適なモダンReact フレームワークNext.jsを習得します。

thumbnail
平均評価
4.04
総購入者数
3,625
先月の購入者数
(2023年2月)
68
コースレベル
初級
コース時間
4 時間 1 分
作成日
2020年12月23日
更新日
2023年2月25日
料金
¥27,800

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でショッピングサイトを構築してみよう【Stripeで決済システム構築】

Next.jsを使って実践的なショッピングサイトを1からハンズオン形式で構築します。バックエンドAPIはCMSで有名なStrapiを使用し、決済システムの導入はStripeを使用。よりNext.jsの知識を深めたい人に贈る開発実践講座

thumbnail
平均評価
4.41
総購入者数
1,112
先月の購入者数
(2023年2月)
77
コースレベル
中級
コース時間
5 時間 39 分
作成日
2022年4月9日
更新日
2022年7月26日
料金
¥21,800

■ 本コースの対象者

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

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

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

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

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

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


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

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

1から構築しながら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の中身を1から記述してみよう
  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. 実際にアカウント登録の関数を使ってみよう(その1)
  52. 実際にアカウント登録の関数を使ってみよう(その2)
  53. ヘッダーのリンクをユーザー状態によって変更してみよう
  54. ログイン用コンポーネントを作成してみよう
  55. ユーザーログイン関数を自作してみよう
  56. 実際にログインしてみよう
  57. Promiseオブジェクトを使って修正をしよう
  58. クッキーが残っていればそのユーザーで自動的にログインさせよう
  59. Next.jsでショッピングサイトを構築(ショッピングカート編)
  60. ショッピングカート用コンポーネントを作ってみよう(その1)
  61. ショッピングカート用コンポーネントを作ってみよう(その2)
  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. ボーナスレクチャー

3. YouTubeおすすめ講座3選

Outlectureで厳選したおすすめのYouTube講座3選はこちらです。

動画名 総視聴数 先月の視聴数
(2023年2月)
いいね数 公開日

【Next jsで学ぶReact講座 #1】Reactを学ぶにはNext.jsから入ると効率が良い理由。Next.jsのセットアップからVercelへのデプロイまで!

thumbnail

チャンネル名:しまぶーのIT大学

23,029 4,099 384 2022年11月7日

初めてのNext.js入門!簡単なアプリ実装でNext.jsを基礎から学んでみよう

thumbnail

チャンネル名:プログラミングチュートリアル

16,682 1,778 334 2022年3月12日

【初心者OK】Next.jsで自作ブログを作ってみよう【MicroCMSを利用】

thumbnail

チャンネル名:プログラミングチュートリアル

11,103 1,049 266 2022年8月9日

YouTubeは、広告がつくものの無料で視聴でき、日常生活でもお馴染みとなっています。
最近では、良質な教材も増えており、学びたいけどお金をかけるほどでもない方や、概要をさらっと理解したい方には、YouTubeで学ぶことをおすすめします。

こんな方におすすめ

  • お金をかけずに学びたい
  • Next.jsの概要だけさらっと理解したい

各講座の詳細は以下に記載します。

【Next jsで学ぶReact講座 #1】Reactを学ぶにはNext.jsから入ると効率が良い理由。Next.jsのセットアップからVercelへのデプロイまで!

しまぶーのIT大学

総視聴数
23,029
先月の視聴数
(2023年2月)
4,099
いいね数
384
公開日
2022年11月7日
ついにReact講座が始まります。最初はCreate React Appを使って素のReactで講座を作ってもいいと思いましたが、Next.jsで学んだほうが変なところで詰まることが少なくなり効率が良いと考えました。是非これから一緒にReactをマスターしていきましょう!✨

第1回: https://youtu.be/15WLMqnkPsE
第2回: https://youtu.be/l9BY-uyZpGM
第3回: https://youtu.be/Ai9rMk5QbOo
第4回: https://youtu.be/XScsi491Yuc
第5回: https://youtu.be/5bI7nnrK8Q4
第6回: https://youtu.be/qrF3AbAx_9c
第7回: https://youtu.be/h4981N9af18
第8回: https://youtu.be/-W62SGQaOSI
第9回: https://youtu.be/-0OkztyAgaU
第10回: https://youtu.be/QWDTz8nhK28
第11回: https://youtu.be/aJTyIP4GVC4
第12回: https://youtu.be/yNIVF0Uw5aY
第13回: https://youtu.be/8u75d-qSzPY

🚧 バージョン違いにご注意ください
講座内ではReactはv17.0.1、Next.jsはv10.0.8を使用しております。現行より古いバージョンですが動画内のコードはほとんど問題なく動作しますし、お伝えしている内容は現在でも使う知識ばかりなので学習には支障ありません。もし動かない場合は、公式ドキュメントを参考に各自で修正してください。よかったら修正方法をコメント欄で教えていただけると嬉しいです。

またNext.jsドキュメントやVercelなどの各種サービスもUIが一部変更になっていたりします。ただ実現できること自体は変わりませんので、各自で新しい方に置き換えて進めていただけますと幸いです(これも良い学びになります👍)。

🐙 コード
オンラインサロン限定となっております。

オンラインサロン → https://it-kingdom.com
・React, TypeScript, テストなど100本以上の講座(今も更新中)
・月に最低2回以上のライブコーディング講座
・月に最低1回以上のオンラインイベント
・毎日開催されるもくもく勉強会
・毎日のニュースシェア会(ITラジオのパワーアップ版)
・私にいつでも質問・相談できる環境
・チーム開発など他にもたくさんのコンテンツ
・2日に1回、新規の方向けの説明会もあります

エンジニアを目指す方や一緒に勉強する仲間を作りたい方にオススメです!
みなさんと一緒にスキルアップできるのを楽しみにしています!😊✨

📙 もくじ
0:00 なぜNext.jsを使ってReact講座をするのか
1:16 Next.jsの今回活用する特徴を見る
6:26 Next.jsのセットアップを行う
8:00 Next.jsの最初のコードを確認
9:22 devとbuildの違いを説明
11:28 pagesとpublicを簡単に解説
13:20 GitHubにpush
15:41 Vercelにdeploy

👨‍💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました!
現在は起業家として新規サービスを開発中です!
下記に興味がある方はチャンネル登録をおねがいします!
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長

🌏 SNS
Twitter: https://twitter.com/shimabu_it
Instagram: https://www.instagram.com/shimabu_it
Voicy: https://voicy.jp/channel/1886
スプラトゥーンチャンネル: https://youtube.com/@spla

🏷️ タグ
#React #React入門 #NextJS
初めてのNext.js入門!簡単なアプリ実装でNext.jsを基礎から学んでみよう

プログラミングチュートリアル

総視聴数
16,682
先月の視聴数
(2023年2月)
1,778
いいね数
334
公開日
2022年3月12日
#入門 #Nextjs #React #フレームワーク #SSG #SSR #webアプリ

【Next.jsでマイクロブログを構築してみたい方はこちら】
http://shincode.info/2021/12/31/udemy-discount-coupon/

\ShinCode_Campでプログラミングを楽しもう/
幅広いプログラミングの知識を得るための動画プラットフォーム
🚀【7日間無料体験キャンペーン実施中】🚀
🎁僕が作成したUdemy講座が見放題
🎁分からない箇所は質問し放題
🎁フルスタック技術が学べる
🎁いつでも解約可能
↓↓↓↓↓
https://code-s-school-5bc2.thinkific.com/bundles/shincode-camp
-----------------------------------------------------------------------------------------------------------------------------
【募集】Web開発/Webサイト制作を頼みたい方はこちらのリンクからお問い合わせください
↓↓↓↓↓
https://worldhacks.co.jp/

\Webスキルが付いたらWebエンジニアに挑戦してみよう/
私が実際にWebのお仕事を頂いている会社で働いてみよう🚀
応募は下記リンクから
↓
https://www.wantedly.com/projects/1020833
✅Webエンジニア未経験でもOK
✅フルリモートだから自由な場所で働ける
✅ポテンシャル採用
✅モダンな技術スタックで開発できる
✅面接で不合格でも「なぜダメだったのか」の理由がきちんと聞ける
✅会社公式HPはこちら → https://worldhacks.co.jp/
上記記載のWebベンチャー社長と繋がってみたい方はTwitterを載せておきます。
WorlsHacks社長ツイッター : https://twitter.com/kairi_morishita
WorldHacks公式ツイッター : https://twitter.com/WorldHacks_Inc
-----------------------------------------------------------------------------------------------------------------------------

【この動画を視聴するメリット】
・Next.jsとは何?が理解できます
・簡単なアプリ実装を通してNext.jsの基礎を学べます
・プリレンダリング手法が学べます
・ビルドする方法が学べます

【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ300人突破
・Webアプリ/サイト開発数:200以上

★チャンネル登録はこちらから★
https://www.youtube.com/channel/UCNTxclE0N4qsUuirssL_D8w?sub_confirmation=1

★今回のソースコード★
https://github.com/Shin-sibainu/nextjs-tutorial

★運営者SNS★
Twitter:https://twitter.com/Shin_Engineer

★この動画で使用している機材★
キーボード(Keychron K6 赤軸):https://amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス):https://amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク):https://amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド):
https://amzn.to/3se5onZ
※アフィリエイトリンクになります。
【初心者OK】Next.jsで自作ブログを作ってみよう【MicroCMSを利用】

プログラミングチュートリアル

総視聴数
11,103
先月の視聴数
(2023年2月)
1,049
いいね数
266
公開日
2022年8月9日
#入門 #nextjs #cms #api #ブログ構築 #アプリ開発 #プログラミング #独学 #javascript #jamstack

MicroCMS公式はこちらから👇
https://microcms.io/

【Next.jsの基礎から応用まで学びたい方はこちら🚀】
↓↓↓↓↓
http://shincode.info/2021/12/31/udemy-discount-coupon/

\ShinCode_Campでプログラミングを楽しもう/
幅広いプログラミングの知識を得るための動画プラットフォーム
🚀【7日間無料体験キャンペーン実施中】🚀
🎁僕が作成したUdemy講座が見放題
🎁分からない箇所は質問し放題
🎁フルスタック技術が学べる
🎁いつでも解約可能
↓↓↓↓↓
https://code-s-school-5bc2.thinkific.com/bundles/shincode-camp

-----------------------------------------------------------------------------------------------------------------------------
【募集】Web開発/Webサイト制作を頼みたい方はこちらのリンクからお問い合わせください
↓↓↓↓↓
https://worldhacks.co.jp/

\Webスキルが付いたらWebエンジニアに挑戦してみよう/
私が実際にWebのお仕事を頂いている会社で働いてみよう🚀
応募は下記リンクから
↓
https://www.wantedly.com/projects/1020833
✅Webエンジニア未経験でもOK
✅フルリモートだから自由な場所で働ける
✅ポテンシャル採用
✅モダンな技術スタックで開発できる
✅面接で不合格でも「なぜダメだったのか」の理由がきちんと聞ける
✅会社公式HPはこちら → https://worldhacks.co.jp/
上記記載のWebベンチャー社長と繋がってみたい方はTwitterを載せておきます。
WorlsHacks社長ツイッター : https://twitter.com/kairi_morishita
WorldHacks公式ツイッター : https://twitter.com/WorldHacks_Inc
-----------------------------------------------------------------------------------------------------------------------------

【この動画を視聴するメリット】
・Next.jsの基礎が理解できる
・Next.jsでSSGが実装できる
・高速なWebページが構築できる
・MicroCMSを使ってAPI構築ができる
・Jamstackアーキテクチャが理解できる
・Vercelを使ってデプロイ/ホスティングができる
・WebHookを使ってブログ運用ができる

【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ4000人突破
・Webアプリ/サイト開発数:200以上
・生きがい:プログラミングでサイトやアプリを作ること

★チャンネル登録はこちらから★
https://www.youtube.com/channel/UCNTxclE0N4qsUuirssL_D8w?sub_confirmation=1

★今回のソースコード★
https://github.com/Shin-sibainu/nextjs-microcms-jamstack-blog

★運営者SNS★
Twitter:https://twitter.com/Shin_Engineer

★この動画で使用している機材★
キーボード(Keychron K6 赤軸):https://amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス):https://amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク):https://amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド):
https://amzn.to/3se5onZ
※アフィリエイトリンクになります。

5. まとめ

Next.jsのおすすめ講座を紹介しました。他の関連講座を学びたい方は、下記をご参考ください。

HTML CSS
Go
Firebase
HTML CSS
Go
Firebase

「自ら機会を創り出し、機会によって自らを変えよ」

株式会社リクルート創業者 江副浩正氏の有名な言葉です。自分の知識やスキルを高めることは、機会を作り出すことに役に立ちます。自らを変えようとしている方にとって、本ページの情報が少しでもお役に立てれば幸いです。

今回紹介したいずれかの講座を受講した後にさらに深掘りして学びたい方は、公式サイトやコミュニティサイトに行くことを、最新の情報をキャッチアップしていきたい方場合は、公式twitterアカウントをフォローすることをおすすめします。

一覧に戻る
Home About Share
Home
About
Privacy policy
Disclaimer
Contact
Official
© 2023 outlecture.com All Rights Reserved.