next-launch — Next.js 后台模板

SHA-256: af40cf9724b6d125ebbd5ebaabcdd11964e71816313ace11b38350883a491ee1

2026-10-14T13:33:03.006Z

# NextLaunch

> Launch high-converting websites instantly—no coding, no stress, just results.

![Next.js](https://img.shields.io/badge/Next.js-15.1-black?logo=nextdotjs&logoColor=white)
![React](https://img.shields.io/badge/React-19-149eca?logo=react&logoColor=white)
![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?logo=typescript&logoColor=white)
![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.4-38B2AC?logo=tailwind-css&logoColor=white)
![License](https://img.shields.io/badge/License-MIT-00b3a4)

NextLaunch is a production-ready Next.js template marketplace. It bundles premium landing-page/ui kits, a purchase flow with Razorpay, authenticated dashboards powered by Clerk, template delivery backed by Firebase, and delightful UI micro-interactions via Framer Motion. Use it as the foundation for marketplaces, theme stores, or any digital product catalog.

## Table of contents

1. [Overview](#overview)
2. [Highlights](#highlights)
3. [Architecture](#architecture)
4. [Tech stack](#tech-stack)
5. [Project structure](#project-structure)
6. [Getting started](#getting-started)
7. [Environment variables](#environment-variables)
8. [Core workflows](#core-workflows)
9. [Quality checks](#quality-checks)
10. [Deployment](#deployment)
11. [Contributing](#contributing)
12. [Security](#security)
13. [License](#license)
14. [Maintainer](#maintainer)

## Overview

- **Templates storefront** with category filters, curated sections, testimonials, FAQs, pricing comparison, and conversion-focused CTAs.
- **Authenticated dashboard** for buyers to review purchases and re-download assets.
- **Serverless API routes** for template fetching, purchase verification, secure download URLs, emails, and payment notifications.
- **Single-point customization** via `config/siteConfig.ts` so branding, navigation, hero copy, and theme settings stay centralized.

## Highlights

- 🎨 **Multi-theme UI system** powered by `next-themes`, Tailwind presets, and reusable section components.
- ⚡ **Smooth motion + scroll experiences** using Framer Motion, custom animation presets, and Lenis integration.
- 💳 **Razorpay checkout** flow with HMAC verification, download access gating, and frontend Razorpay widget support.
- 🔐 **Clerk authentication** keeps dashboards and purchase APIs secure with JWT verification helpers.
- ☁️ **Firebase (Firestore + Storage)** hosts template metadata, purchase receipts, and downloadable assets.
- 📬 **Transactional email automation** through Nodemailer + Gmail SMTP for purchase confirmations and contact replies.
- 📦 **Persistent template store** using Zustand with caching, offline fallbacks, and filter helpers.

## Architecture

```
┌────────────┐        ┌───────────────┐        ┌──────────────┐
│  Next.js   │        │  API Routes   │        │ Integrations │
│  App Dir   │  ->    │ (app/api/*)   │  ->    │  Razorpay    │
│  (UI + UX) │        │  auth, CRUD   │        │  Firebase    │
└────────────┘        └───────────────┘        │  Clerk      │
	↑                     ↓                 │  Nodemailer │
	│             Zustand Store             └──────────────┘
	└────────── Client <-> Server ─────────────────────────┘
```

Key principles:

1. **App Router + RSC** for streaming, metadata, and route groups (marketing pages live under `app/(pages)` while transactional routes live under `app/api`).
2. **Composable sections** in `sections/` feed page-level layouts, making it easy to plug templates into other projects.
3. **Data-first configuration** via `db/templates.ts` (seed data) and `config/siteConfig.ts` (content + theming) to keep UI code lean.

## Tech stack

| Layer | Tools |
| --- | --- |
| Framework | Next.js 15 (App Router) + React 19 |
| Language | TypeScript |
| Styling | Tailwind CSS, tailwind-merge, custom animation presets |
| State | Zustand with `persist` middleware |
| Auth | Clerk (publishable + secret keys) |
| Payments | Razorpay Checkout, HMAC verification |
| Data | Firebase Firestore + Storage, server-side Admin SDK |
| Email | Nodemailer + Gmail SMTP |
| UI | Lucide icons, Radix primitives, Framer Motion, Lenis |

## Project structure

```bash
next-launch/
├── app/
│   ├── (pages)/...        # Marketing pages, auth routes, dashboard routes
│   ├── api/               # Purchase, template, payment, and email endpoints
│   ├── globals.css
│   └── layout.tsx
├── components/            # UI primitives, navbar/footer, Razorpay checkout, mockups
├── sections/              # Reusable page sections (hero, pricing, testimonials, etc.)
├── store/templateStore.ts # Zustand store for templates & purchases
├── db/templates.ts        # Seed/template metadata and helper exports
├── config/siteConfig.ts   # Centralized site copy, links, feature lists, etc.
├── lib/                   # Auth helpers, Firebase Admin SDK, utilities
├── public/                # Logos, mock images, favicons, testimonial assets
├── animations/            # Shared animation variants and easing curves
├── types/                 # Shared TypeScript interfaces
├── tailwind.config.ts / postcss.config.mjs
└── package.json / tsconfig.json / eslint.config.mjs
```

## Getting started

### 1. Prerequisites

- Node.js 20+
- npm 10+ (or pnpm/yarn, adjust commands accordingly)
- Firebase project, Clerk application, Razorpay account, Gmail SMTP app password

### 2. Install dependencies

```bash
npm install
```

### 3. Configure environment

Create a `.env.local` file in the project root using the variables below. Never commit production secrets—`.gitignore` already excludes `.env*`.

### 4. Run the development server

```bash
npm run dev
```

Visit `http://localhost:3000` and sign in via Clerk to access authenticated flows.

### 5. Production build & lint

```bash
npm run build
npm run start   # serve the production build
npm run lint    # ESLint (Next.js rules)
```

## Environment variables

| Variable | Description |
| --- | --- |
| `NEXT_PUBLIC_DB_API_KEY` | Firebase web API key for client-side SDK |
| `NEXT_PUBLIC_DB_AUTH_DOMAIN` | Firebase auth domain |
| `NEXT_PUBLIC_DB_PROJECT_ID` | Firebase project ID (client) |
| `NEXT_PUBLIC_DB_STORAGE_BUCKET` | Firebase storage bucket |
| `NEXT_PUBLIC_DB_MESSAGING_SENDER_ID` | Sender ID for Firebase |
| `NEXT_PUBLIC_DB_APP_ID` | Firebase app ID |
| `NEXT_PUBLIC_DB_MEASUREMENT_ID` | Analytics measurement ID |
| `NEXT_PUBLIC_FIREBASE_PROJECT_ID` | Used for helpful Firestore index hints |
| `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` | Clerk frontend key for providers |
| `NEXT_PUBLIC_RAZORPAY_KEY_ID` | Public Razorpay key for checkout widget |
| `CLERK_SECRET_KEY` | Server-side Clerk key for token verification |
| `FIREBASE_PROJECT_ID` | Service account project ID |
| `FIREBASE_CLIENT_EMAIL` | Service account email |
| `FIREBASE_PRIVATE_KEY` | Service account private key (`\n` escaped) |
| `RAZORPAY_KEY_ID` | Server Razorpay key (order creation) |
| `RAZORPAY_KEY_SECRET` | Razorpay HMAC secret |
| `GMAIL_USER` | Gmail address used for SMTP notification emails |
| `GMAIL_PASS` | Gmail app password for SMTP |

> Tip: Provide dev-safe defaults (e.g., test Razorpay keys, test Gmail inbox) and keep production secrets in Vercel project settings.

## Core workflows

### Template catalog

1. `db/templates.ts` exposes seed data and metadata for SEO.
2. `sections/templates-showcase-section.tsx` + `components/sections/*` render cards, pricing, testimonials.
3. The Zustand store (`store/templateStore.ts`) handles caching, filtering, and local persistence.

### Purchase flow

1. Frontend calls `/api/payments/create-order` to create a Razorpay order with the secret key.
2. `components/pages/razorpay-checkout.tsx` opens the Razorpay widget with the publishable key.
3. On success, `/api/payments/verify` validates the signature and records the purchase in Firestore.
4. `/api/purchases/get|check-updates|download-url` hydrate dashboards and gated downloads.

> **Payment gateway swap:** Razorpay is the default implementation, but the flow is modular. Replace the `/app/api/payments/*` routes plus `components/pages/razorpay-checkout.tsx` with calls to your preferred provider (Stripe, PayPal, Lemon Squeezy, etc.), keeping the purchase documents and download flow unchanged.

### Notifications & support

- `/api/purchase-notify` sends transactional emails to the buyer with template/payment details.
- `/api/send-mail` powers the contact form, including validation and basic rate limiting.

### Admin controls

- Update `db/templates.ts` to add new templates or metadata.
- Curate homepage/marketing content via `config/siteConfig.ts` without touching component code.

## Quality checks

- `npm run lint` – ESLint/Next.js ruleset (recommended before commits).
- `npm run build` – ensures App Router routes, API handlers, and type checks are healthy.
- Consider adding CI (GitHub Actions) to run these commands automatically on PRs.

## Deployment

1. Push the repository to GitHub (public).
2. Create a new Vercel project → Import this repo.
3. Copy **all environment variables** from `.env.local` into Vercel → Settings → Environment Variables.
4. Add required third-party webhooks/redirects (Razorpay, Clerk) pointing to your Vercel domain.
5. Trigger a production deploy; Vercel will handle Next.js build + serverless routing.

## Contributing

1. Fork the repository & create a feature branch.
2. Run `npm run lint` locally before opening a PR.
3. Describe the motivation, screenshots (if UI), and testing steps.
4. For larger features, open an issue first so we can discuss requirements.

## Security

Please avoid opening public issues for vulnerabilities. Instead, email **[email protected]** with a detailed report. You’ll receive an acknowledgement within 48 hours and coordinated disclosure will be arranged if needed.

## License

Distributed under the [MIT License](./LICENSE). You are free to use the code in commercial and personal projects, but purchased template assets themselves may include additional licensing terms—respect your buyers.

## Maintainer

Built and maintained by [Naseem Ansari](https://github.com/gitnaseem745). Feel free to reach out on [LinkedIn](https://www.linkedin.com/in/naseem-ansari-25474b269/) or [Twitter](https://x.com/dev_Naseem) for support, collaborations, or template ideas.