Development

Command

/nextjs-scaffold

Create a new Next.js application with best practices and optimal configuration

Guide Boost this command

davila7@davila7

GitHub

From plugin

claude-code-templates

31k200 skills200 agents200 commands32 MCP

Install

$ npx -y skills add davila7/claude-code-templates --agent claude-code

How it fires

How this command gets triggered: by you, by Claude, or both.

Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/nextjs-scaffold

Context preview

What this command does when you run it.

Create a new Next.js application with best practices and optimal configuration

Command definition

nextjs-scaffold.md

allowed-tools: Read, Write, Edit, Bash
argument-hint: [project-name] [--typescript] [--tailwind] [--app-router]
description: Create a new Next.js application with best practices and optimal configuration

Next.js Application Scaffolding

**Project Name**: $ARGUMENTS

Environment Analysis

Current directory: !`pwd`
Node.js version: !`node --version`
npm version: !`npm --version`
Existing package.json: @package.json (if exists)

Scaffolding Requirements

1. Project Initialization

Based on provided arguments, determine setup options:

**TypeScript**: Check for `--typescript` flag or detect existing TS config
**Tailwind CSS**: Check for `--tailwind` flag or detect existing config
**App Router**: Check for `--app-router` flag (default for new projects)
**ESLint/Prettier**: Always include for code quality

2. Next.js Configuration

Create optimized `next.config.js` with:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizePackageImports: ['lucide-react', '@heroicons/react'],
  },
  images: {
    formats: ['image/webp', 'image/avif'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
        ],
      },
    ];
  },
};

3. Essential Dependencies

Install core dependencies:

**Production**: `next`, `react`, `react-dom`
**Development**: `eslint`, `eslint-config-next`, `typescript` (if TS), `@types/*` (if TS)
**Optional**: `tailwindcss`, `prettier`, `husky`, `lint-staged`

4. Project Structure

Create optimal directory structure:

project-name/
├── app/                    # App Router (Next.js 13+)
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.tsx
│   └── api/
├── components/             # Reusable components
│   └── ui/                # UI primitives
├── lib/                   # Utilities and configurations
├── public/                # Static assets
├── types/                 # TypeScript type definitions
├── .env.local             # Environment variables
├── .env.example           # Environment template
├── .gitignore
├── next.config.js
├── package.json
├── README.md
└── tsconfig.json          # If TypeScript

5. Configuration Files

ESLint Configuration

{
  "extends": ["next/core-web-vitals"],
  "rules": {
    "@next/next/no-img-element": "error",
    "@next/next/no-html-link-for-pages": "error"
  }
}

TypeScript Configuration (if applicable)

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

6. Starter Components

Root Layout

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Project Name',
  description: 'Generated with Claude Code Next.js scaffolding',
};

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

Home Page

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm">
        <h1 className="text-4xl font-bold">Welcome to Your Next.js App</h1>
        <p className="mt-4 text-lg">
          Built with Claude Code scaffolding
        </p>
      </div>
    </main>
  );
}

7. Development Scripts

Update package.json with optimized scripts:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "type-check": "tsc --noEmit",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

8. Documentation

Create comprehensive README.md with:

Project overview and features
Installation and setup instructions
Development workflow
Deployment guidelines
Contributing guidelines

Implementation Steps

1. **Initialize Project**: Create project directory and basic structure 2. **Install Dependencies**: Set up Next.js with chosen options 3. **Configure TypeScript**: Set up TypeScript if requested 4. **Setup Tailwind**: Configure Tailwind CSS if requested 5. **Create Components**: Generate starter components and layouts 6. **Setup Development Tools**: Configure ESLint, Prettier, and scripts 7. **Environment Configuration**: Create .env files and examples 8. **Generate Documentation**: Create README and setup guides

Quality Checklist

[ ] Next.js configured with App Router
[ ] TypeScript setup (if requested)
[ ] Tailwind CSS configured (if requested)
[ ] ESLint and Prettier configured
[ ] Security headers configured
[ ] Image optimization enabled
[ ] Development scripts working
[ ] Environment variables template created
[ ] README documentation complete
[ ] Project builds successfully

Post-Scaffolding Tasks

After scaffolding, run these commands to verify setup:

cd [project-name]
npm install
npm run build
npm run lint
npm run type-check  # If TypeScript

Provide

Read it on GitHub ↗

Ships withclaude-code-templates

Ready-to-use configurations for Anthropic's Claude Code. A comprehensive collection of AI agents, custom commands, settings, hooks, external integrations (MCPs), and project templates to enhance your development workflow.

Get the whole plugin

Stats

Python JavaScript Next.js PostgreSQL GraphQL

+7 tags

Azure Git GitHub Anthropic OpenAI Hugging Face MCP

30,588

Stars

3,451

Forks

Active

Maintenance

Python