scaffold-nextjs-app

pjt222

업데이트됨 2 days ago

1 조회

디자인ai

정보

이 스킬은 TypeScript, ESLint, 그리고 선택적으로 Tailwind CSS를 사용하여 App Router 기반의 새로운 Next.js 애플리케이션을 구성합니다. 프로젝트 구조, 라우팅 규칙, 환경 변수를 설정하고 로컬 개발 환경 구성을 확인합니다. 현대적인 Next.js 프로젝트를 빠르게 시작하거나 기존 Pages Router 앱을 App Router로 마이그레이션하는 데 사용하세요.

빠른 설치

Claude Code

문서

name: scaffold-nextjs-app description: > Next.js-Anwendung mit App Router, TypeScript, ESLint und optionalem Tailwind CSS erstellen. Behandelt Projektstruktur, Routing-Konventionen, Umgebungsvariablen und lokale Entwicklungsverifikation. Verwenden, wenn ein neues Next.js-Projekt mit modernen Konventionen gestartet wird oder eine bestehende Pages-Router-App auf App Router migriert werden soll. license: MIT locale: de source_locale: en source_commit: 6f65f316 translator: claude-opus-4-6 translation_date: 2026-03-16 allowed-tools: Read Write Edit Bash Grep Glob metadata: author: Philipp Thoss version: "1.0" domain: web-dev complexity: basic language: TypeScript tags: nextjs, react, typescript, app-router, web-dev

Next.js-App scaffolden

Eine neue Next.js-Anwendung mit App Router, TypeScript und modernen Konventionen scaffolden, bereit für die Entwicklung.

Wann verwenden

Start eines neuen Next.js-Projekts mit modernen Konventionen
Migration einer bestehenden Pages-Router-App auf App Router
Einrichten eines standardisierten Next.js-Projekts für ein Team
Schnelles Prototypen einer React-Web-App

Eingaben

Erforderlich: Projektname (z. B. my-app)
Optional: Paketmanager (npm, yarn, pnpm — Standard: npm)
Optional: Ob Tailwind CSS eingebunden werden soll (Standard: ja)
Optional: Quellverzeichnis (src/-Layout — Standard: ja)

Vorgehensweise

Schritt 1: Next.js-Projekt erstellen

Das offizielle Create-Next-App-Tool ausführen.

npx create-next-app@latest my-app \
  --typescript \
  --eslint \
  --tailwind \
  --src-dir \
  --app \
  --import-alias "@/*"

Wenn interaktive Prompts erscheinen:

TypeScript: Yes
ESLint: Yes
Tailwind CSS: Yes (wenn gewünscht)
src/-Verzeichnis: Yes
App Router: Yes
Import-Alias: @/* (Standard)

Erwartet: Projektverzeichnis my-app/ mit vollständiger Struktur erstellt. Keine Fehler während der Installation.

Bei Fehler: Wenn npx nicht verfügbar ist, Node.js (>= 18) installieren. Wenn Netzwerkfehler auftreten, erneut versuchen oder --use-npm explizit angeben.

Schritt 2: Projektstruktur überprüfen

Sicherstellen, dass das Scaffold die erwartete App-Router-Struktur erzeugt hat.

my-app/
├── src/
│   └── app/
│       ├── layout.tsx       # Root-Layout (erforderlich)
│       ├── page.tsx         # Startseite (/)
│       ├── globals.css      # Globale Stile
│       └── favicon.ico
├── public/                  # Statische Assets
├── next.config.js           # Next.js-Konfiguration
├── tailwind.config.ts       # Tailwind-Konfiguration (wenn aktiviert)
├── tsconfig.json            # TypeScript-Konfiguration
├── package.json
└── .eslintrc.json

Erwartet: Alle aufgelisteten Dateien vorhanden. src/app/layout.tsx enthält Root-RootLayout-Komponente mit HTML- und Body-Tags.

Bei Fehler: Wenn das src/-Verzeichnis fehlt, wurde --src-dir möglicherweise nicht gesetzt. Manuell src/app/ erstellen und Dateien dorthin verschieben.

Schritt 3: Root-Layout und Metadaten konfigurieren

src/app/layout.tsx mit geeignetem Titel und Metadaten aktualisieren.

// 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 App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Erwartet: Layout kompiliert ohne TypeScript-Fehler. Metadaten-Objekt hat title und description.

Bei Fehler: Wenn Font-Imports fehlschlagen, die Font-Importe entfernen und zu Standard-System-Fonts wechseln: <body className="font-sans">.

Schritt 4: Startseite einrichten

src/app/page.tsx durch eine saubere Startseite ersetzen.

// src/app/page.tsx
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">Welcome to My App</h1>
      <p className="mt-4 text-lg text-gray-600">
        Get started by editing{' '}
        <code className="font-mono text-blue-600">src/app/page.tsx</code>
      </p>
    </main>
  )
}

Erwartet: Seite rendert ohne Fehler. Tailwind-Klassen werden angewendet (wenn Tailwind aktiviert ist).

Bei Fehler: Wenn Tailwind-Klassen nicht angewendet werden, tailwind.config.ts überprüfen — content-Array muss ./src/**/*.{ts,tsx} enthalten.

