scaffold-nextjs-app
Acerca de
Esta habilidad estructura una nueva aplicación Next.js con App Router, TypeScript y configuraciones modernas predeterminadas. Maneja la creación del proyecto, la estructura de directorios, la configuración de enrutamiento y la configuración inicial. Úsala para iniciar rápidamente un proyecto full-stack con renderizado del lado del servidor y rutas API.
Instalación rápida
Claude Code
Recomendadonpx 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-appCopia y pega este comando en Claude Code para instalar esta habilidad
Documentación
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- バージョン管理のセットアップ
Repositorio GitHub
Habilidades relacionadas
qmd
Desarrolloqmd es una herramienta CLI de búsqueda e indexación local que permite a los desarrolladores indexar y buscar en archivos locales mediante búsqueda híbrida que combina BM25, embeddings vectoriales y reranking. Es compatible tanto con uso desde la línea de comandos como con modo MCP (Model Context Protocol) para integración con Claude. La herramienta utiliza Ollama para los embeddings y almacena los índices localmente, lo que la hace ideal para buscar documentación o bases de código directamente desde la terminal.
subagent-driven-development
DesarrolloEsta habilidad ejecuta planes de implementación asignando un nuevo subagente para cada tarea independiente, con revisión de código entre tareas. Permite una iteración rápida mientras mantiene controles de calidad a través de este proceso de revisión. Úsala cuando trabajes en tareas mayormente independientes dentro de la misma sesión para garantizar un progreso continuo con verificaciones de calidad integradas.
mcporter
DesarrolloLa habilidad mcporter permite a los desarrolladores gestionar y llamar servidores del Protocolo de Contexto de Modelo (MCP) directamente desde Claude. Proporciona comandos para listar servidores disponibles, llamar a sus herramientas con argumentos, y manejar la autenticación y el ciclo de vida del daemon. Utiliza esta habilidad para integrar y probar la funcionalidad de servidores MCP en tu flujo de trabajo de desarrollo.
adk-deployment-specialist
DesarrolloEsta habilidad despliega y orquesta agentes Vertex AI ADK utilizando el protocolo A2A, gestionando el descubrimiento de AgentCard, el envío de tareas y soportando herramientas como el Sandbox de Ejecución de Código y el Banco de Memoria. Permite construir sistemas multiagente con patrones de orquestación secuencial, paralela o en bucle en Python, Java o Go. Úsela cuando se le solicite desplegar agentes ADK u orquestar flujos de trabajo de agentes en Google Cloud.