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 для установки этого навыка
Документация
Scaffold Next.js App
Create a new Next.js application with App Router, TypeScript, and production-ready defaults.
When to Use
- Starting a new web application
- React frontend with server-side rendering
- Full-stack application with API routes
- TypeScript web project
Inputs
- Required: Application name
- Required: Package manager preference (npm, yarn, pnpm)
- Optional: Include Tailwind CSS (default: yes)
- Optional: Include ESLint (default: yes)
- Optional: src/ directory structure (default: yes)
Procedure
Step 1: Create Project
npx create-next-app@latest my-app \
--typescript \
--tailwind \
--eslint \
--app \
--src-dir \
--import-alias "@/*"
Answer prompts or use flags to set all options non-interactively.
Got: Project directory created with all dependencies installed.
If fail: Check Node.js version (node --version, must be >= 18.17). Ensure npx is available. If the command hangs on prompts, add --use-npm (or --use-pnpm/--use-yarn) to skip the package manager prompt.
Step 2: Verify Project Structure
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
Got: All listed directories and files present.
If fail: If src/ is missing, the --src-dir flag was not passed. Re-run create-next-app with the flag, or move files into src/app/ manually.
Step 3: Configure Next.js
Edit 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;
Got: next.config.ts saved without TypeScript errors.
If fail: If file uses .js instead of .ts, rename it. Ensure NextConfig type is imported from "next".
Step 4: Set Up Directory Conventions
Create common directories:
mkdir -p src/app/api
mkdir -p src/components
mkdir -p src/lib
mkdir -p src/types
Got: All four directories created under src/.
If fail: If src/ does not exist, create it first or adjust paths to match the project structure (non-src layout uses app/ at the root).
Step 5: Create Base Layout
Edit 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>
);
}
Got: Layout renders with the Inter font and wraps all pages.
If fail: If font fails to load, check network access. Replace Inter with a system font fallback as a temporary workaround.
Step 6: Add Example API Route
Create src/app/api/health/route.ts:
import { NextResponse } from "next/server";
export async function GET() {
return NextResponse.json({ status: "ok", timestamp: new Date().toISOString() });
}
Got: File created at src/app/api/health/route.ts.
If fail: Ensure the api/health/ directory exists. The file must export named HTTP method handlers (GET, POST, etc.), not a default export.
Step 7: Run Development Server
cd my-app
npm run dev
Got: Application running at http://localhost:3000.
If fail: Check Node.js version (>= 18.17). Run npm install if dependencies missing.
Validation
-
npm run devstarts without errors - Home page loads at localhost:3000
- TypeScript compilation succeeds
- Tailwind CSS classes applied
- API route responds at /api/health
- ESLint runs without errors (
npm run lint)
Pitfalls
- Node.js version: Next.js requires Node.js >= 18.17. Check with
node --version. - Port conflicts: Default port 3000 may be in use. Use
npm run dev -- -p 3001. - Import alias confusion:
@/*maps tosrc/*. Don't confuse with node_modules imports. - Pages vs App Router: Ensure App Router (
src/app/), not Pages Router (src/pages/).
Related Skills
setup-tailwind-typescript- detailed Tailwind and TypeScript configurationdeploy-to-vercel- deploy the scaffolded appconfigure-git-repository- version control setup
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 and api.
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, когда вам требуется ограниченное декодирование или вы создаете приложения с интенсивным совместным использованием префиксов.