Udemy

UdemyでNext.jsを学べるおすすめ講座4選

自己紹介

フリーランスエンジニアをしているヨノと申します。

独学でプログラミングを学び、ソシャゲ・SaaS開発などを経て、2018年からフリーランスエンジニアとして活動しています。

主にバックエンド中心の案件を獲っていますが、たまにはフロントエンドも。
主な使用言語・FWは、Ruby/Rails/Go言語/JavaScript/TypeScript/React/Vue.js

プログラミングを勉強するときに教材選びに困ることって多いと思います。
私も独学していたときそうでした...

そこでNext.jsを学びたい人向けにUdemyのおすすめ講座を紹介します。

対象読者

「Next.jsを学びたい!身につけたい!」と思っているけど

  • どんな教材を選べば良いかわからない人
  • 自分のスキルにあった教材を知りたい人

Udemyとは?

Udemyとは色んな分野のトップ講師の講座動画を購入できるプラットフォームで、特に「プログラミング」の分野は講座数が多くて充実しています。

Udemyの特徴

  • PCの画面や資料を映しながら説明してくれるのでわかりやすく、書籍より早く学べる
  • 講師に質問でき、他の人の質問とその回答も見れる
  • スマホでも見れるので、スキマ時間を活用できる
  • 復習として2周目、3周目するときは倍速再生を使うことで効率よく学べる
  • 満足できなかった場合、30日以内であれば返金してくれる

満足できなければ返金してもらえるので、少しでも気になる講座があれば、どんどん受講してスキルアップできるわけです!!

参考Udemyは独学でのプログラミング学習におすすめ

Next.jsとは?

Next.jsはReactをベースにしたフロントエンドフレームワークで、サーバーサイドレンダリング(SSR)やサーバーサイドジェネレーション(SSG)といったパファーマンス向上に関わる機能やファイルベースルーティング、webpack等の設定不要などの開発効率に関わる便利機能が使えるという利点があります。

近年、SEO対策や初期描画速度の向上、開発効率などの理由により多くのプロジェクトで採用されています。

Next.jsの前にReactを勉強すべきか

答えはYES。

Next.jsはReactベースのフレームワークで、Reactを知らないとコンポーネントを作ることができないのでReactから学んだ方が良いです。

いきなりNext.jsから学びたいという人はReactについての解説が入っている教材を選んでください。そうじゃないとコンポーネント作れずに詰みます。

個人的にはReactから学んでいった方が効率良いと思います。Reactの知識はすべてNext.jsでも必要になりますし、Reactを理解していたらNext.jsの習得は難しくないので。

本記事で紹介するUdemy講座はReactを理解している前提なので、Reactよくわからいという方は先にReactを学ぶことをおすすめします。

Next.jsを学べるUdemyおすすめ講座4選

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

ヨノ

本当に初めてNext.jsを学ぶ人向けの講座です。

基礎的なことは知っているという人には物足りないと思うのでご注意ください。

講座時間3.5時間
評価☆4.4(2022/8/30 現在)
受講者数1,433人(2022/8/30 現在)
講師Udemy受講生4900人の人気講師。
現役WEBエンジニア
対象者Reactの基礎知識がある人

講座内容

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

Next.jsの基礎を解説した後、ブログ実装を通してNext.jsについて学んでいくハンズオン形式の講座になっています。

【講座の流れ】

  1. Next.jsとは何なのか?SSR/SSGとは?といったNext.jsの基礎を解説
  2. Next.jsの開発環境構築
  3. マイクロブログを実装しながらNext.jsを学ぶ
    • ルーティング、ページ遷移
    • 静的ファイルの取り扱い
    • CSS適用方法
    • SSR/SSG
    • 動的なルーティング
    • ビルド&デプロイ
ユーザー

【Reactアプリ開発】も受講しました。そちらでも大変分かりやすく実用的な講義だったため、次はNext.jsを学んでみようとこちら受講しました。