Schritt 5: Umgebungsvariablen konfigurieren

Umgebungsvariablen-Dateien für verschiedene Umgebungen erstellen.

# .env.local — lokale Entwicklung (git-ignoriert)
NEXT_PUBLIC_API_URL=http://localhost:3001

# .env.example — Template (ins Repository einchecken)
NEXT_PUBLIC_API_URL=https://api.example.com

.gitignore aktualisieren:

# Umgebungsvariablen
.env.local
.env.*.local

Next.js-Konventionen für Umgebungsvariablen:

NEXT_PUBLIC_* — im Browser zugänglich
Kein Präfix — nur serverseitig

Erwartet: .env.local existiert (git-ignoriert). .env.example ist eingecheckt als Dokumentation.

Bei Fehler: Wenn Variablen im Browser undefiniert sind, sicherstellen, dass sie mit NEXT_PUBLIC_ beginnen und der Entwicklungsserver neu gestartet wurde.

Schritt 6: Entwicklungsserver verifizieren

Den Entwicklungsserver starten und prüfen, ob er läuft.

cd my-app
npm run dev

Erwartete Ausgabe:

▲ Next.js 14.x.x
- Local:        http://localhost:3000
- Environments: .env.local

✓ Ready in Xms

# In einem separaten Terminal verifizieren
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000
# Erwartet: 200

Erwartet: Server startet auf Port 3000. HTTP 200 auf Startseite. Keine Kompilierungsfehler.

Bei Fehler: Wenn Port 3000 belegt ist, mit npm run dev -- --port 3001 starten. Wenn TypeScript-Fehler auftreten, tsconfig.json überprüfen — strict: true erfordert explizite Typen überall.

Schritt 7: Seitenrouting testen

Zusätzliche Routen erstellen, um das App-Router-System zu verifizieren.

// src/app/about/page.tsx
export default function About() {
  return (
    <main className="p-24">
      <h1 className="text-4xl font-bold">About</h1>
      <p className="mt-4">About page content here.</p>
    </main>
  )
}

curl -s -o /dev/null -w "%{http_code}" http://localhost:3000/about
# Erwartet: 200

Erwartet: /about-Route gibt HTTP 200 zurück und rendert Seiteninhalt.

Bei Fehler: Wenn 404 erscheint, sicherstellen, dass die Datei unter src/app/about/page.tsx (nicht src/app/about.tsx) liegt — App Router erfordert page.tsx in Verzeichnissen.

Validierung

Projektverzeichnis mit vollständiger App-Router-Struktur existiert
src/app/layout.tsx mit Root-Layout-Komponente vorhanden
src/app/page.tsx ohne TypeScript-Fehler
Entwicklungsserver startet und gibt HTTP 200 zurück
Tailwind CSS-Klassen werden angewendet (wenn aktiviert)
Umgebungsvariablen-Template (.env.example) ins Repository eingecheckt
Zusätzliche Routen als Verzeichnisse mit page.tsx funktionieren

