|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/nextjs-tailwind-css-django-rest-framework-react/
课程评论:没有评论
Next.js + Tailwind CSS + Django REST Framework:モダンReact開発コース 本コースは、Webサイト開発の最新技術であるNext.jsとTailwind CSSの習得を目的としています。Django REST Frameworkは、Next.jsの解説がメインのため、補助的な役割として簡潔に扱われます。 **コースの主な学習内容:** * **Next.jsプロジェクトの作成:** 2つのプロジェクトを通してNext.jsの機能を深く理解します。 * **プロジェクト1:簡易ホームページ** * 外部APIのブログ記事をプリレンダリングする。 * **プロジェクト2:認証機能付きブログ+Todos** * オリジナルのREST APIと連携し、SSG+ISR+useSWRを実装する。 * **Next.jsの主要機能:** * Tailwind CSSの導入 * Linkコンポーネントによるクライアントサイドナビゲーション * Layoutコンポーネントの活用 * useRouter * Static Site Generation (SSG) * Incremental Static Regeneration (ISR) * Stale While Revalidation * useSWR (データ取得ライブラリ) * fallback、revalidateの理解 * Dynamic routing * getStaticProps, getStaticPaths * useContext (Next.jsでの状態管理) * **バックエンド・デプロイ:** * Vercelへのデプロイ * JWT認証機能の実装 * universal-cookie * Django REST FrameworkによるREST APIの実装 * REST APIのデプロイ * REST APIとNext.jsの連携 (node-fetch + useSWR) * **高度なテクニック:** * SSG + ISR + CSR(useSWR)を組み合わせた、SEO対策とリアルタイムデータ取得手法 **特記事項:** 2022年8月27日のアップデートにより、Herokuの無料プラン廃止に対応するため、Render無料プランでのデプロイ手順が追加されました(講義24)。
Update log2022/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-navigationLayoutコンポーネントの活用useRouterStatic Site Generation(SSG)Incremental Static Regeneration(ISR)Stale While RevalidationuseSWRfallbackの理解revalidateの理解Dynamic routinggetStaticPropsgetStaticPathsuseContext(state management in Nextjs)Deploy to VercelJWT認証機能universal-cookieDjango REST FrameworkによるREST API実装REST APIのDeployREST APIとNextjsの連携 (node-fetch + client side fetch(useSWR)SSG + ISR + CSR(useSWR)を組み合わせた、SEO対策+リアルタイムデータ取得手法