Create SyntaxilitY Next App

A Next.js-powered starter CLI for rapidly bootstrapping scalable, production-grade SaaS or AI-based applications with best-in-class tooling, clean architecture, and prebuilt integrations.

Initialize a full-stack Next.js application with authentication, theming, ORM, UI components, state management, and API utilities — all preconfigured out of the box.

Quick Start

Create a new project in seconds using NPX:

npx create-syntaxility-next-app@latest my-app

Then enter your project folder:

cd my-app
npm install
npm run dev

Your application will be live at http://localhost:3000

What You Get

A complete SyntaxilitY Starter UI Kit built on modern, scalable architecture. Ideal for startups, SaaS products, AI dashboards, admin panels, and experimental platforms.

Core Features

| Feature | Description | | ------------------------------------ | ------------------------------------------------------------------------- | | Next.js 14+ App Router | Uses the latest App Router for layouts, streaming, and optimized routing. | | Clerk Authentication | Ready-to-use auth with email, OAuth, and SSO. | | Dark/Light Theme | Persistent theming using Skiper UI system. | | HeroUI Components | Prebuilt, minimal, and responsive component library. | | Tailwind CSS | Utility-first styling with extendable design tokens. | | Prisma ORM | Database models ready for PostgreSQL, easily adaptable for other DBs. | | Zustand Store | Lightweight global state management with TypeScript safety. | | Environment Management | .env preconfigured for API keys and secret variables. | | Middleware + Proxy | Route protection and server-side communication proxy setup. | | API Response & Provider Handlers | Unified data fetching and response normalization. |

Tech Stack

• Next.js 14+ / React 18
• TypeScript
• Tailwind CSS
• Clerk Authentication
• HeroUI + Skiper UI
• Zustand State Management
• Prisma ORM (PostgreSQL default)

Project Structure

my-app/
│
├─ prisma/
│   └─ schema.prisma             # Prisma schema definition
│
├─ src/
│   ├─ app/                      # App Router pages, layouts, and routes
│   ├─ components/               # Reusable UI components
│   ├─ constants/                # Global constants
│   ├─ databaseConnection/       # Database connection logic
│   ├─ generated/                # Auto-generated Prisma client
│   ├─ library/                  # Utility and helper functions
│   ├─ provider/                 # App-level providers (theme, auth, etc.)
│   ├─ store/                    # Zustand global store
│   ├─ types/                    # TypeScript types and interfaces
│   ├─ utils/                    # Shared utilities
│   └─ middleware.ts             # Middleware configuration
│
└─ package.json

Environment Configuration

Copy the example environment file and update your credentials:

cp .env.example .env

Then edit .env:

DATABASE_URL="postgresql://user:password@localhost:5432/mydb"
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_key
CLERK_SECRET_KEY=your_secret_key

Extending the Starter

You can easily extend or customize the starter kit by:

• Adding AI API routes under /api/ai
• Integrating OpenAI / HuggingFace APIs
• Adding new UI components under src/components
• Creating new Zustand stores in src/store
• Configuring middleware-based role protection

License

This project is licensed under the MIT License.

Author

Tariq Mehmood Senior Full Stack Engineer | AI Engineer | Founder, SyntaxilitY GitHub • LinkedIn