Reactとの違いやSSG、SSRなど初めて聞く用語も解説してくれてありがたいです。

まだまだ前半ですが、Next.jsでのルーティング処理がReactに比べると、簡単というかこちらが何も設定せずともルーティングできてしまうことにびっくりです。

後半戦も楽しみです。

ユーザー

Next.jsの入門に最適かつエラーが出た際の対応の仕方なども見ることができるので大変参考になります。

また、テンポも良く本題と離れているところは軽い説明で終わっており知りたい部分だけを効率よく知ることができとても良い教材だと思います。ありがとうございます。

こんな方におすすめ

  • Reactは一通り学んだから次のステップとしてNext.jsを学びたい方
  • Next.js完全初心者の方
  • Next.jsの公式ドキュメントを読んでもイマイチ理解が深まらない方

↓↓↓講座の一部が無料公開されているので、確認してみてください!!↓↓↓

>> Udemyでこの講座の詳細をみる


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

講座時間5.5時間
評価☆4.3(2022/8/30現在)
受講者数501人(2022/8/30現在)
講師Udemy受講生4900人の人気講師。
現役WEBエンジニア
対象者Next.jsの基礎知識がある人
ヨノ

公式ドキュメントを読んだ後や先ほど紹介した「【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座」を終えた人におすすめ

講座内容

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

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

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

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

■ 本コースの対象者

  • Next.js初心者から中級者へステップアップしたい方
  • Next.jsを使ってショッピングサイトを作ってみたい方
  • Next.jsを一通り学び終え、より実践的なアプリケーションを作りたい方
  • Stripe決済システム込みのショッピングサイトを構築したい方
  • Strapiと呼ばれるヘッドレスCMSでWebAPIをサクッと構築したい方
  • GraphQLを使ってAPIフェッチング手法を学びたい方

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

  • HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。
  • Next.jsの基礎的な使い方を理解している

こんな方におすすめ

  • Next.jsの公式ドキュメント&チュートリアルを終えた方
  • Next.jsの入門教材を終えた方
ユーザー

モダンなWebアプリケーション開発を体験できます。

日本にNextJS+Strapi という題材でこのレベルの教材が存在することがありがたいです。

私は決済の部分は環境上クラウドサービスが利用できずできなかったのですが、それ以外はほぼ教材のままで完走することができました。

バックエンドがほぼノーコードで完結するってすごいですね。

ユーザー

素晴らしいが、ソースコード入力時やstrapi使用時等に画面を拡大して見せていただけるとありがたい。モニターが無い外での環境時には少し見にくい。

↓↓↓講座の一部が無料公開されているので、確認してみてください!!↓↓↓

>> この講座の詳細をみる


【NotionをCMSに】NotionAPI + Next.js + TypeScript でブログ開発〜デプロイまで

講座時間4時間
評価☆4.6(2022/8/30現在)
受講者数120人(2022/8/30現在)
講師講師経験のある現役WEBエンジニア
対象者Next.jsとTypeScriptの基礎知識がある人
ヨノ

公式ドキュメントを読んだ後やチュートリアル、先ほど紹介した「【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座」を終えた人におすすめ

講座内容

本コースではNotion APIとNext.js(WEBフレームワーク)を使ってブログアプリケーションを開発します。

題材はブログですが、NotionをCMSとして使用するという視点に立てば、いろいろな用途に応用できる内容だと思います。

本コースで扱う範囲などについて、無料プレビューで公開していますので事前にご確認くださいますようよろしくお願いいたします。

