scaffold-nextjs-app
À propos
Cette compétence structure une nouvelle application Next.js avec App Router, TypeScript et des paramètres modernes par défaut. Elle gère la création du projet, l'architecture des répertoires, la configuration du routage et la configuration initiale. Utilisez-la pour démarrer rapidement un projet full-stack avec rendu côté serveur et routes API.
Installation rapide
Claude Code
Recommandénpx skills add pjt222/agent-almanac -a claude-code/plugin add https://github.com/pjt222/agent-almanacgit clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/scaffold-nextjs-appCopiez et collez cette commande dans Claude Code pour installer cette compétence
Documentation
name: scaffold-nextjs-app description: > App Router、TypeScript、モダンなデフォルト設定で新しいNext.jsアプリケーションを スキャフォールドします。プロジェクト作成、ディレクトリ構造、ルーティング設定、 初期設定を扱います。新しいWebアプリケーションプロジェクトを開始するとき、 サーバーサイドレンダリングを持つReactベースのフロントエンドを作成するとき、 APIルートを持つフルスタックアプリケーションを構築するとき、またはTypeScript Webプロジェクトをゼロからセットアップするときに使用します。 locale: ja source_locale: en source_commit: 6f65f316 translator: claude-opus-4-6 translation_date: 2026-03-16 license: MIT allowed-tools: Read Write Edit Bash Grep Glob metadata: author: Philipp Thoss version: "1.0" domain: web-dev complexity: basic language: TypeScript tags: nextjs, react, typescript, app-router, scaffold
Next.jsアプリのスキャフォールド
App Router、TypeScript、本番環境対応のデフォルト設定で新しいNext.jsアプリケーションを作成します。
使用タイミング
- 新しいWebアプリケーションプロジェクトを開始するとき
- サーバーサイドレンダリングを持つReactベースのフロントエンドを作成するとき
- APIルートを持つフルスタックアプリケーションを構築するとき
- TypeScript Webプロジェクトをセットアップするとき
入力
- 必須: アプリケーション名
- 必須: パッケージマネージャーの選択（npm、yarn、pnpm）
- オプション: Tailwind CSSを含めるか（デフォルト：あり）
- オプション: ESLintを含めるか（デフォルト：あり）
- オプション: src/ディレクトリ構造（デフォルト：あり）
手順
ステップ1: プロジェクトの作成
npx create-next-app@latest my-app \
--typescript \
--tailwind \
--eslint \
--app \
--src-dir \
--import-alias "@/*"
プロンプトに答えるか、フラグを使ってすべてのオプションを非対話式に設定します。
期待結果： プロジェクトディレクトリが作成され、すべての依存関係がインストールされます。
失敗時： Node.jsのバージョンを確認してください（node --version、18.17以上が必要）。npxが使用可能であることを確認してください。プロンプトでコマンドが止まる場合は、--use-npmフラグ（または--use-pnpm/--use-yarn）を追加してパッケージマネージャープロンプトをスキップしてください。
ステップ2: プロジェクト構造の確認
my-app/
├── src/
│ ├── app/
│ │ ├── layout.tsx # ルートレイアウト
│ │ ├── page.tsx # ホームページ
│ │ ├── globals.css # グローバルスタイル
│ │ └── favicon.ico
│ └── lib/ # 共有ユーティリティ（手動で作成）
├── public/ # 静的アセット
├── next.config.ts # Next.js設定
├── tailwind.config.ts # Tailwind設定
├── tsconfig.json # TypeScript設定
├── package.json
└── .eslintrc.json
期待結果： 一覧に記載されたすべてのディレクトリとファイルが存在します。
失敗時： src/ディレクトリが存在しない場合、--src-dirフラグが渡されていません。create-next-appをフラグ付きで再実行するか、ファイルを手動でsrc/app/に移動してください。
ステップ3: Next.jsの設定
プロジェクトのニーズに合わせてnext.config.tsを編集します：
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
// Reactストリクトモードを有効にする
reactStrictMode: true,
// 画像最適化ドメイン
images: {
remotePatterns: [
{
protocol: "https",
hostname: "example.com",
},
],
},
};
export default nextConfig;
期待結果： next.config.tsがTypeScriptエラーなしで保存されます。
失敗時： ファイルが.tsではなく.js拡張子を使っている場合、名前を変更してください。NextConfig型が"next"からインポートされていることを確認してください。
ステップ4: ディレクトリ規則のセットアップ
共通ディレクトリを作成します：
mkdir -p src/app/api
mkdir -p src/components
mkdir -p src/lib
mkdir -p src/types
期待結果： src/の下に4つのディレクトリがすべて作成されます。
失敗時： src/が存在しない場合は先に作成するか、プロジェクト構造（srcを使わないレイアウトはルートにapp/を使用）に合わせてパスを調整してください。
ステップ5: ベースレイアウトの作成
src/app/layout.tsxを編集します：
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "My Application",
description: "Application description",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
期待結果： レイアウトがInterフォントでレンダリングされ、すべてのページを包みます。
失敗時： フォントの読み込みが失敗する場合は、ネットワークアクセスを確認してください。一時的な回避策としてシステムフォントフォールバックにInterを置き換えてください。
ステップ6: サンプルAPIルートの追加
src/app/api/health/route.tsを作成します：
import { NextResponse } from "next/server";
export async function GET() {
return NextResponse.json({ status: "ok", timestamp: new Date().toISOString() });
}
期待結果： src/app/api/health/route.tsにファイルが作成されます。
失敗時： api/health/ディレクトリが存在することを確認してください。ファイルはデフォルトエクスポートではなく、名前付きHTTPメソッドハンドラー（GET、POSTなど）をエクスポートする必要があります。
ステップ7: 開発サーバーの起動
cd my-app
npm run dev
期待結果： アプリケーションがhttp://localhost:3000で起動します。
失敗時： Node.jsのバージョンを確認してください（18.17以上）。依存関係が見つからない場合はnpm installを実行してください。
バリデーション
-
npm run devがエラーなしで起動する - localhost:3000でホームページが読み込まれる
- TypeScriptコンパイルが成功する
- Tailwind CSSクラスが適用されている
- APIルートが/api/healthで応答する
- ESLintがエラーなしで実行される（
npm run lint）
よくある落とし穴
- Node.jsバージョン: Next.jsはNode.js 18.17以上が必要です。
node --versionで確認してください。 - ポートの競合: デフォルトポート3000が使用中の場合があります。
npm run dev -- -p 3001を使用してください。 - インポートエイリアスの混乱:
@/*はsrc/*にマップされます。node_modulesのインポートと混同しないでください。 - Pages対App Router: App Router（
src/app/）を使用していることを確認し、Pages Router（src/pages/）ではないことを確認してください。
関連スキル
setup-tailwind-typescript- TailwindとTypeScriptの詳細な設定deploy-to-vercel- スキャフォールドしたアプリのデプロイconfigure-git-repository- バージョン管理のセットアップ
Dépôt GitHub
Compétences associées
qmd
Développementqmd est un outil CLI de recherche et d'indexation locale qui permet aux développeurs d'indexer et de rechercher dans des fichiers locaux en utilisant une recherche hybride combinant BM25, des embeddings vectoriels et du reranking. Il prend en charge à la fois une utilisation en ligne de commande et un mode MCP (Model Context Protocol) pour l'intégration avec Claude. L'outil utilise Ollama pour les embeddings et stocke les index localement, ce qui le rend idéal pour rechercher dans de la documentation ou des bases de code directement depuis le terminal.
subagent-driven-development
DéveloppementCette compétence exécute des plans de mise en œuvre en déployant un nouveau sous-agent pour chaque tâche indépendante, avec une revue de code entre les tâches. Elle permet une itération rapide tout en maintenant des contrôles de qualité grâce à ce processus de revue. Utilisez-la lorsque vous travaillez sur des tâches principalement indépendantes au sein d'une même session pour assurer une progression continue avec des vérifications de qualité intégrées.
mcporter
DéveloppementLa compétence mcporter permet aux développeurs de gérer et d'appeler des serveurs Model Context Protocol (MCP) directement depuis Claude. Elle fournit des commandes pour lister les serveurs disponibles, appeler leurs outils avec des arguments, et gérer l'authentification ainsi que le cycle de vie du démon. Utilisez cette compétence pour intégrer et tester les fonctionnalités des serveurs MCP dans votre flux de travail de développement.
adk-deployment-specialist
DéveloppementCette compétence déploie et orchestre des agents Vertex AI ADK en utilisant le protocole A2A, gérant la découverte d'AgentCard, la soumission de tâches, et prenant en charge des outils tels que le bac à sable d'exécution de code et la banque de mémoire. Elle permet de construire des systèmes multi-agents avec des modèles d'orchestration séquentiels, parallèles ou en boucle en Python, Java ou Go. Utilisez-la lorsqu'on vous demande de déployer des agents ADK ou d'orchestrer des flux de travail d'agents sur Google Cloud.