About
This skill scaffolds a new Next.js application using the App Router and TypeScript with modern, production-ready defaults. It sets up the project structure, routing, and initial configuration for a full-stack web app with SSR and API routes. Use it to quickly bootstrap a new TypeScript web project from scratch.
Quick Install
Claude Code
Recommendednpx skills add pjt222/agent-almanac -a claude-code/plugin add https://github.com/pjt222/agent-almanacgit clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/scaffold-nextjs-appCopy and paste this command in Claude Code to install this skill
Documentation
Scaffold Next.js App
Create new Next.js w/ App Router, TS, prod-ready defaults.
Use When
- New web app project
- React frontend w/ SSR
- Full-stack w/ API routes
- TS web from scratch
In
- Required: App name
- Required: Pkg mgr (npm|yarn|pnpm)
- Optional: Tailwind (default yes)
- Optional: ESLint (default yes)
- Optional: src/ structure (default yes)
Do
Step 1: Create Project
npx create-next-app@latest my-app \
--typescript \
--tailwind \
--eslint \
--app \
--src-dir \
--import-alias "@/*"
Answer prompts or use flags non-interactive.
→ Project dir created w/ all deps installed.
If err: check Node ver (node --version, must ≥18.17). npx available. Hangs on prompts → add --use-npm (or --use-pnpm|--use-yarn).
Step 2: Verify Structure
my-app/
├── src/
│ ├── app/
│ │ ├── layout.tsx # Root layout
│ │ ├── page.tsx # Home page
│ │ ├── globals.css # Global styles
│ │ └── favicon.ico
│ └── lib/ # Shared utilities (create manually)
├── public/ # Static assets
├── next.config.ts # Next.js configuration
├── tailwind.config.ts # Tailwind configuration
├── tsconfig.json # TypeScript configuration
├── package.json
└── .eslintrc.json
→ All listed dirs+files present.
If err: src/ missing → --src-dir not passed. Re-run or move files manually → src/app/.
Step 3: Configure Next.js
Edit next.config.ts:
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
// Enable React strict mode
reactStrictMode: true,
// Image optimization domains
images: {
remotePatterns: [
{
protocol: "https",
hostname: "example.com",
},
],
},
};
export default nextConfig;
→ Saved w/o TS errs.
If err: .js instead of .ts → rename. Ensure NextConfig imported from "next".
Step 4: Dir Conventions
mkdir -p src/app/api
mkdir -p src/components
mkdir -p src/lib
mkdir -p src/types
→ All 4 dirs under src/.
If err: no src/ → create first or adjust paths (non-src layout uses app/ at root).
Step 5: Base Layout
Edit 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>
);
}
→ Layout renders w/ Inter font, wraps all pages.
If err: font fails → check net. Replace Inter w/ system fallback temp.
Step 6: Example API Route
Create src/app/api/health/route.ts:
import { NextResponse } from "next/server";
export async function GET() {
return NextResponse.json({ status: "ok", timestamp: new Date().toISOString() });
}
→ File created at path.
If err: ensure api/health/ exists. Must export named HTTP method handlers (GET, POST, etc.), not default.
Step 7: Run Dev Server
cd my-app
npm run dev
→ App at http://localhost:3000.
If err: check Node ≥18.17. Run npm install if deps missing.
Check
-
npm run devstarts w/o errs - Home page loads localhost:3000
- TS compile succeeds
- Tailwind classes applied
- API route responds /api/health
- ESLint clean (
npm run lint)
Traps
- Node ver: Needs ≥18.17. Check
node --version. - Port conflict: 3000 in use →
npm run dev -- -p 3001. - Import alias confusion:
@/*→src/*. Don't confuse w/ node_modules. - Pages vs App Router: Use App Router (
src/app/) not Pages (src/pages/).
→
setup-tailwind-typescript— detailed Tailwind + TS configdeploy-to-vercel— deploy scaffoldconfigure-git-repository— version control
GitHub Repository
Frequently asked questions
What is the scaffold-nextjs-app skill?
scaffold-nextjs-app is a Claude Skill by pjt222. Skills package instructions and resources that Claude loads on demand, so Claude can perform scaffold-nextjs-app-related tasks without extra prompting.
How do I install scaffold-nextjs-app?
Use the install commands on this page: add scaffold-nextjs-app to Claude Code as a plugin, or clone its repository into your skills directory, then restart Claude so it picks up the skill.
What category does scaffold-nextjs-app belong to?
scaffold-nextjs-app is in the Meta category, tagged react and api.
Is scaffold-nextjs-app free to use?
Yes. scaffold-nextjs-app is listed on AIMCP and free to install. It runs inside Claude, so no separate service account is required to use the skill itself.
Related Skills
This skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.
This skill enables developers to build applications with the Polymarket prediction markets platform, including API integration for trading and market data. It also provides real-time data streaming via WebSocket to monitor live trades and market activity. Use it for implementing trading strategies or creating tools that process live market updates.
This skill helps developers create OpenCode plugins that hook into 25+ event types like commands, files, and LSP operations. It provides the plugin structure, event API specifications, and implementation patterns for JavaScript/TypeScript modules. Use it when you need to intercept, monitor, or extend the OpenCode AI assistant's lifecycle with custom event-driven logic.
SGLang is a high-performance LLM serving framework that specializes in fast, structured generation for JSON, regex, and agentic workflows using its RadixAttention prefix caching. It delivers significantly faster inference, especially for tasks with repeated prefixes, making it ideal for complex, structured outputs and multi-turn conversations. Choose SGLang over alternatives like vLLM when you need constrained decoding or are building applications with extensive prefix sharing.