A modern, production-ready Next.js 16.1.6 boilerplate with React 19, TypeScript 5.7.2, and Tailwind CSS 3.4. Built with best practices, accessibility, and developer experience in mind.
Perfect for bootstrapping your next web application quickly without sacrificing quality.
- ⚡ Next.js 16.1.6 - App Router with Turbopack, Server Actions, and the
use cachedirective - ⚛️ React 19 - Concurrent rendering, Compiler optimizations, and Server Actions
- 📘 TypeScript 5.7.2 - Strict mode with advanced generics and utility types
- 🎨 Tailwind CSS - Utility-first CSS with custom configuration
- ♿ Accessible - WCAG 2.2 AA compliant out of the box
- 🏗️ Well-Structured - Organized folder structure with clear separation of concerns
- 📦 pnpm - Fast, disk space efficient package manager
- 🔧 ESLint 9 - Code quality, linting, and modern flat config
- 🎯 Production-Ready - Error boundaries, loading states, and 404 pages included
- Node.js 18.0 or higher
- pnpm 9.0.0 or higher (recommended) or npm/yarn
- Clone or use as template:
git clone https://github.com/yourusername/buzz-stack.git my-app
cd my-app- Install dependencies:
pnpm install- Run development server:
pnpm dev- Open your browser: Visit http://localhost:3000
pnpm build # Build for production
pnpm start # Start production server
pnpm lint # Run ESLintbuzz-stack/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Home page
│ ├── error.tsx # Error boundary
│ ├── loading.tsx # Loading UI
│ ├── not-found.tsx # 404 page
│ └── globals.css # Global styles
├── components/ # Reusable React components
│ ├── Header.tsx
│ └── GitHubLink.tsx
├── hooks/ # Custom React hooks
│ └── useModal.ts # Example modal hook
├── lib/ # External API clients and integrations
├── services/ # Business logic and orchestration
├── utils/ # Pure utility functions
├── types/ # TypeScript type definitions
├── constants/ # App-wide constants
├── contexts/ # React Context providers
├── middleware/ # Next.js middleware
├── public/ # Static assets
└── docs/ # Documentation
/app- Next.js 16 App Router pages, layouts, and special files/components- Reusable UI components with props interfaces/hooks- Custom React hooks for stateful logic/lib- Third-party integrations and API clients/services- Business logic layer with caching and orchestration/utils- Pure functions and helpers/types- Shared TypeScript interfaces and types/constants- Configuration and constant values/contexts- React Context for global state/middleware- Next.js Edge middleware/public- Static files served from root
Edit the header in components/Header.tsx:
<Header title="Your App Name" subtitle="Your tagline" emoji="🚀" />Edit metadata in app/layout.tsx:
export const metadata: Metadata = {
title: "Your App Name",
description: "Your app description",
// ... other metadata
};Update components/GitHubLink.tsx or pass props:
<GitHubLink
repoUrl="https://github.com/yourusername/yourrepo"
label="View on GitHub"
/>- Tailwind Config: Edit
tailwind.config.tsfor theme customization - Global Styles: Add CSS to
app/globals.css - Gradient Background: Modify gradient in
app/page.tsx
- AGENTS.md - Architecture, code style, and best practices (AI-friendly format)
- CONTRIBUTING.md - Contribution guidelines
- docs/ - Comprehensive documentation
- Architecture patterns
- Code structure guide
- Development best practices
- Next.js and Vercel features
This project follows the Agentic AI Foundation standard:
- AGENTS.md - Main instructions for AI agents
- .github/copilot-instructions.md - GitHub Copilot specific guidance
- Directory-specific
AGENTS.mdfiles for focused context
UI Layer (Components)
↓
React Integration (Hooks)
↓
Business Logic (Services)
↓
External APIs (Lib)
- Server Components by default - Use
'use client'only when needed - Type Safety - Strict TypeScript with explicit types
- Accessibility First - Semantic HTML, ARIA attributes, keyboard navigation
- Performance - Code splitting, lazy loading, optimized images
- Separation of Concerns - Clear boundaries between layers
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 16.1.6 | React framework with App Router, Turbopack, and Server Actions |
| React | 19.2.4 | UI library with concurrent rendering and compiler optimizations |
| TypeScript | 5.7.2 | Type-safe JavaScript with strict mode and advanced generics |
| Tailwind CSS | 3.4.0 | Utility-first CSS framework with full configuration |
| pnpm | 9.0.0 | Fast, disk-efficient package manager |
| ESLint | 9 | Code quality linting with flat config |
- ✅ App Router with layouts
- ✅ Server Components by default
- ✅ Error boundaries (
error.tsx) - ✅ Loading states (
loading.tsx) - ✅ 404 page (
not-found.tsx) - ✅ Metadata API for SEO
- ✅ Viewport configuration
- ✅ Responsive design (mobile-first)
- ✅ Keyboard navigation
- ✅ Screen reader support
- ✅ Focus indicators
- ✅ Skip to main content link
- ✅ Beautiful gradient background
- ✅ Glassmorphism effects
- ✅ TypeScript strict mode
- ✅ ESLint configuration
- ✅ Clear project structure
- ✅ Example components and hooks
- ✅ Comprehensive documentation
- ✅ AI-friendly AGENTS.md files
Edit app/page.tsx to create your landing page or dashboard.
Create reusable components in /components:
// components/Button.tsx
interface ButtonProps {
label: string;
onClick: () => void;
}
export default function Button({ label, onClick }: ButtonProps) {
return (
<button
onClick={onClick}
className="px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded"
>
{label}
</button>
);
}Create new pages by adding files to /app:
app/
├── page.tsx # Home page (/)
├── about/
│ └── page.tsx # About page (/about)
└── dashboard/
└── page.tsx # Dashboard page (/dashboard)
- API Clients (
/lib) - External API integrations - Services (
/services) - Business logic with caching - Hooks (
/hooks) - React state management - Utils (
/utils) - Pure helper functions
Contributions are welcome! Please read CONTRIBUTING.md for guidelines.
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with Next.js
- Styled with Tailwind CSS
- Icons from emoji unicode
- Inspired by modern web development best practices
- 📖 Read the documentation
- 🐛 Open an issue
- 💬 Start a discussion
Happy coding! ⚡ Start building amazing things with Buzz Stack.