scaffold-nextjs-app

pjt222

업데이트됨 2 days ago

9 조회

개발reactapi

정보

이 스킬은 App Router, TypeScript, 그리고 현대적인 기본 설정을 갖춘 새로운 Next.js 애플리케이션의 기반을 구성합니다. 프로젝트 생성, 디렉터리 구조, 라우팅 설정, 초기 구성을 처리하며, 서버 사이드 렌더링, API 라우트 또는 풀스택 TypeScript 애플리케이션이 필요한 웹 프로젝트를 빠르게 시작하는 데 사용하세요.

빠른 설치

Claude Code

문서

name: scaffold-nextjs-app description: > 搭建新的 Next.js 应用程序，使用 App Router、TypeScript 及现代默认配置。涵盖项目创建、目录结构、路由设置及初始配置。适用于启动新的 Web 应用项目、创建支持服务端渲染的 React 前端、构建带 API 路由的全栈应用，或从零搭建 TypeScript Web 项目。 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 locale: zh-CN source_locale: en source_commit: 6f65f316 translator: claude-opus-4-6 translation_date: 2026-03-16

搭建 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        # Root layout
│   │   ├── page.tsx          # Home page
│   │   ├── globals.css       # Global styles
│   │   └── favicon.ico
│   └── lib/                  # Shared utilities (create manually)
├── public/                   # Static assets
├── next.config.ts            # Next.js configuration
├── tailwind.config.ts        # Tailwind configuration
├── tsconfig.json             # TypeScript configuration
├── 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 = {
  // Enable React strict mode
  reactStrictMode: true,

  // Image optimization domains
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "example.com",
      },
    ],
  },
};

export default nextConfig;

预期结果： next.config.ts 保存时无 TypeScript 错误。

失败处理： 如果文件使用 .js 扩展名而非 .ts，请重命名。确保 NextConfig 类型从 "next" 导入。

第 4 步：设置目录约定

创建常用目录：

mkdir -p src/app/api
mkdir -p src/components
mkdir -p src/lib
mkdir -p src/types

预期结果： src/ 下四个目录均已创建。

失败处理： 如果 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/）。

GitHub 저장소

pjt222/agent-almanac

경로: i18n/zh-CN/skills/scaffold-nextjs-app

agentsagentskillsai-assisted-developmentclaude-codeskillsteams

연관 스킬

qmd

개발

qmd는 BM25, 벡터 임베딩, 재순위화를 결합한 하이브리드 검색을 통해 로컬 파일을 색인화하고 검색할 수 있는 로컬 검색 및 색인화 CLI 도구입니다. 명령줄 사용과 Claude 통합을 위한 MCP(Model Context Protocol) 모드를 모두 지원합니다. 이 도구는 임베딩에 Ollama를 사용하고 색인을 로컬에 저장하여 터미널에서 직접 문서나 코드베이스를 검색하는 데 이상적입니다.

스킬 보기

subagent-driven-development

개발

이 스킬은 각 독립적인 작업마다 새로운 하위 에이전트를 배치하고 작업 사이에 코드 리뷰를 진행하여 구현 계획을 실행합니다. 이 리뷰 프로세스를 통해 품질 게이트를 유지하면서 빠른 반복 작업을 가능하게 합니다. 동일한 세션 내에서 대부분 독립적인 작업을 진행할 때 내장된 품질 검증과 함께 지속적인 진행을 보장하기 위해 사용하세요.

스킬 보기

mcporter

개발

mcporter 스킬은 개발자가 Claude에서 직접 Model Context Protocol(MCP) 서버를 관리하고 호출할 수 있도록 합니다. 이 스킬은 사용 가능한 서버를 나열하고, 인수를 사용해 해당 서버의 도구를 호출하며, 인증 및 데몬 생명주기를 처리하는 명령어를 제공합니다. 개발 워크플로우에서 MCP 서버 기능을 통합하고 테스트할 때 이 스킬을 사용하세요.

스킬 보기

adk-deployment-specialist

개발

이 스킬은 A2A 프로토콜을 사용하여 Vertex AI ADK 에이전트를 배포하고 오케스트레이션하며, AgentCard 검색, 작업 제출, 코드 실행 샌드박스 및 메모리 뱅크와 같은 지원 도구를 관리합니다. Python, Java 또는 Go 언어로 순차, 병렬 또는 루프 오케스트레이션 패턴을 갖춘 다중 에이전트 시스템 구축을 가능하게 합니다. Google Cloud에서 ADK 에이전트 배포 또는 에이전트 워크플로우 오케스트레이션을 요청받았을 때 사용하세요.

스킬 보기

scaffold-nextjs-app

정보

빠른 설치

Claude Code

문서

搭建 Next.js 应用

适用场景

输入

步骤

第 1 步：创建项目

第 2 步：验证项目结构

第 3 步：配置 Next.js

第 4 步：设置目录约定

第 5 步：创建基础布局

第 6 步：添加示例 API 路由

第 7 步：运行开发服务器

验证清单

常见问题

相关技能

GitHub 저장소

연관 스킬

qmd

subagent-driven-development

mcporter

adk-deployment-specialist