# Next.js
> 在 Next.js 的 App Router 或 Pages Router 中接入 React 颜色选择器，含样式表导入、use client 规则和页面示例。
Source: https://chroma-panel.jscrate.dev/zh/react/frameworks/next-js
Last updated: 2026-09-21
安装 chroma-panel，导入一次样式表，就可以在 Next.js 的任意一种路由中渲染它。服务端组件可以直接导入选择器。只有当你自己的组件用到状态或传入事件处理函数时，才需要加 `"use client"`。
## 安装
```bash
npm install chroma-panel
```
不需要再装其他包。`dependencies` 是空的，`react` 和 `react-dom` 是 peer 依赖，所以用的就是你应用里已有的那一份。
## 样式表
面板在 effect 中注入自己的样式表。这意味着在水合完成之前，服务端渲染出的标记是没有样式的。要避免这种闪烁，可以自己导入样式表，并关闭自动注入：
```tsx
```
导入写在哪里取决于你用的路由，下面各节分别给出了写法。`injectStyles={false}` 只是不再写入 `