Next.js 13 App Router による次世代Web開発

Description

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 Router

• Benefit of React Server component

• Difference of client component and server component and use case

• Nested Layout

• File conventions (page, layout, loading, error..)

• Cache options (fetch based (no-store, force-cache, revalidate))

• Dynamic segment and generateStaticParams

• Streaming server rendering with suspense (streaming HTML)

• Static and dynamic rendering

• Dynamic functions

• Segment level loading and component level granular loading by suspense

• Soft and Hard navigations

• Mutation with server component (router.refresh())

• Middleware

• gen types of Supabase

• Supabase authentication with server component

• CRUD operation (R : server component, CUD : client component)

What You Will Learn!

• Nextjs App Router でのServer component ベースの開発
• Nested layout, Data fetching in server component, Cache option
• Soft/Hard navigation, Mutation
• Streaming server rendering with suspense
• Supabaseと連携した認証とCRUD操作
• Middleware

Who Should Attend!

• フロントエンドエンジニア

TAKE THIS COURSE