vi.dev

Next Best Practices

開発v0.1.0
作者:vi.dev更新日 2026-05-17next-best-practices@clawhub_tuanvidev/next-best-practices
コードレビューフロントエンド開発

AlphaMoatによると、2026-09時点でNext Best Practicesのダウンロード数は3,576、スター数は2で、AIスキル全体5,078件中3,052位、開発では577件中393位です。

インストール数
142
ダウンロード数
3576
スター数
2
総合順位
#3,052
全体の上位 61% · 開発の上位 69%
プラットフォームインストール数ダウンロード数スター数コメント
ClawHub ↗10635762-
SkillHub ↗14234422—

プラットフォームごとに集計方法と集計時点が異なります。

このスキルでできること

ファイル規約、RSC境界、非同期API、ルート処理、最適化を扱います。フレームワークの仕様はバージョンによって変わるため、適用前にプロジェクトのバージョンを確認し、現行の公式ドキュメントで検証してください。移行手順をそのまま適用しないでください。

資料公開日 2026-10-29

できること

  • Next.jsプロジェクト構成とファイル規約を確認する
  • サーバー・クライアントコンポーネントの境界を確認する
  • 非同期APIとルート実装を検証する

使う場面

  • Next.jsコードベースをレビューするとき
  • 移行や規則適用の前にプロジェクトのバージョンと公式文書を確認するとき

プロンプト例

スキルのドキュメントをもとに生成した例であり、実際の実行結果ではありません。

このNext.jsガイドの対象と、バージョン固有の情報を確認する方法を説明してください。

月次の推移

ダウンロード数3576
1637267937202026-03 · ダウンロード数 17812026-05 · ダウンロード数 25672026-06 · ダウンロード数 27972026-07 · ダウンロード数 32302026-08 · ダウンロード数 34312026-09 · ダウンロード数 357626-0326-09
スター数2
1232026-03 · スター数 22026-05 · スター数 22026-06 · スター数 22026-07 · スター数 22026-08 · スター数 22026-09 · スター数 226-0326-09

2026-09 から集計方法を変更し、同名スキルを作者ごとに分けて集計し、全スキルを対象にしました。破線は変更前の月で、変更後のデータとは直接比較せず、変更をまたぐ増減も計算していません。

月ダウンロード数前月比スター数
2026-093576—2
2026-083431+6.2%2
2026-073230+15.5%2
2026-062797+9.0%2
2026-052567—2
2026-031781—2

SKILL.md 原文

作者が公開した元のファイルをテキストのまま表示しています。AlphaMoat による編集や審査はしていません。リンクはクリックできません。コマンドは内容を確認してから実行してください。取得日 2026-10-23。

3.9 KB・ClawHub v0.1.0
---
name: next-best-practices
description: Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
user-invocable: false
---

# Next.js Best Practices

Apply these rules when writing or reviewing Next.js code.
すべて表示(全 154 行)
## File Conventions

See [file-conventions.md](./file-conventions.md) for:
- Project structure and special files
- Route segments (dynamic, catch-all, groups)
- Parallel and intercepting routes
- Middleware rename in v16 (middleware → proxy)

## RSC Boundaries

Detect invalid React Server Component patterns.

See [rsc-boundaries.md](./rsc-boundaries.md) for:
- Async client component detection (invalid)
- Non-serializable props detection
- Server Action exceptions

## Async Patterns

Next.js 15+ async API changes.

See [async-patterns.md](./async-patterns.md) for:
- Async `params` and `searchParams`
- Async `cookies()` and `headers()`
- Migration codemod

## Runtime Selection

See [runtime-selection.md](./runtime-selection.md) for:
- Default to Node.js runtime
- When Edge runtime is appropriate

## Directives

See [directives.md](./directives.md) for:
- `'use client'`, `'use server'` (React)
- `'use cache'` (Next.js)

## Functions

See [functions.md](./functions.md) for:
- Navigation hooks: `useRouter`, `usePathname`, `useSearchParams`, `useParams`
- Server functions: `cookies`, `headers`, `draftMode`, `after`
- Generate functions: `generateStaticParams`, `generateMetadata`

## Error Handling

See [error-handling.md](./error-handling.md) for:
- `error.tsx`, `global-error.tsx`, `not-found.tsx`
- `redirect`, `permanentRedirect`, `notFound`
- `forbidden`, `unauthorized` (auth errors)
- `unstable_rethrow` for catch blocks

## Data Patterns

See [data-patterns.md](./data-patterns.md) for:
- Server Components vs Server Actions vs Route Handlers
- Avoiding data waterfalls (`Promise.all`, Suspense, preload)
- Client component data fetching

## Route Handlers

See [route-handlers.md](./route-handlers.md) for:
- `route.ts` basics
- GET handler conflicts with `page.tsx`
- Environment behavior (no React DOM)
- When to use vs Server Actions

## Metadata & OG Images

See [metadata.md](./metadata.md) for:
- Static and dynamic metadata
- `generateMetadata` function
- OG image generation with `next/og`
- File-based metadata conventions

## Image Optimization

See [image.md](./image.md) for:
- Always use `next/image` over `<img>`
- Remote images configuration
- Responsive `sizes` attribute
- Blur placeholders
- Priority loading for LCP

## Font Optimization

See [font.md](./font.md) for:
- `next/font` setup
- Google Fonts, local fonts
- Tailwind CSS integration
- Preloading subsets

## Bundling

See [bundling.md](./bundling.md) for:
- Server-incompatible packages
- CSS imports (not link tags)
- Polyfills (already included)
- ESM/CommonJS issues
- Bundle analysis

## Scripts

See [scripts.md](./scripts.md) for:
- `next/script` vs native script tags
- Inline scripts need `id`
- Loading strategies
- Google Analytics with `@next/third-parties`

## Hydration Errors

See [hydration-error.md](./hydration-error.md) for:
- Common causes (browser APIs, dates, invalid HTML)
- Debugging with error overlay
- Fixes for each cause

## Suspense Boundaries

See [suspense-boundaries.md](./suspense-boundaries.md) for:
- CSR bailout with `useSearchParams` and `usePathname`
- Which hooks require Suspense boundaries

## Parallel & Intercepting Routes

See [parallel-routes.md](./parallel-routes.md) for:
- Modal patterns with `@slot` and `(.)` interceptors
- `default.tsx` for fallbacks
- Closing modals correctly with `router.back()`

## Self-Hosting

See [self-hosting.md](./self-hosting.md) for:
- `output: 'standalone'` for Docker
- Cache handlers for multi-instance ISR
- What works vs needs extra setup

## Debug Tricks

See [debug-tricks.md](./debug-tricks.md) for:
- MCP endpoint for AI-assisted debugging
- Rebuild specific routes with `--debug-build-paths`

開発の人気スキル

データ月:2026-09 · ダウンロード数、スター数、インストール数は公開スキルレジストリ(ClawHub、SkillHub)から月単位で集計しています。詳しくはデータの方法論をご覧ください。