scaffold-nextjs-app

pjt222

Aktualisiert 6 days ago

19 Ansichten

Metareactapidesign

Über

Diese Fähigkeit erstellt ein neues Next.js-Anwendungsgerüst unter Verwendung des App-Routers mit TypeScript und modernen Standardeinstellungen. Sie richtet die Projektstruktur, das Routing und die anfängliche Konfiguration für ein React-basiertes Frontend mit serverseitigem Rendering ein. Nutzen Sie sie, um schnell ein neues Webprojekt, eine Full-Stack-Anwendung mit API-Routen oder ein TypeScript-Webprojekt von Grund auf zu starten.

Schnellinstallation

Claude Code

Dokumentation

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

驗

忌

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-typescript
deploy-to-vercel
configure-git-repository

GitHub Repository

pjt222/agent-almanac

Pfad: i18n/wenyan-ultra/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