boilerplate:
- name: scaffold-nextjs-app
targetFolder: apps
description: |-
A minimal Next.js 15 starter template with App Router, TypeScript, and Tailwind CSS 4. Clean and simple foundation for building modern web applications.
Perfect for quick prototypes, new projects, or learning Next.js 15 features without the complexity of authentication, databases, or monitoring tools.
Includes essential developer tools: TypeScript with strict mode, Tailwind CSS for styling, ESLint for code quality, and a clean App Router structure.
variables_schema:
type: object
properties:
appName:
type: string
description: Name of the Next.js application (kebab-case)
description:
type: string
description: Short description of the application
default: A Next.js application
required:
- appName
additionalProperties: false
includes:
- package.json
- tsconfig.json
- next.config.ts
- tailwind.config.ts
- postcss.config.mjs
- .gitignore
- .env.local
- README.md
- src/app/layout.tsx
- src/app/page.tsx
- src/app/globals.css
- public/.gitkeep
instruction: |-
Minimal Next.js 15 application template with App Router, TypeScript, and Tailwind CSS.
File purposes:
- package.json: NPM configuration with Next.js 15, React 19, and Tailwind CSS 4
- next.config.ts: Next.js configuration
- tailwind.config.ts: Tailwind CSS configuration
- tsconfig.json: TypeScript configuration with path aliases (@/)
- src/app/layout.tsx: Root layout component
- src/app/page.tsx: Home page component
- src/app/globals.css: Global styles with Tailwind directives
How to use the scaffolded code:
1. Install dependencies: npm install
2. Start dev server: npm run dev
3. Add new pages: Create files in src/app/
4. Style with Tailwind: Use utility classes in components
5. Build for production: npm run build
Design patterns to follow:
- Server Components: Use Server Components by default, add 'use client' only when needed
- File-based Routing: Create pages by adding files to src/app/
- Layouts: Use layout.tsx for shared UI across routes
- Type Safety: Leverage TypeScript for better development experience
features:
- name: scaffold-route
description: Generate a new route (page) for Next.js 15 App Router with TypeScript and SEO metadata. Creates a simple page.tsx file using the Server Component pattern. Perfect for quickly adding new pages to your Next.js application.
variables_schema:
type: object
properties:
routePath:
type: string
description: Route path relative to app directory (e.g., 'about', 'blog/post')
pageTitle:
type: string
description: Page title for metadata
pageDescription:
type: string
description: Page description for metadata
default: ''
required:
- routePath
- pageTitle
additionalProperties: false
includes:
- src/app/_page.tsx->src/app/{{ routePath }}/page.tsx
instruction: |-
Next.js routes use file-system based routing. Pages are placed in src/app/{path}/page.tsx.
File organization: Place page.tsx in src/app/{your-route}/ to create a new route.
Naming conventions: Always name the file page.tsx. Component name should be PascalCase.
Usage guidelines: Export metadata for SEO. Use async Server Components by default. Add 'use client' only when needed.
Design patterns: Server Components by default, static metadata export for SEO, file-based routing.
patterns:
- src/app/**/page.tsx
