Your cart is empty.
Keep shopping実例で学ぶNext.js App Routerの基礎とベストプラクティス完全マスター講座
2,000 students
実例で学ぶNext.js App Routerの基礎とベストプラクティス完全マスター講座
Next.js AppRouter開発における基礎とベストプラクティスを網羅的に学べる講座です。ルーティング/コンポーネント/データフェッチ/キャッシュ/レンダリング/メタデータ/ミドルウェアまでこの講座1つで完全マスターできます。
Created byShin Code
Last updated 1/2025
Japanese
Japanese [Auto],
What you'll learn
- Nextjs App Routerの基礎とベストプラクティスが学べる
- AppRouterのルーティングと階層構造の基礎が学べる
- コロケーション機能と3つのプロジェクト整理機能が学べる
- AppRouterにおけるルーティング設計のベストプラクティスが学べる
- Atomic Designの基礎とメリットデメリットが学べる
- Bulletproof-Reactの基礎とディレクトリ構成が学べる
- クライアントコンポーネント / サーバーコンポーネントの使い分けが理解できる
- Client Boundaryについて学べる
- Compositionパターンと実装方法が学べる
- Nextjsの拡張されたfetch()について理解できる
- ORM等を利用した関数でのデータフェッチ方法が学べる
- useSWR/tanstackQuery等のサードパーティライブラリを使ったデータフェッチが学べる
- 並行データフェッチングとメリットと実装方法が学べる
- ストリーミングデータフェッチングを実例を通して学べる
- App Routerにおけるデータフェッチングのベストプラクティスが分かる
- Container / Presentationパターンの意味と実装方法が学べる
- キャッシュとは何か？が理解できる
- Request Memoizationとは何か？実装方法が学べる
- Reactのcache関数の意味と使い道が分かる
- Requestのメモ化の仕組みが分かる
- Data Cacheフローを図解で理解できる
- SWR(stale-while-revalidate)フローを図解で理解できる
- Full Route Cacheフローを図解で理解できる
- Full Route Cacheの仕組みが理解できる
- Router Cacheフローを図解で理解できる
- Nextjs App Routerにおけるキャッシュのベストプラクティスが分かる
- レンダリングとは何か？が理解できる
- Static / Dynamic Renderingが理解できる
- Streaming / Partial Pre Rendering(PPR)の概要と実装方法が分かる
- メタデータとは何か？が分かる
- 静的 / 動的メタデータ設定方法が分かる
- メタデータのファイル規約や評価順序が分かる
- Nextjsの公式ドキュメントの読み方が分かる
Explore related topics
Course content
9 sections • 62 lectures • 4h 50m total length
Requirements
- Reactの基礎知識(コンポーネント/JSX)がある
- Nextjsを一度でも触れたことがあるとスムーズに理解できる
Description
Next.js App Router(v13~15)の基礎とそのベストプラクティスを解説します。RSCの概念が導入されてから少し複雑になったので、この講座でもう一度まとめ直して理解しておくと良いでしょう。キャッシュやレンダリング等の分かりにくい概念もドキュメントと図解を併用して理解できます。Next.jsの動画教材であれば本講座が最も分かりやすく簡潔にまとめられていると自負しております。
■ 本コースの対象者
Next.js 13~15(AppRouter)の基礎とベストプラクティスを学びたい方
実案件や個人開発でNext.jsを利用するケースが増えた方
ルーティング / コンポーネント / データフェッチ / キャッシュ / レンダリング / メタデータ / ミドルウェア / の基礎とベストプラクティスを学びたい方
実例を通してスッと分かりやすく理解したい方
■ 本コースを受講する際の注意点
Next.jsで開発経験があると、スッと頭に入ってくると思います。ただこれからNext.js AppRouterを学ぶ方でも理解できる内容です。
Reactの基礎知識(コンポーネント / JSX等)を前提に解説しています。
最近では個人開発でも幅広く採用され始めたNext.jsなので、ここでもう一度しっかり詳細を理解して、自信を持って開発できる知識を身に着けておくと良いと思っています。実例も交えて解説しています。
Who this course is for:
- これからNextjsの案件に携わる方 / 個人開発でNextjsを利用したい方
- Nextjs App Routerを基礎からベストプラクティスまで理解したい方
- レンダリングやキャッシュ周りの理解が曖昧な方
- 自信を持ってNextjsの実装をしたい方