本文へ移動
cccskills
無料GitHub で公開

nextjs-data-fetching

Implement Fetch API, Caching, and Revalidation strategies in Next.js. Use when fetching data, configuring cache behavior, or implementing revalidation in Next.js.

インストール方法を見る

含まれるファイル(3)

  • SKILL.md2.0 KB
  • evals/evals.json3.7 KB
  • references/usage-examples.md1.0 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Data Fetching (App Router)

Priority: P0 (CRITICAL)

[!WARNING] Covers App Router fetch only. For pages/ directory: use getServerSideProps / getStaticProps. Ignore native fetch caching advice below.

Fetch data directly in Server Components using async/await.

Strategies

  • Static: Build-time. fetch(url, { cache: 'force-cache' }).
  • Dynamic: Request-time. fetch(url, { cache: 'no-store' }) or cookies().
  • Revalidated: fetch(url, { next: { revalidate: 60 } }).

Patterns

  • Direct Access: Call DB/Service layer directly. ** not fetch your own /api routes.** Example: export default async function Page() { const user = await db.user.findUnique({ where: { id }, select: { id: true, name: true } }); }
  • Colocation: Fetch exactly where data needed.
  • Parallel: Use Promise.all() to prevent waterfalls.
  • Client-Side: Use SWR/React Query for live/per-user data (no SEO).

Revalidation

  • Path: revalidatePath('/path') - Purge cache for route.
  • Tag: revalidateTag('key') - Purge by tag.

Anti-Patterns

  • No root-level awaits: Wrap slow fetches in <Suspense> to avoid blocking.
  • No useEffect for data fetching: Use SWR or React Query for client-side data.
  • No internal API calls from RSC: Fetch from DB/service layer directly.

Examples & References

Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:

  • async function Page()

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Upgrade an Android project to Android Gradle Plugin (AGP) 9. Use when migrating to AGP 9, updating Gradle build files, migrating to built-in Kotlin, or adopting the new AGP DSL.

日本語の概要は準備中です。原文の説明を表示しています。

HoangNguyen0403/agent-skills-standard5732026年10月12日 更新

Apply Clean Architecture layering, modularization, and Unidirectional Data Flow in Android projects. Use when setting up project structure, placing code in layers, configuring feature/core modules, or implementing UDF patterns; defer Compose state and ViewModel/StateFlow implementation to their specific skills.

日本語の概要は準備中です。原文の説明を表示しています。

HoangNguyen0403/agent-skills-standard5732026年10月12日 更新

Implement WorkManager and background processing correctly on Android. Use when creating Worker classes, scheduling tasks, choosing between WorkManager and Foreground Services, or setting up Hilt in workers; defer FCM and notification delivery to android-notifications.

日本語の概要は準備中です。原文の説明を表示しています。

HoangNguyen0403/agent-skills-standard5732026年10月12日 更新

Build high-performance declarative UI with Jetpack Compose. Use when writing Composable functions, optimizing recomposition, hoisting state, or working with LazyColumn and side effects; defer deep-link and navigation routing to android-navigation.

日本語の概要は準備中です。原文の説明を表示しています。

HoangNguyen0403/agent-skills-standard5732026年10月12日 更新

Migrate an Android XML View to Jetpack Compose following a structured 10-step workflow. Use when converting XML layouts to Compose, setting up Compose in an existing View-based project, or incrementally adopting Compose.

日本語の概要は準備中です。原文の説明を表示しています。

HoangNguyen0403/agent-skills-standard5732026年10月12日 更新

Write correct coroutine scopes, lifecycle collection, and dispatcher injection in Android production code. Use for suspend functions, coroutine scopes, and dispatcher mechanics; defer ViewModel StateFlow/LiveData architecture, Fragment lifecycle recipes, persistence/notifications, and unit-test recipes to their specific skills.

日本語の概要は準備中です。原文の説明を表示しています。

HoangNguyen0403/agent-skills-standard5732026年10月12日 更新

HoangNguyen0403 のスキルをすべて見る

このスキルの問題を報告する