next
Next.jsフレームワークに基づき、App Routerを利用して高性能なReactアプリケーションを構築し、サーバーサイドレンダリングと静的生成をサポートし、フロントエンド開発体験を最適化します。
npx skills add hairyf/skills --skill nextBefore / After 効果比較
1 组従来のReactで大規模アプリケーションを開発する際、パフォーマンス最適化、ルーティング管理、サーバーサイドレンダリングなどの課題に直面し、開発効率とユーザーエクスペリエンスが制限されることがよくありました。
Next.jsフレームワークを活用することで、高性能でSEOフレンドリーなReactアプリケーションを効率的に構築できます。これにより、開発効率が大幅に向上し、優れたユーザーエクスペリエンスを提供します。
description SKILL.md
name: next description: Next.js framework for building React applications with App Router, Server Components, and optimized performance. Use when working with Next.js apps, routing, data fetching, caching, Server Actions, or building full-stack React applications. metadata: author: Hairyf version: "2026.1.30" source: Generated from https://github.com/vercel/next.js, scripts located at https://github.com/antfu/skills
Next.js is a React framework for building full-stack web applications. It provides file-system based routing, Server Components, automatic code splitting, image optimization, and built-in performance optimizations. Next.js supports both static site generation (SSG) and server-side rendering (SSR), making it ideal for building modern web applications.
The skill is based on Next.js v16.2.0-canary.16, generated at 2026-01-30.
Core References
| Topic | Description | Reference |
|---|---|---|
| File-System Routing | Routes defined by folder structure, layouts, and pages | core-routing |
| Server and Client Components | Understanding when to use Server vs Client Components | core-server-client-components |
| Navigation | Linking, prefetching, and client-side transitions | core-navigation |
Data Fetching
| Topic | Description | Reference |
|---|---|---|
| Server Components | Fetching data in Server Components with fetch, ORMs, and databases | data-fetching-server |
| Client Components | Fetching data in Client Components with use hook and third-party libraries | data-fetching-client |
| Streaming | Streaming data and components with Suspense and loading.tsx | data-streaming |
Caching and Revalidation
| Topic | Description | Reference |
|---|---|---|
| Caching Strategies | Caching fetch requests, cache tagging, and revalidation | caching-revalidation |
Server Actions
| Topic | Description | Reference |
|---|---|---|
| Server Functions | Creating and using Server Actions for data mutations | server-actions |
File Conventions
| Topic | Description | Reference |
|---|---|---|
| Dynamic Routes | Dynamic segments, catch-all routes, and route parameters | file-conventions-dynamic-routes |
| Loading and Error | Handling loading states and errors with loading.tsx and error.tsx | file-conventions-loading-error |
API Reference
| Topic | Description | Reference |
|---|---|---|
| Built-in Components | Link, Image, Script, and Font components | api-components |
forumユーザーレビュー (0)
レビューを書く
レビューなし
統計データ
ユーザー評価
この Skill を評価