@ fewchurs/ next
Next.js App路由器的服务器功能请求板:访客提交想法,投票, 评论和跟随, 你管理所有的东西 从你的"数子"仪表板.
您的 API 密钥留在服务器上 。 董事会用真实的数据来制作 第一次油漆,投票和 评论会通过您自己的应用程序中的路由处理器,所以密钥从没有到达浏览器,也没有 需要建立中央遥感系统.
不使用Next.js吗? 使用 @fewchurs/react。 。 。 .
- Next.js 14+ (App Router), React 18 或 19, 节点 20+ (处理器也运行在边缘运行时间)
- 框外的光和暗模式
- 完全输入
分为5个步骤
1. 获取 API 密钥并添加您的域
在那个 数子仪表板打开你的应用程序,复制 API 密钥 (看起来像
fr_live_…并添加 域名 你的网站运行. localhost 总是工作 当你建造.
2. 安装
npm install @fewchurs/next
# or: pnpm add @fewchurs/next
# or: yarn add @fewchurs/next
3. 将密钥添加到 .env.local
FEWCHURS_API_KEY=fr_live_…
不要用前缀 NEXT_PUBLIC_这里只有一个服务器的秘密。 重新开始 next dev 你先请
编辑文件.
4. 创建路由处理器
这是小代理 董事会谈话。 它在服务器上添加了你的密钥.
// app/api/fewchurs/[...route]/route.ts
export { GET, POST, DELETE } from "@fewchurs/next/handler";
保留文件夹名称 [...route] 写得一模一样.
5. 董事会
// app/feedback/page.tsx
import { FewchursBoard } from "@fewchurs/next";
import "@fewchurs/next/styles.css";
export default function Page() {
return <FewchursBoard />;
}
打开 /feedback。您应该看到董事会的标签、表决、评论和 新请求 形式.
或者在每个页面上添加反馈按钮
FewchursButton 只有按钮。 点击它可以将棋盘作为工作表滑入, 没有什么是
取来至开. 把它放进你的根部布局里,这样它就到处可见. 它没有让你的页面
动态.
// 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
软件包从每个请求中读取您的域名, 并对照您在 仪表板。 当您的站点运行于其它地址时, 如预览部署, 设置域 自己说:
FEWCHURS_APP_ID=yourcompany.com
设置还允许您从 localhost添加 FEWCHURS_API_KEY 给您的
主机提供者的环境变量.
自定义
CSS 变量 :
.fewchurs {
--fw-primary: #ed5f18;
--fw-radius: 12px;
--fw-font: var(--font-sans);
}
道具 :
<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"> 围绕它.
直接链接到一个请求
// 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 从两个
管理者和董事会。 从不使用原始身份或电子邮件地址.
// app/api/fewchurs/[...route]/route.ts
import { createHandler } from "@fewchurs/next/handler";
export const { GET, POST, DELETE } = createHandler({
deviceId: async () => hash((await auth()).userId),
});
<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页:1httpOnly设备代号 cookie 助手.@fewchurs/next/handler数字 :createHandler(options)和现成的GET, (中文(简体) ),POST, (中文(简体) ),DELETE。 。 。 .
再来
- 完整指南和工作示例应用程序 : github.com/fewchurs/fewchurs-反应
- 盘子和文件 : www.fewchurs.com (中文(简体) )
- 更改日志 : 变动情况
许可证
专有. 您可以使用您自己的应用程序中的软件包连接到数位程序并自定义 通过所记录的道具,CSS变量,插槽和钩子. 见 自由主义。 。 。 .