nextjs

Name: nextjs
Author: full-stack-skills

github.com/full-stack-skills開発2160 回インストール5 週間前に更新

リポジトリ

nextjs について

nextjsは、App RouterやPages Router、アーキテクチャ、設定など、Next.js公式ドキュメントの参照と活用を支援するスキルです。公式ドキュメントの構成に沿ったサンプルファイルから、関連情報を探せます。

主な機能

01App RouterとPages Routerを網羅
02ルーティング、データ取得、キャッシュを案内
03デプロイと設定のトピックを収録
04公式ドキュメントに沿ったサンプル構成
05公式ドキュメントへのリンク

活用シーン

01Next.jsドキュメントの項目を検索
02ルーティングやデータ取得の実装
03キャッシュ、デプロイ、設定方法の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/full-stack-skills/react-skills --skill nextjs

インストール後、Claude Code で/nextjsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/

openai.yaml

examples/app/api-reference/cli/

create-next-app.md

next.md

examples/app/api-reference/cli/index/

index.md

examples/app/api-reference/components/

font.md

form.md

image.md

link.md

script.md

examples/app/api-reference/components/index/

index.md

examples/app/api-reference/config/

eslint.md

examples/app/api-reference/config/index/

index.md

examples/app/api-reference/config/next-config-js/

adapterPath.md

allowedDevOrigins.md

appDir.md

assetPrefix.md

authInterrupts.md

basePath.md

browserDebugInfoInTerminal.md

cacheComponents.md

cacheHandlers.md

cacheLife.md

compress.md

crossOrigin.md

cssChunking.md

devIndicators.md

distDir.md

env.md

expireTime.md

exportPathMap.md

詳細

このスキルを使うタイミング

ユーザーが次のことを求めている場合は、いつでもこのスキルを使ってください。

Next.js のドキュメントのトピック（App Router、Pages Router、アーキテクチャ、コミュニティ）を確認する
Next.js のルーティング、データ取得、キャッシュ、デプロイを実装する
ドキュメントに記載された公式 API や設定オプションを使う

このスキルの使い方

ユーザーのリクエストからトピックを特定します。
examples/ にある該当するサンプルファイルを開きます。
ファイルにリンクされている Next.js の公式ドキュメントに従います。

マッピングルール（https://nextjs.org/docs と一対一で対応）

examples/ ディレクトリは公式ドキュメントの構成を反映しています。

examples/index.md → https://nextjs.org/docs
examples/app/... → https://nextjs.org/docs/app/...
examples/pages/... → https://nextjs.org/docs/pages/...
examples/architecture/... → https://nextjs.org/docs/architecture/...
examples/community/... → https://nextjs.org/docs/community/...

パスのルール：

ドキュメントのフォルダー名とファイル名から数値のプレフィックスを削除します（例：01-app → app）。
index.mdx ページは、対応するディレクトリ内の index.md にマッピングされます。

リソース

ドキュメント：https://nextjs.org/docs

キーワード

Next.js、App Router、Pages Router、ルーティング、データ取得、キャッシュ、サーバーコンポーネント、クライアントコンポーネント、ミドルウェア、デプロイ、設定

Markdown 対応

ログインしてコメント

基本情報

作者: full-stack-skills
リポジトリ: full-stack-skills/react-skills
カテゴリ: 開発
インストール数: 160
GitHub スター: 2

問題を報告

おすすめの Skills

すべての Skills

remotion-render

github.com/inference-sh

1.6M

inference.sh を介して React/Remotion コンポーネントコードから動画をレンダリングします。TSX コードを渡すと MP4 を取得できます。useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence など、すべての Remotion API に対応します。解像度、FPS、長さ、コーデックを設定できます。用途：プログラムによる動画生成、アニメーショングラフィック、モーションデザイン、データ駆動型動画、React アニメーションの動画化。トリガー：remotion、render video from code、tsx to video、react video、programmatic video、remotion render、code to video、animated video、motion graphics code、react animation video

design-mobile-apps

github.com/designed-by-ai

1.3M

Sleek でモバイルアプリの画面をデザインし、Sleek プロジェクトを編集して、React Native または HTML でデザインを実装します。

improve-codebase-architecture

github.com/mattpocock

1.2M

コードベースをスキャンして改善の機会を探し、ビジュアル HTML レポートとして提示し、選択したものを詳しく掘り下げる。

vercel-react-best-practices

github.com/vercel-labs

876.8k

Vercel Engineering の React および Next.js パフォーマンス最適化ガイドライン。React / Next.js コードを記述、レビュー、またはリファクタリングするときに、最適なパフォーマンスパターンを確保するため、このスキルを使用する必要があります。React コンポーネント、Next.js ページ、データ取得、バンドル最適化、またはパフォーマンス改善を含むタスクで発火します。