Prismic Next.JS hosted on Firebase

I have an existing website that is just static html pages. I want to add a blog to this and thought to take the opportunity to also implement Prismic. Currently, the site is hosted through Firebase. I have been searching online to see if this is a valid approach before I start down this path. e.g. I want to convert my site to a Prismic Next.js app and host it through Firebase. Currently, the site is just a page to describe a book and point users to order the book through Amazon. Going forward, I want to add a blog component to the site. Appreciate any words of advice or direction.

Thanks!

Hello @pearlsofwisdomstorie, welcome to the forum!

We don't have a guide for hosting in Firebase but you can check out their official docs to learn how to do it.

Also, here's our Next.js docs with everything you need to kickstart your project. If you're already familiar with React it should be straightforward to migrate your static HTML site to Next.js.

thank you @Pau - I have my current site hosted using Firebase. Typically though with Firebase, you specify a "public" folder. In the case of my Next.JS Prismic app, there is no "public" folder. The html pages are in /.next/server/pages/en-us folder but seems strange to specify this as the "public" folder for the firebase settings.

I added next export to package.json to get an export of static html files. However, when I go to npm run build. I get below error. I have installed node-fetch. And then added
import fetch from "node-fetch"; to prismicio.js and then in the same updated createClient to:

export const createClient = (config = {}) => {
const client = prismic.createClient(sm.apiEndpoint, {
fetch,
routes: [
{ type: "page", path: "/:uid" },
{ type: "settings", path: "/" },
{ type: "navigation", path: "/" },
],
});

but still getting same error. Below is the error:

PrismicError: A valid fetch implementation was not provided. In environments where fetch is not available (including Node.js), a fetch implementation must be provided via a polyfill or the fetch option.
at new Client (C:\temp\MeCoding\FireBase\Prismic\pows\node_modules@prismicio\client\dist\index.cjs:280:13)
at Object.createClient (C:\temp\MeCoding\FireBase\Prismic\pows\node_modules@prismicio\client\dist\index.cjs:252:61)
at nextConfig (C:\temp\MeCoding\FireBase\Prismic\pows\next.config.js:7:26)
at Object.normalizeConfig (C:\temp\MeCoding\FireBase\Prismic\pows\node_modules\next\dist\server\config-shared.js:109:18)
at Object.loadConfig [as default] (C:\temp\MeCoding\FireBase\Prismic\pows\node_modules\next\dist\server\config.js:74:53)
at async Span.traceAsyncFn (C:\temp\MeCoding\FireBase\Prismic\pows\node_modules\next\dist\trace\trace.js:79:20)
at async C:\temp\MeCoding\FireBase\Prismic\pows\node_modules\next\dist\export\index.js:36:45
at async Span.traceAsyncFn (C:\temp\MeCoding\FireBase\Prismic\pows\node_modules\next\dist\trace\trace.js:79:20) {
url: undefined,
response: undefined
}

Can you show me an example of how you added Next to the static html files, how are you rendering components?