NextJS+Prismic项目添加非Prismic驱动的自定义React页面

步骤1：创建正确的目录结构 #

在项目根目录的app文件夹下，直接新建tool子文件夹，然后在该文件夹内创建page.js（或page.tsx，若使用TypeScript）文件。Next.js App Router会自动将这个结构映射为/tool访问路径，且静态路由优先级高于[uid]动态路由，不会和Prismic的自动路由冲突。

步骤2：编写计算器页面代码 #

在app/tool/page.js中写入你的计算器组件逻辑，示例如下：

export default function CalculatorPage() {
  return (
    <div className="p-8 max-w-2xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">自定义计算器</h1>
      {/* 这里编写计算器的UI和交互逻辑 */}
      <div className="flex gap-4 mb-4">
        <input type="number" placeholder="数字1" className="border p-2 flex-1" />
        <input type="number" placeholder="数字2" className="border p-2 flex-1" />
      </div>
      <button className="bg-blue-500 text-white px-4 py-2 rounded">计算求和</button>
    </div>
  );
}

步骤3：排查常见失败原因 #

如果之前添加未成功，大概率是以下问题：

• 文件名错误：必须命名为page.js/page.tsx，不能用index.js或其他名称
• 目录位置错误：tool文件夹需直接放在app根目录下，不能嵌套在[uid]等其他路由文件夹内
• 缓存干扰：重启Next.js开发服务器，清除浏览器缓存后再测试访问

步骤4：（可选）复用博客公共布局 #

默认情况下，app/layout.js的根布局会自动应用到所有页面，你的计算器页面会自动继承博客的头部导航、页脚等公共组件。如果需要单独定制布局，可在tool文件夹内创建layout.js文件自定义布局规则。

内容的提问来源于stack exchange，提问作者Sam Lafontaine