# @fewchurs/next 中文文档

规范地址：https://npmcn.com/package/%40fewchurs/next/

版本：1\.7\.2
npm 元数据更新时间：2026-11-14T13:47:31.783Z
中文译文更新时间：2026-11-14T16:21:57.277Z
软件包许可：SEE LICENSE IN LICENSE

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fewchurs/next
原文对照：https://npmcn.com/package/%40fewchurs/next/?lang=original
项目主页：https://www.fewchurs.com/
源码仓库：https://github.com/fewchurs/fewchurs-react

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：158 kB，34 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：next \>=14，react \>=18
- 首次发布：2026-10-19T06:34:41.868Z
- 最新版本发布：2026-11-14T13:47:31.623Z
- 近 30 天下载量：1981（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 13 个）

## 中文简介

Next.js 的由服务器发送的 Dewschurs 特性请求板, API 密钥保留在服务器上 .

## 安装

```sh
npm install @fewchurs/next
```

也可以使用：`pnpm add @fewchurs/next`、`yarn add @fewchurs/next`、`bun add @fewchurs/next`

## README

# @ fewchurs/ next

Next.js App路由器的服务器功能请求板:访客提交想法,投票, 评论和跟随, 你管理所有的东西 从你的"数子"仪表板.

您的 API 密钥留在服务器上 。 董事会用真实的数据来制作 第一次油漆,投票和 评论会通过您自己的应用程序中的路由处理器,所以密钥从没有到达浏览器,也没有 需要建立中央遥感系统.

