Nextjs Prismic new build API preview build errors

Developing with Prismic
,
1

Hi, Nextjs newbie here. I have a new Nextjs app connected with Prismic (npx create-next-app@latest ). At first I could build the app (npm run build ), but after adding Prismic Slicemachine with npx @slicemachine/init@latest I get two errors regarding the build-in API preview of Prismic (see screenshots). Can anybody help me please? Thank you!

Error occurred prerendering page "/api/preview". Read more: Prerender Error | Next.js Error: Page with dynamic = "error" couldn't be rendered statically because it used request.url .

Error occurred prerendering page "/api/exit-preview". Read more: Prerender Error | Next.js Error: Page with dynamic = "error" couldn't be rendered statically because it used draftMode().disable() .

Package.json:
{
"name": "portfolio-website",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"slicemachine": "start-slicemachine"
},
"dependencies": {
"@prismicio/client": "^7.3.1",
"@prismicio/next": "^1.3.6",
"@prismicio/react": "^2.7.3",
"clsx": "^2.0.0",
"next": "13.5.4",
"react": "^18",
"react-dom": "^18",
"react-icons": "^4.11.0"
},
"devDependencies": {
"@slicemachine/adapter-next": "^0.3.20",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10",
"eslint": "^8",
"eslint-config-next": "13.5.4",
"postcss": "^8",
"slice-machine-ui": "^1.17.0",
"tailwindcss": "^3",
"typescript": "^5"
}
}

2

Hi @dannyvanderwaal, I will spin up a project really fast and see if I get the same issue. I didn't see your screenshots by the way.

3

So, I couldn't even get that far, which is not normal. I wasn't even able to create a repository:
after running

bunx @slicemachine/init@latest
or
npx @slicemachine/init@latest

Either one of these wouldn't let me create a repo. I was able to hook up to an existing one though.

:face_with_head_bandage:

 Creating new repository dannyforumtest ...
  → Failed to create repository `dannyforumtest`
Error: Failed to create repository `dannyforumtest`
    at PrismicRepositoryManager.create (/home/username/.npm/_npx/b6923b01b288b666/node_modules/@slicemachine/manager/dist/managers/prismicRepository/PrismicRepositoryManager.cjs:125:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Task.task (/home/username/.npm/_npx/b6923b01b288b666/node_modules/@slicemachine/init/dist/SliceMachineInitProcess.cjs:625:11)
4

Did you manage to fix the error? Unfortunately I haven't succeeded yet.

5

I have not been able to get past programmatically creating a new repository. I'm kind of surprised that this isn't catching more eyeballs. Could it really be just us? Although, 1.18.0 is out, maybe that fixed it?

6

That's a negative. Even after the 1.18, npx @slicemachine/init@latest does not allow me to create a new Prismic repository. Same error as yesterday.

7

I have figured out my issue for creating repositories. That's good. I then tested to see if I had any build issues. I had none. I'm unable to replicate your issue.

1 Like
8

Hey guys,

I just tested this on my side with no issue.

Can you tell me what version of node you're using?
Maybe try disabling eslint?
Can you show me the preview files code?

Thanks.

10

Hi Phil

Thank you for looking into this.

Nodejs version: 18.18.2 on a windows machine and same issue with node 18.16.0 on a Mac.

The files:
/src/app/api/exit-preview/route.ts:

import { exitPreview } from "@prismicio/next";

export function GET() {
  return exitPreview();
}

/src/app/api/preview/route.ts

import { NextRequest } from "next/server";
import { redirectToPreviewURL } from "@prismicio/next";

import { createClient } from "../../../prismicio";

export async function GET(request: NextRequest) {
  const client = createClient();

  return await redirectToPreviewURL({ client, request });
}

The rest of the code is in the node_modules.

I have tried disabling the eslint with removing the packages from the package.json and adding a .eslintignore with *, but it does not work.

11

OK, everything looks correct. The only thing I can think of is to try updating your node version.

Can you maybe send me your project zipped up so I can test on my side?

12

prismic-dannyvanderwaal.zip (269.3 KB)
Hi Phil,

I've tried updating my nodejs and building the project. Nodejs version is now v18.18.2.

Attached a zip file of my project.

Thank you again

13

Thanks @dannyvanderwaal ,

I can see this in your project now, and I can't figure out why because I'm not getting it in other Next.js projects. So, I'm reaching out to my team to get some help.

Thanks for your patience.

14

Hi @dannyvanderwaal, the error occurs because your app is configured with output: 'export' in next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    images: {
        unoptimized: true,
    }
}

module.exports = nextConfig

output: 'export' configures Next.js to build a 100% static version of your website. In this mode, Prismic previews are not supported.

The /api/preview and /api/exit-preview endpoints fail because they are not static route handlers. You can find more information about output: 'export''s limitations here: Deploying: Static Exports | Next.js

Prismic previews requires a server that can serve dynamic requests (i.e. not static). A page's content must change during a preview, which cannot be accomplished with output: 'export'.

I recommend removing output: 'export' unless you need a 100% static website. If you need output: "export" and don't need to support previews, remove the following:

  • src/app/api/preview/route.ts
  • src/app/api/exit-preview/route.ts
  • src/app/api/revalidate/route.ts
  • <PrismicPreview> in app/layout.tsx
  • enableAutoPreviews() in src/prismicio.ts

Note that even with a dynamic website (without output: 'export'), your pages will still be statically rendered if you do not use any dynamic functions or uncached fetch() requests. Prismic's recommended setup, which is included in our starters, is static by default.

You can learn more about static and dynamic rendering here: Rendering: Server Components | Next.js

1 Like