⚠️受講前の事前確認項目

  • セクション1では、始める前の準備等について載せています。本プレビューを含め、無料プレビューできますので、受講を決める前に必ずご確認ください。
  • 本コースでは Notion API と Next.js を使ったブログを開発し、デプロイまで行います。
  • 本コースを通して、Notion APIの導入、Next.js の基礎を学べます。
  • Nextjsの完全初心者の方は、まずは公式が用意している「create-next-app」のチュートリアルを実践してみたあと、受講を検討いただけますと幸いです。
  • プログラミングにおいてはライブラリ等のバージョンアップ・仕様変更でうまくいかなくなる可能性がどうしても発生します。Githubへコース通りのソースコードやバージョン情報を載せていますので、上手くいかない場合は合わせてみてください。
  • ご質問前に、Google検索などを使って解決にトライしていただけますと幸いです。
  • それでも上手くいかないときは、投げ出してしまう前にご質問いただければと思います。解決のサポートができる場合が多々あります。
  • 講師の環境はMacです。Windows 環境による違いで上手くいかない場合などはご相談ください。

コース構成

  • コースの初めの方では、プロジェクトの準備を進めます。
  • はじめ〜コース前半は Next.jsによるアプリケーション開発を実践します。
  • コース後半からは、前半で作ったアプリケーションに Notion API を導入していきます。さらにパフォーマンスを目的とした Next.jsのSSGやISRなどを導入し改良していきます。
  • 最終的にはデプロイを行います。デプロイは Next.js を開発している Vercelのホスティングサービスを使用します。

レクチャーの進め方

  • 基本的には、動画レクチャーで解説した後、次のテキストレクチャーで修正を加えたファイルのコードを掲載しています。上手くいかない場合などは張り替えてみてください。
  • テキストレクチャーにおいてはコードの他、重要な情報や参照リンク、コマンドなども適宜載せています。
  • 動画の音量、再生スピードは適宜調整してください。

こんな方におすすめ

  • Next.jsの公式ドキュメント&チュートリアルを終えた方
  • Next.jsの入門教材を終えた方
  • Next.jsでTypeScriptを使いたい方
ヨノ

公開されて間もない講座のため口コミは少ないですが、APIを呼ぶ練習にもなり良い講座だと思います。

NotionをCMSとすることでフロントエンドの学習(実装)に集中できるのも良いですね!

↓↓↓講座の一部が無料公開されているので、確認してみてください!!↓↓↓

>> この講座の詳細をみる


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

講座時間4時間
評価☆4.5(2022/8/30現在)
受講者数2,845人(2022/8/30現在)
講師大手外資系企業現役WEBエンジニア
対象者React Hooksの基礎知識がある人 (useState, useContextなど)

講座内容

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対策+リアルタイムデータ取得手法
ユーザー

とても有益な講義ありがとうございました。説明も丁寧でとてもわかりやすく理解が深まりました。

今後ともNext.jsに関する講座を期待しております。ありがとうございました。

ユーザー

React コースを学習してから見ましたが、Next.js圧倒的なパフォーマンスですね。

学習内容もとてもわかりやすいです。

バックエンド周りはフロントエンドとは別にいろいろと前提知識がありそうなので、初学者野方は構築周りで躓きそうではありますが。

こんな方におすすめ

  • Reactの基礎知識がある方(hooksも)
  • Tailwind CSSについて学びたい方
  • Next.jsで認証機能付きサービスを作ってみたい方

>> この講座の詳細をみる

イチオシ記事

1

フリーランスエンジニアに興味があるけど、「なんとなく不安」、「自分だと単価いくら?」、「どんな案件がある?」といった不安や疑問をお持ちの方は多いのではないでしょうか!? このような方はフリーランスエー ...

2

はじめまして、フリーランスエンジニアのヨノと申します。 Twitterやブログ記事などで と言っている人を見かけますが、むむむ.....本当でしょうか? こういった発言に対して思うことがあるので「フリ ...

3

「フリーランスエンジニアはやめとけ」「フリーランスなら会社員の2倍・3倍稼いでトントン」「フリーランスエンジニアになったら年収イッセンマン」 ネット上では色々言われているフリーランスエンジニア.... ...

-Udemy