Haeufige Stolperfallen

Pages Router vs App Router: App Router verwendet Verzeichnisse mit page.tsx; Pages Router verwendet pages/-Verzeichnis direkt. Nicht mischen.
Client vs Server Components: Standardmäßig sind alle Komponenten Server Components. Für Hooks (useState, useEffect) 'use client' am Anfang der Datei hinzufügen.
NEXT_PUBLIC_-Präfix: Ohne dieses Präfix sind Umgebungsvariablen auf dem Server undefiniert, wenn clientseitig zugegriffen wird.
Import-Alias: @/* wird auf src/ aufgelöst. @/components/Button importiert aus src/components/Button.tsx.
Großschreibung von Routennamen: Next.js-Routen spiegeln die Verzeichnisstruktur wider (lowercase wird empfohlen). /About und /about sind identisch in production, aber nicht in development auf case-sensitiven Dateisystemen.
Font-Optimierung: next/font optimiert automatisch Fonts. Direkte <link>-Tags für Google Fonts vermeiden.

GitHub 저장소

pjt222/agent-almanac

경로: i18n/de/skills/scaffold-nextjs-app

agentsagentskillsai-assisted-developmentclaude-codeskillsteams

연관 스킬

executing-plans

디자인

executing-plans 스킬은 검토 체크포인트가 포함된 통제된 배치로 실행할 완전한 구현 계획이 있을 때 사용합니다. 이 스킬은 계획을 불러와 비판적으로 검토한 후, 소규모 배치(기본값 3개 작업)로 작업을 실행하면서 각 배치 사이에 진행 상황을 아키텍트 검토를 위해 보고합니다. 이를 통해 내재된 품질 관리 체크포인트를 갖춘 체계적인 구현이 보장됩니다.

스킬 보기

requesting-code-review

디자인

이 스킬은 코드 변경 사항을 요구 사항에 따라 분석하기 위해 코드 리뷰어 하위 에이전트를 호출합니다. 작업 완료 후, 주요 기능 구현 후, 또는 메인 브랜치에 병합하기 전에 사용해야 합니다. 이 리뷰는 현재 구현체와 원래 계획을 비교하여 문제를 조기에 발견하는 데 도움이 됩니다.

스킬 보기

connect-mcp-server

디자인

이 스킬은 개발자들이 HTTP, stdio 또는 SSE 전송 방식을 통해 MCP 서버를 Claude Code에 연결하는 포괄적인 가이드를 제공합니다. GitHub, Notion 및 사용자 정의 API와 같은 외부 서비스를 통합하기 위한 설치, 구성, 인증 및 보안을 다룹니다. MCP 통합 설정, 외부 도구 구성 또는 Claude의 모델 컨텍스트 프로토콜 작업 시 활용하세요.

스킬 보기

web-cli-teleport

디자인

이 스킬은 작업 분석을 기반으로 개발자가 Claude Code 웹 인터페이스와 CLI 인터페이스 중 선택할 수 있도록 돕고, 두 환경 간 원활한 세션 텔레포트를 가능하게 합니다. 웹, CLI 또는 모바일 환경 전환 시 세션 상태와 컨텍스트를 관리하여 워크플로를 최적화합니다. 다양한 단계에서 서로 다른 도구가 필요한 복잡한 프로젝트에 사용하세요.

스킬 보기

scaffold-nextjs-app

정보

빠른 설치

Claude Code

문서

Next.js-App scaffolden

Wann verwenden

Eingaben

Vorgehensweise

Schritt 1: Next.js-Projekt erstellen

Schritt 2: Projektstruktur überprüfen

Schritt 3: Root-Layout und Metadaten konfigurieren

Schritt 4: Startseite einrichten

Schritt 5: Umgebungsvariablen konfigurieren

Schritt 6: Entwicklungsserver verifizieren

Schritt 7: Seitenrouting testen

Validierung

Haeufige Stolperfallen

Verwandte Skills

GitHub 저장소

연관 스킬

executing-plans

requesting-code-review

connect-mcp-server

web-cli-teleport