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

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

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

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

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

【要件・講座対象者】

Javascriptがわかること

【講座内容】

ゼロから始めて行って、Next.JSの基礎を全て網羅して理解することができるようになります

Next.JSの鍵となるRouting, PreRendering(SSG, ISR), API Routesなどを網羅的に説明した後、ゼロからアプリケーションを構築していきます

また、Next jsを理解するためにReact jsやJavascriptの説明にも一定程度時間を割いていきます

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

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

【講座の流れ】

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

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

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

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

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

■ 本コースの対象者

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

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

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

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

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

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

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

• セクション１では、始める前の準備等について載せています。本プレビューを含め、無料プレビューできますので、受講を決める前に必ずご確認ください。
• 本コースでは 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のホスティングサービスを使用します。

レクチャーの進め方

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

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