**不使用Next.js吗?** 使用 [`@fewchurs/react`](https://www.npmjs.com/package/@fewchurs/react)。 。 。 .

-   Next.js 14+ (App Router), React 18 或 19, 节点 20+ (处理器也运行在边缘运行时间)
-   框外的光和暗模式
-   完全输入

## 分为5个步骤

### 1\. 获取 API 密钥并添加您的域

在那个 [数子仪表板](https://www.fewchurs.com/)打开你的应用程序,复制 **API 密钥** (看起来像 `fr_live_…`并添加 **域名** 你的网站运行. `localhost` 总是工作 当你建造.

### 2\. 安装

```bash
npm install @fewchurs/next
# or: pnpm add @fewchurs/next
# or: yarn add @fewchurs/next
```

### 3\. 将密钥添加到 `.env.local`

```dotenv
FEWCHURS_API_KEY=fr_live_…
```

不要用前缀 `NEXT_PUBLIC_`这里只有一个服务器的秘密。 重新开始 `next dev` 你先请 编辑文件.

### 4\. 创建路由处理器

这是小代理 董事会谈话。 它在服务器上添加了你的密钥.

```ts
// app/api/fewchurs/[...route]/route.ts
export { GET, POST, DELETE } from "@fewchurs/next/handler";
```

保留文件夹名称 `[...route]` 写得一模一样.

### 5\. 董事会

```tsx
// app/feedback/page.tsx
import { FewchursBoard } from "@fewchurs/next";
import "@fewchurs/next/styles.css";

export default function Page() {
  return <FewchursBoard />;
}
```

打开 `/feedback`。您应该看到董事会的标签、表决、评论和 **新请求** 形式.

## 或者在每个页面上添加反馈按钮

`FewchursButton` 只有按钮。 点击它可以将棋盘作为工作表滑入, 没有什么是 取来至开. 把它放进你的根部布局里,这样它就到处可见. 它没有让你的页面 动态.

```tsx
// app/layout.tsx
import { FewchursButton } from "@fewchurs/next";
import "@fewchurs/next/styles.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <FewchursButton floating>Suggest a feature</FewchursButton>
      </body>
    </html>
  );
}
```

`floating` 把它钉到右下方, `floating="left"` 到左边的下方 让孩子们出去 默认的“ Feedback” 标签.

## 部署和预览 URL

软件包从每个请求中读取您的域名, 并对照您在 仪表板。 当您的站点运行于其它地址时, 如预览部署, 设置域 自己说:

```dotenv
FEWCHURS_APP_ID=yourcompany.com
```

设置还允许您从 `localhost`添加 `FEWCHURS_API_KEY` 给您的 主机提供者的环境变量.

## 自定义

**CSS 变量 :**

```css
.fewchurs {
  --fw-primary: #ed5f18;
  --fw-radius: 12px;
  --fw-font: var(--font-sans);
}
```

**道具 :**

```tsx
<FewchursBoard
  tabs={["top", "new", "roadmap"]} // default: ["top", "new"]
  defaultTab="top"
  showDeclined={false}
  allowComments
  emailField="optional"
  pageSize={20}
  theme={{ primary: "#0f766e", radius: 4 }}
  labels={{ title: "Ideas", submit: "Suggest an idea" }}
/>
```

`<FewchursBoard>` 是服务器组件,所以无法取用函数(`renderHeader`, (中文(简体) ), `renderEmpty`, (中文(简体) ), `renderFeature`, (中文(简体) ), `onEvent`) (中文(简体) ). 当您需要这些的时候,请将客户端板包起来 `@fewchurs/react` 内 你们自己 `"use client"` 文件,与 `<FewchursProvider baseUrl="/api/fewchurs">` 围绕它.

## 直接链接到一个请求

```tsx
// app/feedback/page.tsx
export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ request?: string }>;
}) {
  const { request } = await searchParams;
  return <FewchursBoard initialFeatureId={request} />;
}
```

访问 `/feedback?request=<id>` 并附上其公开的评论 服务器。 接下来的14年, `searchParams` 是一个简单的对象,而不是一个承诺.

## 已签名的用户

选票是匿名的,与 `httpOnly` 路由处理器设置在第一个 请求。 要在账户之后进行投票,请返回 a **散开** 用户 id 从两个 管理者和董事会。 从不使用原始身份或电子邮件地址.

```ts
// app/api/fewchurs/[...route]/route.ts
import { createHandler } from "@fewchurs/next/handler";

export const { GET, POST, DELETE } = createHandler({
  deviceId: async () => hash((await auth()).userId),
});
```

```tsx
<FewchursBoard deviceId={async () => hash((await auth()).userId)} />
```

## 选项

| 选项 | 在读的地方 | 默认 |
| --- | --- | --- |
| `apiKey` | `FEWCHURS_API_KEY` | 无,需要 |
| `appId` | `FEWCHURS_APP_ID` | 请求主机 |
| `apiPath` | `FEWCHURS_API_PATH` | `/api/fewchurs` |
| `baseUrl` | `FEWCHURS_BASE_URL` | 极少数人 API |

把它们当作道具 `<FewchursBoard>` 财务报告和审定财务报表 `createHandler({ … })`,或设置环境变量. 如果你挂载处理器的地方不是 `/api/fewchurs`设置 `apiPath` 两个都有.

## 解决问题

| 你瞧,你觉得呢 | 为什么,怎么办 |
| --- | --- |
| "没有建立" | `FEWCHURS_API_KEY` 缺少。 添加到 `.env.local` 并重新启动 `next dev`。 。 。 . |
| "无效 API 密钥" (401) | 钥匙错了 从仪表板上再复制一遍. |
| "无效API密钥"(403) | 域名未添加到您的应用程序中 。 信件指定要添加的域名 . |
| 票数和评论以404失败 | 路由处理器缺失, 或者没有在 `app/api/fewchurs/[...route]/route.ts`。 。 。 . |
| 董事会没有造型 | 你忘记了 `import "@fewchurs/next/styles.css"`。 。 。 . |
| 构建错误 `server-only` | `<FewchursBoard>` 已导入 a `"use client"` 文档。 从服务器组件中渲染出来 。 这是刻意的,所以一个密钥从不为浏览器捆绑. |

## 其他入境点

-   `@fewchurs/next/actions`数字 : `submitFeatureAction`, (中文(简体) ), `voteAction`, (中文(简体) ), `commentAction`, (中文(简体) ), `followAction`,用于 由平板造出.
-   `@fewchurs/next/identity`页:1 `httpOnly` 设备代号 cookie 助手.
-   `@fewchurs/next/handler`数字 : `createHandler(options)` 和现成的 `GET`, (中文(简体) ), `POST`, (中文(简体) ), `DELETE`。 。 。 .

## 再来

-   完整指南和工作示例应用程序 : [github.com/fewchurs/fewchurs-反应](https://github.com/fewchurs/fewchurs-react)
-   盘子和文件 : [www.fewchurs.com (中文(简体) )](https://www.fewchurs.com/)
-   更改日志 : [变动情况](https://github.com/fewchurs/fewchurs-react/blob/main/CHANGELOG.md)

## 许可证

专有. 您可以使用您自己的应用程序中的软件包连接到数位程序并自定义 通过所记录的道具,CSS变量,插槽和钩子. 见 [自由主义](https://npmcn.com/package/%40fewchurs/next/LICENSE)。 。 。 .

## 常见问题

### @fewchurs/next 是什么？

Next\.js 的由服务器发送的 Dewschurs 特性请求板, API 密钥保留在服务器上 \.

### 如何安装 @fewchurs/next？

在项目目录运行 npm install @fewchurs/next，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：next（\>=14）、react（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fewchurs/next 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fewchurs/next 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @fewchurs/next 可以商用吗？

@fewchurs/next 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @fewchurs/next 的下载量有多少？

根据 npm 官方下载统计，@fewchurs/next 在 2026/10/15 – 2026/11/13 这 30 天内被下载 1,981 次，日均约 66 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fewchurs/next 还在维护吗？

最新版本 1\.7\.2 发布于 2026/11/14（今天）；至今共发布 13 个版本，其中过去 12 个月发布了 13 个；首次发布于 2026/10/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。