CODEWITHSUNDEEP
reactjsnext.jsprismic
Sam Lafontaine
Sam Lafontaine

Reputation: 1

Create custom page with React code in NextJS + Prismic project

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.

Upvotes: -1

Views: 226

Answers (2)

Herma
Herma

Reputation: 53

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.

I presume those are the default page types provided by the template. To extend its functionality, you'll need to create your own page type.

The app/[uid] folder meanning it's a reusable page type of prismic. If you want a page with a different structure, you should create a 'single page type' in the Prismic Slice Machine. Then, create a folder with your page's name and add a 'page.tsx' file to your local folder.

APP
 - [uid] // reusable page, blog post page 
 - PageName // a single page type
    - page.tsx

Upvotes: 1

Angelo Ashmore
Angelo Ashmore

Reputation: 391

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.

Upvotes: 0

Related Questions