scaffold-nextjs-app
О программе
Этот навык создает новый проект Next.js с использованием App Router, TypeScript и современных настроек по умолчанию. Он обрабатывает создание проекта, структуру каталогов, настройку маршрутизации и первоначальную конфигурацию. Используйте его для быстрого запуска полноценного проекта с серверным рендерингом и API-маршрутами.
Быстрая установка
Claude Code
Рекомендуется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-appСкопируйте и вставьте эту команду в Claude Code для установки этого навыка
Документация
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- バージョン管理のセットアップ
GitHub репозиторий
Похожие навыки
qmd
Разработкаqmd — это локальный инструмент командной строки для поиска и индексирования, который позволяет разработчикам индексировать и осуществлять поиск по локальным файлам с использованием гибридного поиска, сочетающего BM25, векторные эмбеддинги и реранкинг. Он поддерживает как использование через командную строку, так и режим MCP (Model Context Protocol) для интеграции с Claude. Инструмент использует Ollama для создания эмбеддингов и хранит индексы локально, что делает его идеальным для поиска по документации или кодовой базе прямо из терминала.
subagent-driven-development
РазработкаЭтот навык выполняет планы реализации, создавая нового суб-агента для каждой независимой задачи, проводя проверку кода между задачами. Он позволяет быстро итерировать, сохраняя контроль качества через этот процесс ревью. Используйте его при работе в основном с независимыми задачами в рамках одной сессии, чтобы обеспечить непрерывный прогресс со встроенными проверками качества.
mcporter
РазработкаНавык mcporter позволяет разработчикам управлять и вызывать серверы Model Context Protocol (MCP) напрямую из Claude. Он предоставляет команды для вывода списка доступных серверов, вызова их инструментов с аргументами, а также для обработки аутентификации и управления жизненным циклом демона. Используйте этот навык для интеграции и тестирования функциональности серверов MCP в вашем рабочем процессе разработки.
adk-deployment-specialist
РазработкаЭтот навык развертывает и оркестрирует агентов Vertex AI ADK с использованием протокола A2A, управляя обнаружением AgentCard, отправкой задач и поддерживая инструменты, такие как песочница для выполнения кода и Memory Bank. Он позволяет создавать мультиагентные системы с последовательными, параллельными или циклическими схемами оркестрации на Python, Java или Go. Используйте его, когда требуется развернуть агентов ADK или оркестрировать рабочие процессы агентов в Google Cloud.