Nextjs Scaffold

Commands nextjs-vercel 339 Scanned by NVIDIA SkillSpector

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

Install Command

npx claude-code-templates@latest --command nextjs-vercel/nextjs-scaffold

View on GitHub

claude-code — nextjs-scaffold

Scanned by NVIDIA SkillSpector

Automated static analysis (no LLM) · v2.12.0 · 2026-10-23

Partial analysis: some checks could not run on this component.

2 observations

scanner score 22/100

SkillSpector looks for patterns such as shell commands, credential access, network calls or unpinned dependencies. An observation is something worth reading in the files before you install, not a confirmed vulnerability. Components that run code locally, like hooks, MCP servers and security tooling, naturally show more of them.

Credential Access ×2
Privilege Escalation · nextjs-scaffold.md:79

Learn more about NVIDIA SkillSpector.

Content

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:

javascript

/** @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

json

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

TypeScript Configuration (if applicable)

json

{
  "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

typescript

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

typescript

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:

json

{
  "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

Initialize Project: Create project directory and basic structure
Install Dependencies: Set up Next.js with chosen options
Configure TypeScript: Set up TypeScript if requested
Setup Tailwind: Configure Tailwind CSS if requested
Create Components: Generate starter components and layouts
Setup Development Tools: Configure ESLint, Prettier, and scripts
Environment Configuration: Create .env files and examples
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:

bash

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

Provide specific next steps based on the project requirements and any additional features needed.

Nextjs Scaffold

Scanned by NVIDIA SkillSpector

Content

Next.js Application Scaffolding

Environment Analysis

Scaffolding Requirements

1. Project Initialization

2. Next.js Configuration

3. Essential Dependencies

4. Project Structure

5. Configuration Files

ESLint Configuration

TypeScript Configuration (if applicable)

6. Starter Components

Root Layout

Home Page

7. Development Scripts

8. Documentation

Implementation Steps

Quality Checklist

Post-Scaffolding Tasks

Stack Builder