scaffold-nextjs-app
О программе
Этот навык создает новый проект Next.js с использованием App Router, TypeScript и современных настроек по умолчанию. Он настраивает структуру проекта, маршрутизацию и начальную конфигурацию для фронтенда на React с серверным рендерингом. Используйте его для быстрого старта нового веб-проекта, полноценного приложения с API-маршрутами или TypeScript-проекта с нуля.
Быстрая установка
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 前含 SSR→用
- 建全棧應含 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
│ │ ├── page.tsx
│ │ ├── globals.css
│ │ └── favicon.ico
│ └── lib/
├── public/
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
├── 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 = {
reactStrictMode: true,
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 需 ≥ 18.17。
node --version查 - 口衝：默口 3000 用→
npm run dev -- -p 3001 - 入別混：
@/*映src/*。勿混 node_modules 入 - Pages vs App：用 App（
src/app/）非 Pages（src/pages/）
參
setup-tailwind-typescriptdeploy-to-vercelconfigure-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, когда вам требуется ограниченное декодирование или вы создаете приложения с интенсивным совместным использованием префиксов.