Onlook 启动模板

这是一个使用 Next.js、TailwindCSS 与 shadcn/ui 搭建的 Onlook 项目模板。

快速开始

1. 安装依赖（PowerShell 示例，四选一）：

# npm
npm install

# yarn
yarn install

# pnpm
pnpm install

# bun
bun install

2. 启动开发服务器（PowerShell）：

# npm
npm run dev

# yarn
yarn dev

# pnpm
pnpm dev

# bun
bun dev

打开后在 Onlook 中查看：http://localhost:3000

目录结构（节选）

• app/：Next.js App Router 页面与布局
• components/：通用组件
• hooks/：自定义 Hooks
• lib/：工具与内容数据
• public/：静态资源
• app/globals.css：全局样式（TailwindCSS）

常用脚本

# 开发
npm run dev

# 构建
npm run build

# 预览（如有 start 脚本）
npm run start

使用 yarn/pnpm/bun 时，将 npm run XXX 替换为对应命令即可。

环境变量

在项目根目录创建 .env.local，示例：

# 示例
NEXT_PUBLIC_APP_NAME=Onlook Starter

Next.js 会在运行时自动加载 .env.local。请勿将敏感变量提交到版本库。

部署

• 推荐：Vercel（零配置支持 Next.js）。
• 自托管：

npm run build
npm run start

许可证

本模板遵循其依赖库的各自许可证。根据你的项目需要添加 LICENSE 文件。