scaffold-nextjs-app
О программе
Этот навык создает новое приложение Next.js с использованием App Router, TypeScript и современных производственных настроек по умолчанию. Он обрабатывает создание проекта, структуру каталогов, настройку маршрутизации и первоначальную конфигурацию. Используйте его при запуске нового веб-приложения, создании React-фронтенда с серверным рендерингом или построении полноценного приложения с 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 для установки этого навыка
Документация
搭 Next.js 應用
立新 Next.js 應用，附 App Router、TypeScript、與生產之默。
用時
- 新立網應用之項目乃用
- 立 React 之前端附服務端渲染乃用
- 立全棧應用附 API 之路由乃用
- 自零立 TypeScript 之網項目乃用
入
- 必要：應用之名
- 必要：包管之選（npm、yarn、pnpm）
- 可選：是否含 Tailwind CSS（默：是）
- 可選：是否含 ESLint（默：是）
- 可選：src/ 目之結構（默：是）
法
第一步：建項目
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）以略包管之問。
第二步：驗項目之結構
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/。
第三步：配 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" 引。
第四步：設目之常規
立常用之目：
mkdir -p src/app/api
mkdir -p src/components
mkdir -p src/lib
mkdir -p src/types
得：四目皆建於 src/ 下。
敗則：src/ 不存，先立之，或調徑以合項目結構（非 src 之布用 app/ 於根）。
第五步：建基之布
編 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。
第六步：增例 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 等），非默之出。
第七步：行開發之服
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 vs App Router：確用 App Router（
src/app/），非 Pages Router（src/pages/）
參
setup-tailwind-typescript— 詳之 Tailwind 與 TypeScript 之配deploy-to-vercel— 展所搭之應用configure-git-repository— 版控之設
GitHub репозиторий
Frequently asked questions
What is the scaffold-nextjs-app skill?
scaffold-nextjs-app is a Claude Skill by pjt222. Skills package instructions and resources that Claude loads on demand, so Claude can perform scaffold-nextjs-app-related tasks without extra prompting.
How do I install scaffold-nextjs-app?
Use the install commands on this page: add scaffold-nextjs-app to Claude Code as a plugin, or clone its repository into your skills directory, then restart Claude so it picks up the skill.
What category does scaffold-nextjs-app belong to?
scaffold-nextjs-app is in the Meta category, tagged react, api and design.
Is scaffold-nextjs-app free to use?
Yes. scaffold-nextjs-app is listed on AIMCP and free to install. It runs inside Claude, so no separate service account is required to use the skill itself.
Похожие навыки
Этот навык предоставляет проверенную в продакшене настройку для Content Collections — TypeScript-ориентированного инструмента, который преобразует файлы Markdown/MDX в типобезопасные коллекции данных с валидацией Zod. Используйте его при создании блогов, сайтов документации или контентных приложений на Vite + React для обеспечения типобезопасности и автоматической проверки содержимого. Он охватывает всё: от настройки плагина Vite и компиляции MDX до оптимизации развертывания и валидации схем.
Этот навык позволяет разработчикам создавать приложения на платформе прогнозных рынков Polymarket, включая интеграцию с API для торговли и получения рыночных данных. Он также обеспечивает потоковую передачу данных в реальном времени через WebSocket для отслеживания текущих сделок и рыночной активности. Используйте его для реализации торговых стратегий или создания инструментов, обрабатывающих обновления рынка в реальном времени.
Этот навык помогает разработчикам создавать плагины OpenCode, которые подключаются к более чем 25 типам событий, таким как команды, файлы и операции LSP. Он предоставляет структуру плагина, спецификации API событий и шаблоны реализации для модулей на JavaScript/TypeScript. Используйте его, когда вам нужно перехватывать, отслеживать или расширять жизненный цикл ассистента OpenCode AI с помощью пользовательской событийно-ориентированной логики.
SGLang — это высокопроизводительный фреймворк для обслуживания больших языковых моделей (LLM), специализирующийся на быстрой структурированной генерации JSON, regex и рабочих процессов агентов с использованием кэширования префиксов RadixAttention. Он обеспечивает значительно более высокую скорость вывода, особенно для задач с повторяющимися префиксами, что делает его идеальным для сложных структурированных результатов и многократных диалогов. Выбирайте SGLang вместо альтернатив, таких как vLLM, когда вам требуется ограниченное декодирование или вы создаете приложения с интенсивным совместным использованием префиксов.