scaffold-nextjs-app

pjt222

更新日 6 days ago

26 閲覧

メタreactapidesign

について

このスキルは、TypeScriptとモダンなデフォルト設定を用いたApp Routerによる新しいNext.jsアプリケーションの基盤を構築します。プロジェクト構造、ルーティング、サーバーサイドレンダリングを備えたReactベースのフロントエンドの初期設定を行います。新しいウェブプロジェクト、APIルートを備えたフルスタックアプリケーション、またはTypeScriptウェブプロジェクトをゼロから迅速に開始するためにご利用ください。

クイックインストール

Claude Code

推奨

メイン

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

プラグインコマンド代替

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

Git クローン代替

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

驗

忌

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 リポジトリ

pjt222/agent-almanac

パス: i18n/wenyan-ultra/skills/scaffold-nextjs-app

agentsagentskillsai-assisted-developmentclaude-codeskillsteams