Udemy

Platform

日本語

Language

Network & Security

Category

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

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

4.43 (198 reviews)

Students

4 hours

Content

Sep 2021

Last Update
Regular Price


What you will learn

Nextjs (React フレームワーク)

NextjsとREST API連携 (DRF)

Tailwind CSS (class utility フレームワーク)

SSG(Static Site Generator) ISR(Incremental Static Regenerator) CSR(Client Side Rendering) -> useSWR


Description

Webサイト開発の2021年最新技術、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対策+リアルタイムデータ取得手法





Screenshots

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

Content

What is Nextjs ?

はじめに

Next.jsを学ぶモチベーション

SSG, ISR, CSR (useSWR)

コースで必要なツールのインストール

Nextjs Project 1 (HP編)

Source code

create-next-appとTailwind設定

Layout component

Contact page

getStaticProps

getStaticPaths (Dynamic routes)

[注意] Vercel deploy document link

Deploy to Vercel

Automatic Deploy

REST API (Django REST Framework)

Source code

django startproject

models, serializers, views, urls

End pointの動作確認

Deploy

Nextjs Project 2 (Blog + Todos編)

Source code

create-next-app

Auth component UI

Auth component (Function)

Heroku going to sleep mode

Main page

getStaticProps (Blog REST API)

Incremental Static Regeneration (ISR)

useSWR + ISR + SSG

Dynamic routes (useSWR + ISR + SSG)

deleteTask

create and update Task

Deploy to Vercel + update CORS whitelist


Reviews

ハシモトジュンイチ15 August 2021

講師の方は質問への回答も速く講座もアップデートされているので、良い講座だと思います。 サンプルコードもあり、tailwindcssの環境構築について学ぶことができたが、受講するには、難易度が高くて速過ぎたました。 他にNext.jsについて、わかりやすい講座がないと思うので、おすすめです。 コピペばかりと批判する方もいたようですが、環境構築するときに、コードを書き写すのも難しいので、初めは、サンプルを使ってこんな仕組みだと理解することが、良い方法だと思います。 写経しても、全て暗記できませんので、サンプルをみながら理解するのが、良い方法だと最近私は、考えております。

I
Inoue26 July 2021

Next.jsのチュートリアル(簡単なブログサイトの作成)を終えて、さらにNext.jsの機能の活かし方について学びたいと思い受講しました。 説明が丁寧で理解が深まりました。 気になった点としては、PythonでAPIを作成するときのエディタはVSCodeでいい気がするし、仮想環境もvenvを使えばanacondaをインストールする必要もないと思いました。 理想は、APIもJavascript(Node.js + Express)で作成して頂けるともっと良かったです。

K
K21 June 2021

React(Next.js)単体での解説教材は多数あるが、REST APIとReact(Next.js)の繋ぐ部分を含めて網羅的に解説した教材や記事は少なく、その点で重宝した。 動画内でコードをコピペするのは好みが分かれそうだが、個人的にはテンポが良くてありだと思う。 ただ、コードの細かい解説は少ないので、基礎理解を深めるには、動画を見ながら手を動かすのに加えて自分で追加学習をする必要がありそう。

S
Shu25 May 2021

Next.js + Django Rest Framework の組み合わせが、海外の記事や動画ばかりだったので大変助かりました。 ISRの仕組みも分かり、今後に活かしていきます。ありがとうございます。

Y
Y25 March 2021

今までReactで完結させてましたがNextjsの良さが理解できました。 Nextjsの特徴である、SSGやISR、useSWRがよく理解できる講座です。 よく理解出来るからこそ、普段からNextjs使ってみたい!という気持ちになりました。 オススメです。

内田謙人24 March 2021

SSGやISRなどの説明も図をつけて説明してくれるのでわかりやすく楽しく学べました。 実際に作るプロジェクトでもuseSWRやContext APIも使って実践的な技術を学ぶことができます。 ただ、コード実装中によくコピペを使われるのでスピードが早くてついていきづらく感じることもありました。また、自分のタイポなどでうまく動かないことも何度かあったので、もう少し実行してみる頻度をあげたり、細かくコミットするタイミングがあればいいなと思いました。

びゃーー22 March 2021

初めて買ってよかったと思えた。 最近はちゃんとしたプログラマさんが本格的な教材を出してくれるようになってきたのでありがたいです。 まだDjangoに入っていませんが、DjangoのかわりにRails APIでも実装できるでしょうか


3723270

Udemy ID

12/23/2020

Course created date

1/2/2021

Course Indexed date
Bot
Course Submitted by