scaffold-nextjs-app

pjt222

Aktualisiert 2 days ago

7 Ansichten

Metareactapidesign

Über

Diese Fähigkeit erstellt ein neues Next.js-Anwendungsgerüst mit App Router, TypeScript und modernen Produktionsstandards. Sie übernimmt die Projekterstellung, Verzeichnisstruktur, Routing-Einrichtung und anfängliche Konfiguration. Nutzen Sie sie, wenn Sie ein neues Webanwendungsprojekt starten, ein React-basiertes Frontend mit serverseitigem Rendering erstellen oder eine Full-Stack-Anwendung mit API-Routen aufbauen.

Schnellinstallation

Claude Code

Dokumentation

搭 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。

驗

陷

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 Repository

pjt222/agent-almanac

Pfad: i18n/wenyan/skills/scaffold-nextjs-app

agentsagentskillsai-assisted-developmentclaude-codeskillsteams

Verwandte Skills

content-collections

Meta

Diese Skill bietet eine produktionsgetestete Einrichtung für Content Collections – ein TypeScript-first-Tool, das Markdown/MDX-Dateien in typsichere Datensammlungen mit Zod-Validierung umwandelt. Verwenden Sie ihn beim Erstellen von Blogs, Dokumentationsseiten oder inhaltsstarken Vite + React-Anwendungen, um Typsicherheit und automatische Inhaltsvalidierung zu gewährleisten. Er behandelt alles von der Vite-Plugin-Konfiguration und MDX-Kompilierung bis hin zur Deployment-Optimierung und Schema-Validierung.

Skill ansehen

polymarket

Meta

Diese Fähigkeit ermöglicht es Entwicklern, Anwendungen mit der Polymarket-Prognosemärkte-Plattform zu erstellen, einschließlich API-Integration für Handel und Marktdaten. Sie bietet außerdem Echtzeit-Datenstreaming über WebSocket, um Live-Trades und Marktaktivitäten zu überwachen. Nutzen Sie sie zur Implementierung von Handelsstrategien oder zur Erstellung von Tools, die Live-Marktaktualisierungen verarbeiten.

Skill ansehen

creating-opencode-plugins

Meta

Diese Fähigkeit unterstützt Entwickler dabei, OpenCode-Plugins zu erstellen, die in über 25 Ereignistypen wie Befehle, Dateien und LSP-Operationen eingreifen. Sie bietet die Plugin-Struktur, Event-API-Spezifikationen und Implementierungsmuster für JavaScript/TypeScript-Module. Nutzen Sie sie, wenn Sie den Lebenszyklus des OpenCode KI-Assistenten mit benutzerdefinierter ereignisgesteuerter Logik abfangen, überwachen oder erweitern müssen.

Skill ansehen

sglang

Meta

SGLang ist ein hochperformantes LLM-Serving-Framework, das sich auf schnelle, strukturierte Generierung für JSON, Regex und agentenbasierte Workflows unter Verwendung seines RadixAttention-Prefix-Cachings spezialisiert. Es bietet deutlich schnellere Inferenz, insbesondere für Aufgaben mit wiederholten Präfixen, was es ideal für komplexe, strukturierte Ausgaben und Mehrfachdialoge macht. Wählen Sie SGLang gegenüber Alternativen wie vLLM, wenn Sie constrained decoding benötigen oder Anwendungen mit umfangreicher Präfix-Weitergabe entwickeln.

Skill ansehen