A production-ready Next.js template with TypeScript, Tailwind CSS, and best practices built-in. Perfect for building modern web applications quickly and efficiently.

• Next.js 15 - Latest version with App Router
• TypeScript - Type-safe development experience
• Tailwind CSS v4 - Utility-first CSS framework
• Dark Mode - Built-in dark mode support with system preference detection
• Responsive Design - Mobile-first, fully responsive components
• SEO Optimized - Meta tags, Open Graph, and structured data ready
• Performance - Optimized for Core Web Vitals
• Developer Experience - Fast Refresh, ESLint, Prettier pre-configured
• Production Ready - Best practices and scalable architecture

• Node.js 18.17 or later
• pnpm, npm, yarn, or bun package manager

1. Use this template (recommended):

   # Click "Use this template" button on GitHub
   # Or clone directly
   git clone https://github.com/yourusername/your-repo-name.git
   cd your-repo-name

2. Install dependencies:

   pnpm install
   # or
   npm install
   # or
   yarn install

3. Run the development server:

   pnpm dev
   # or
   npm run dev
   # or
   yarn dev

4. Open your browser: Navigate to http://localhost:3000

my-next-app/
├── app/                  # App Router directory
│   ├── api/             # API routes
│   │   └── hello/       # Example API endpoint
│   ├── error.tsx        # Error boundary
│   ├── global-error.tsx # Root error boundary
│   ├── layout.tsx       # Root layout
│   ├── loading.tsx      # Loading state
│   ├── not-found.tsx    # 404 page
│   ├── page.tsx         # Home page
│   ├── robots.txt       # SEO robots file
│   ├── sitemap.ts       # Dynamic sitemap
│   └── globals.css      # Global styles
├── components/          # React components
│   ├── layout/         # Layout components
│   │   ├── header.tsx  # Site header with navigation
│   │   └── footer.tsx  # Site footer
│   └── ui/             # UI components
│       ├── button.tsx  # Button component
│       ├── card.tsx    # Card component
│       ├── input.tsx   # Input component
│       └── skeleton.tsx # Skeleton loaders
├── hooks/               # Custom React hooks
│   ├── use-debounce.ts # Debounce hook
│   ├── use-local-storage.ts # LocalStorage hook
│   └── use-media-query.ts # Media query hook
├── utils/               # Utility functions
│   ├── cn.ts           # Class name merger
│   └── format.ts       # Formatting utilities
├── types/               # TypeScript definitions
│   └── global.d.ts     # Global type definitions
├── public/              # Static assets
├── .github/             # GitHub templates
│   ├── workflows/      # GitHub Actions
│   └── ISSUE_TEMPLATE/ # Issue templates
├── .vscode/             # VS Code configuration
├── middleware.ts        # Next.js middleware
├── CLAUDE.md            # AI assistant guidelines
├── LICENSE              # MIT license
└── ...config files      # Various configuration files

Note: The template supports Next.js routing conventions including route groups (auth), dynamic routes [id], and catch-all routes [...slug].

Edit app/layout.tsx to update your site's metadata:

export const metadata: Metadata = {
  title: "Your Site Title",
  description: "Your site description",
};

Update the CSS variables in app/globals.css:

:root {
  --background: #ffffff;
  --foreground: #171717;
}

Customize your design system in tailwind.config.js (if using Tailwind v3) or through CSS variables.

Create a .env.local file for your environment variables:

NEXT_PUBLIC_API_URL=your_api_url
DATABASE_URL=your_database_url

• Button - Versatile button with multiple variants (primary, secondary, outline, ghost, danger)
• Card - Container component with header, content, and footer sections
• Input - Form input with label, error, and helper text support
• Skeleton - Loading placeholders with multiple variants (text, circular, rectangular)

• Header - Responsive navigation header with mobile menu
• Footer - Full-featured footer with newsletter signup

import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>Welcome</CardTitle>
  </CardHeader>
  <CardContent>
    <Button variant="primary" size="lg">Get Started</Button>
  </CardContent>
</Card>

• useLocalStorage - Persist state to localStorage with SSR safety
• useMediaQuery - Responsive design with media query support
• useDebounce - Debounce values for optimized performance

import { useLocalStorage } from "@/hooks/use-local-storage";
import { useMediaQuery } from "@/hooks/use-media-query";
import { useDebounce } from "@/hooks/use-debounce";

function MyComponent() {
  const [theme, setTheme] = useLocalStorage("theme", "light");
  const isMobile = useMediaQuery("(max-width: 640px)");
  const debouncedSearch = useDebounce(searchTerm, 500);
}

The template includes middleware with:

• Security headers (X-Frame-Options, CSP, etc.)
• Maintenance mode support
• Authentication examples (commented)
• Geolocation routing examples
• A/B testing setup

• pnpm dev - Start development server with Turbopack
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Run ESLint
• pnpm typecheck - Run TypeScript type checking

• Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS v4
• State Management: Zustand (installed, ready to use)
• Linting: ESLint
• Formatting: Prettier

The easiest way to deploy your Next.js app:

1. Push your code to GitHub
2. Import your repository in Vercel
3. Deploy with zero configuration

• Netlify: Deploy to Netlify
• AWS Amplify: Deploy to AWS
• Railway: Deploy to Railway
• Docker: Dockerfile can be added for containerized deployments

• Keep components small and focused
• Use TypeScript interfaces for props
• Implement proper error boundaries
• Follow the Next.js file-based routing conventions

• Use Next.js Image component for optimized images
• Implement lazy loading for heavy components
• Utilize Next.js font optimization

• Use semantic HTML elements
• Implement proper meta tags
• Add structured data for rich snippets
• Create a sitemap.xml and robots.txt

• Validate all user inputs
• Use environment variables for sensitive data
• Implement proper CORS policies
• Keep dependencies updated

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes using conventional commits with emojis (see CLAUDE.md for format)
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Note: Please refer to CLAUDE.md for coding standards and commit conventions.

This project is licensed under the MIT License - see the LICENSE file for details.

• Built with Next.js
• Styled with Tailwind CSS
• Deployed on Vercel

To learn more about the technologies used in this template:

• Next.js Documentation - learn about Next.js features and API
• Learn Next.js - an interactive Next.js tutorial
• Tailwind CSS Documentation - learn about Tailwind CSS
• TypeScript Documentation - learn TypeScript

For support, please open an issue in the GitHub repository or reach out to the community.

Built with ❤️ using Next.js