scaffold-nextjs-app

pjt222

Mis à jour 6 days ago

22 vues

Métareactapidesign

À propos

Cette compétence échafaude une nouvelle application Next.js en utilisant l'App Router avec TypeScript et des paramètres par défaut modernes. Elle configure la structure du projet, le routage et la configuration initiale pour un frontend React avec rendu côté serveur. Utilisez-la pour démarrer rapidement un nouveau projet web, une application full-stack avec routes API, ou un projet web TypeScript à partir de zéro.

Installation rapide

Claude Code

Recommandé

Principal

npx skills add pjt222/agent-almanac -a claude-code

Commande PluginAlternatif

/plugin add https://github.com/pjt222/agent-almanac

Git CloneAlternatif

git clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/scaffold-nextjs-app

Copiez et collez cette commande dans Claude Code pour installer cette compétence

Documentation

架 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

Dépôt GitHub

pjt222/agent-almanac

Chemin: i18n/wenyan-ultra/skills/scaffold-nextjs-app

agentsagentskillsai-assisted-developmentclaude-codeskillsteams

Compétences associées

content-collections

Méta

Cette compétence propose une configuration éprouvée en production pour Content Collections, un outil axé sur TypeScript qui transforme des fichiers Markdown/MDX en collections de données typées de manière sûre avec une validation Zod. Utilisez-la lors de la création de blogs, de sites de documentation ou d'applications Vite + React riches en contenu pour garantir la sécurité de typage et la validation automatique du contenu. Elle couvre tout, de la configuration du plugin Vite et de la compilation MDX à l'optimisation des déploiements et la validation des schémas.

Voir la compétence

polymarket

Méta

Cette compétence permet aux développeurs de créer des applications avec la plateforme de marchés prédictifs Polymarket, incluant l'intégration d'API pour le trading et les données de marché. Elle fournit également une diffusion de données en temps réel via WebSocket pour surveiller les transactions en direct et l'activité du marché. Utilisez-la pour mettre en œuvre des stratégies de trading ou pour créer des outils traitant les mises à jour de marché en direct.

Voir la compétence

creating-opencode-plugins

Méta

Cette compétence aide les développeurs à créer des plugins OpenCode qui s'interconnectent avec plus de 25 types d'événements tels que les commandes, les fichiers et les opérations LSP. Elle fournit la structure du plugin, les spécifications de l'API événementielle et les modèles d'implémentation pour les modules JavaScript/TypeScript. Utilisez-la lorsque vous avez besoin d'intercepter, de surveiller ou d'étendre le cycle de vie de l'assistant IA OpenCode avec une logique personnalisée pilotée par les événements.

Voir la compétence

sglang

Méta

SGLang est un framework de service LLM haute performance spécialisé dans la génération rapide et structurée pour les workflows JSON, regex et agentiques grâce à son cache de préfixe RadixAttention. Il offre une inférence nettement plus rapide, particulièrement pour les tâches avec des préfixes répétés, ce qui le rend idéal pour les sorties complexes et structurées ainsi que les conversations multi-tours. Choisissez SGLang plutôt que des alternatives comme vLLM lorsque vous avez besoin d'un décodage contraint ou que vous construisez des applications avec un partage étendu de préfixes.

Voir la compétence