在NextJS + Prismic项目中使用React代码创建定制页面

rqcrx0a6 于 12个月前发布在 React

关注(0)|答案(1)|浏览(104)

我是一个NextJS的相对初学者。我最近使用this starter template来启动我的博客。一切都正常工作（当我在Prismic中添加一篇文章或页面时，它会在我的网站上创建并可见）。
我的问题是，我想在我的网站上添加一个新页面，而不是基于Prismic的。本质上，我在React中构建了一个小型计算器工具，我想将其添加到我的网站上，使其在www.mywebsite.com/tool上可扩展。然而，我不知道如何在当前设置下实现这一点。你可以看到下面的文件夹结构-当我在Prismic中创建新页面时，它会被NextJS代码自动获取[uid]。当我添加新文章时，我可以在我的网站上看到，因为articles/[uid]。这意味着所有文章都有相同的布局，所有非文章页面都有相同的布局。
但是，我如何创建一个页面，显示在我的网站上的所有其他页面（www.mywebsite.com/tool），但不遵循常规结构？
Folder structure的
我尝试了一堆东西！直接添加页面到应用程序目录，等等。

next.js

来源：https://stackoverflow.com/questions/77671080/create-custom-page-with-react-code-in-nextjs-prismic-project

1条答案

按热度按时间

wwtsj6pe1#

要向Next.js应用添加静态页面，请在app目录中添加一个以路由命名的目录。在该目录中，创建一个包含页面组件和元数据的page.tsx文件。
例如，您可以通过在app/tool/page.tsx上创建一个包含以下内容的文件来在/tool上创建路由：

// app/tool/page.tsx

export default function Page() {
  return <div>My tool page</div>
}

字符串
有关如何编写page.tsx文件的详细信息，请参阅Next.js Page文档。
为了避免与静态/tool路由和Prismic页面发生冲突，请不要创建UID为tool的Prismic页面。

赞(0）回复(0）举报 12个月前

我来回答

在NextJS + Prismic项目中使用React代码创建定制页面

1条答案

相关问题

热门标签

最新问答