# Onlook 启动模板

<p align="center">
  <img src="app/favicon.ico" />
</p>

这是一个使用 [Next.js](https://nextjs.org/)、[TailwindCSS](https://tailwindcss.com/) 与 [shadcn/ui](https://ui.shadcn.com) 搭建的 [Onlook](https://onlook.com/) 项目模板。

## 快速开始

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

```powershell
# npm
npm install

# yarn
yarn install

# pnpm
pnpm install

# bun
bun install
```

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

```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）

## 常用脚本

```powershell
# 开发
npm run dev

# 构建
npm run build

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

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

## 环境变量

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

```dotenv
# 示例
NEXT_PUBLIC_APP_NAME=Onlook Starter
```

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

## 部署

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

```powershell
npm run build
npm run start
```

## 许可证

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