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

Description

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

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

Who Should Attend!

• Nextjsを習得してWebサイトを制作できるようになりたい。
• Tailwind CSSについて学びたい

TAKE THIS COURSE