|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/nextjs-supabase-app-directory/
课程评论：没有评论
**课程名称：**Next.js App Routerによる次世代Web開発 **课程概述：** 本课程专注于讲解Next.js 13及以后版本中的App Router，旨在帮助学习者掌握React Server Components和Client Components的灵活运用，应对React和Next.js快速发展的技术趋势。课程将涵盖App Router的核心机制，包括嵌套布局（Nested layout）、Server Component中的数据获取与缓存选项、Client与Server Component的区别与应用场景、动态路由段（Dynamic segment）、使用Suspense实现流式服务器渲染（Streaming server rendering）、数据变异（Mutation with router.refresh()）、软硬导航（soft/hard navigation）等基础技术。此外，课程还将深入探讨如何将Supabase与Next.js集成，学习在Server Component中实现认证、利用中间件（middleware）以及实现Todo CRUD功能。 **课程主题：** * App Router 介绍 * React Server Component 的优势 * Client Component 与 Server Component 的区别、使用场景及配置 * 嵌套布局 (Nested Layout) * 文件约定 (page, layout, loading, error..) * 缓存选项 (fetch based: no-store, force-cache, revalidate) * 动态路由段 (Dynamic segment) 与 generateStaticParams * 使用 Suspense 实现流式服务器渲染 (Streaming HTML) * 静态渲染与动态渲染 * 动态函数 * 按段加载和使用 Suspense 的组件级细粒度加载 * 软硬导航 (Soft and Hard navigations) * 在 Server Component 中进行数据变异 (Mutation with router.refresh()) * 中间件 (Middleware) * Supabase 的多种类型 * Supabase 在 Server Component 中的认证 * CRUD 操作（读取 in Server Component，创建/更新/删除 in Client Component）
Next.js 13以降でのReact開発は、ServerコンポーネントとClientコンポーネントを使い分けるノウハウが必要になり複雑化するため、2023年以降多くの開発者がReactとNext.jsの進化についていけなくなる可能性があります。本コースは2023年以降のトレンドにも対応できる技術を身につけられるように構成されています。本コースでは、Next.js 13以降で導入された App RouterでのWeb開発技術について学習します。Nested layout, Server componentにおけるData fetchingとcache option, ClientとServer componentの使い分け, Dynamic segment, Streaming server rendering with suspense, mutation (router.refresh), soft/hard navigationといった基本的な技術に加えてSupabaseと連携した場合の Server componentでの認証の方法やmiddlewareの活用、Todo CRUD 機能の実装も学習していきます。本コースで学習するトピックApp RouterBenefit of React Server componentDifference of client component and server component and use caseNested LayoutFile conventions (page, layout, loading, error..)Cache options (fetch based (no-store, force-cache, revalidate))Dynamic segment and generateStaticParamsStreaming server rendering with suspense (streaming HTML)Static and dynamic renderingDynamic functionsSegment level loading and component level granular loading by suspenseSoft and Hard navigationsMutation with server component (router.refresh())Middlewaregen types of SupabaseSupabase authentication with server componentCRUD operation (R: server component, CUD: client component)
