Create custom page with React code in NextJS + Prismic project

Question

I'm a relative beginner with NextJS. I recently used this starter template to start my blog from. Everything works as it should (when I add an article or a page in Prismic, it gets created on my site and is visible).

My question is that I would like to add a new page to my website that is not Prismic-based. In essence, I built a small calculator tool in React, and I want to add it to my site, to make it discoverable on, e.g. www.mywebsite.com/tool. However, I don't see how that is possible with the current setup. You can see the folder structure below - when I create a new page in Prismic, it gets automatically fetched by the NextJS code with [uid]. When I add a new article, I can see in on my website because of articles/[uid]. This means that all articles have the same layout, and all non-article pages have the same layout.

But how can I create a page that shows up on my site as all the other pages (www.mywebsite.com/tool), but does not follow the regular structure?

Folder structure

I tried a bunch of things! Adding the page direcly to the app directory, etc.

Answer 1

To add a static page to a Next.js app, add a directory in the app directory named after the route. In that directory, create a page.tsx file containing the page's components and metadata.

For example, you can create a route at /tool by creating a file at app/tool/page.tsx with the following contents:

// app/tool/page.tsx

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

See the Next.js Page documentation for details how to write a page.tsx file.

To avoid conflicts with your static /tool route and your Prismic pages, do not create a Prismic page with a UID of tool.