scaffold-nextjs-app
정보
이 스킬은 App Router, TypeScript, 그리고 현대적인 기본 설정으로 새로운 Next.js 애플리케이션의 기반을 구성합니다. 프로젝트 생성, 디렉터리 구조, 라우팅 설정, 초기 구성을 처리합니다. 서버 사이드 렌더링과 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-appClaude 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 저장소
연관 스킬
subagent-driven-development
개발이 스킬은 각 독립적인 작업마다 새로운 하위 에이전트를 배치하고 작업 사이에 코드 리뷰를 진행하여 구현 계획을 실행합니다. 이 리뷰 프로세스를 통해 품질 게이트를 유지하면서 빠른 반복 작업을 가능하게 합니다. 동일한 세션 내에서 대부분 독립적인 작업을 진행할 때 내장된 품질 검증과 함께 지속적인 진행을 보장하기 위해 사용하세요.
qmd
개발qmd는 BM25, 벡터 임베딩, 재순위화를 결합한 하이브리드 검색을 통해 로컬 파일을 색인화하고 검색할 수 있는 로컬 검색 및 색인화 CLI 도구입니다. 명령줄 사용과 Claude 통합을 위한 MCP(Model Context Protocol) 모드를 모두 지원합니다. 이 도구는 임베딩에 Ollama를 사용하고 색인을 로컬에 저장하여 터미널에서 직접 문서나 코드베이스를 검색하는 데 이상적입니다.
mcporter
개발mcporter 스킬은 개발자가 Claude에서 직접 Model Context Protocol(MCP) 서버를 관리하고 호출할 수 있도록 합니다. 이 스킬은 사용 가능한 서버를 나열하고, 인수를 사용해 해당 서버의 도구를 호출하며, 인증 및 데몬 생명주기를 처리하는 명령어를 제공합니다. 개발 워크플로우에서 MCP 서버 기능을 통합하고 테스트할 때 이 스킬을 사용하세요.
adk-deployment-specialist
개발이 스킬은 A2A 프로토콜을 사용하여 Vertex AI ADK 에이전트를 배포하고 오케스트레이션하며, AgentCard 검색, 작업 제출, 코드 실행 샌드박스 및 메모리 뱅크와 같은 지원 도구를 관리합니다. Python, Java 또는 Go 언어로 순차, 병렬 또는 루프 오케스트레이션 패턴을 갖춘 다중 에이전트 시스템 구축을 가능하게 합니다. Google Cloud에서 ADK 에이전트 배포 또는 에이전트 워크플로우 오케스트레이션을 요청받았을 때 사용하세요.