项目简介link

SaaSify 是 Metronic 出品的 Next.js + Tailwind CSS SaaS 着陆页模板，内置 Shadcn UI、ReUI、MagicUI 等组件库，支持深色模式，可快速搭建现代化的产品营销页面。

技术栈link

• 框架: Next.js 15.3.3 + React 19
• 样式: Tailwind CSS 4.x
• 组件库: Shadcn UI + Radix UI
• 动画: Framer Motion + Motion
• 表单: React Hook Form + Zod
• 图标: Lucide React

项目结构link

metronic-tailwind-nextjs-landings/saas/
├── app/                    # Next.js App Router 页面
├── pages/                  # Pages Router（API 路由）
│   └── api/hello.ts
├── public/                 # 静态资源
├── src/                    # 组件源码
├── next.config.ts
├── tailwind.config.js
├── postcss.config.mjs
├── tsconfig.json
└── package.json

核心文件说明link

• package.json — 依赖声明及 npm scripts
• next.config.ts — Next.js 配置
• tailwind.config.js — Tailwind CSS 配置
• pages/api/hello.ts — 示例 API 路由
• postcss.config.mjs — PostCSS 配置
• tsconfig.json — TypeScript 配置

快速开始link

# 安装依赖
npm install --force

# 启动开发服务器
npm run dev

# 生产构建
npm run build

# 启动生产服务器
npm run start

开发服务器运行在 http://localhost:3000。

使用建议link

该模板适合用于 SaaS 产品官网或营销落地页，基于 pages/ 目录结构（而非 App Router），可参考官方文档自定义页面路由和 API 接口。