# Page using Predicates working on dev, not prod

**URL:** <https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862>\
**Category:** Developing with Prismic\
**Tags:** nextjs\
**Created:** [April 7, 2021, 4:25pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862 "2021-04-07T16:25:37Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![djiit](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/djiit/32/2029_2.png) [@djiit](https://community.prismic.io/u/djiit)\
**Post date:** [April 7, 2021, 4:25pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/1 "2021-04-07T16:25:37Z")

</div>

Hey guys,

I hope everybody's safe.

I'm playing with Prismic on a small project before going full production and I'm hitting a wall 😅 .  
I started from a mix between the NextJS Blog and the NextJS i18n example. Locally using `yarn dev` and or `yarn build && yarn start`, everything works like a breeze.

But when I send everything on Vercel:

- any client-side routing to, say, my "blog" page, will fail with a `An unexpected error has occurred.` message.
- any server-side routing (page refreshing, direct link) will display a mostly-empty page (just my Layout, and nothing inside it).

Did I missed something obvious? Any help is appreciated. Thanks

EDIT: more debug infos :

- I'm able to query my data usingthe API Browser as described in [The Rest API Browser - Prismic](https://prismic.io/docs/technologies/the-rest-api-browser)

---

<div class="post-metadata">

**Author:** ![djiit](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/djiit/32/2029_2.png) [@djiit](https://community.prismic.io/u/djiit)\
**Post date:** [April 7, 2021, 4:44pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/2 "2021-04-07T16:44:33Z")

</div>

I added some logs here and there... It seems my `posts` params I pass to my Page component is `undefined`... What could cause this and what would be the best way to debug this? I'll try to add some try/catch around my prismic call.

EDIT: the try/catch did not catch anything ☹

---

<div class="post-metadata">

**Author:** ![djiit](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/djiit/32/2029_2.png) [@djiit](https://community.prismic.io/u/djiit)\
**Post date:** [April 8, 2021, 11:55am UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/3 "2021-04-08T11:55:27Z")

</div>

After some more tests, it appears it's related to the fact that I had a dynamic, statically generated page at the same level. I'm not sure if it's related to NextJS or Prismic.

Here is the faulty structure :

- pages
  - \_app.js
  - [uid].js
  - mypage.js

Here, mypage.js is not rendered correctly. If I switch to SSR, it works.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [April 12, 2021, 3:16pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/5 "2021-04-12T15:16:33Z")

</div>

Hi @djiit,

Welcome to the community!

I'm sorry about the delay in the reply to this. Let's debug this together 🙂

Have you set your build command to `npm run export` on Vercel?

Thanks.

---

<div class="post-metadata">

**Author:** ![djiit](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/djiit/32/2029_2.png) [@djiit](https://community.prismic.io/u/djiit)\
**Post date:** [April 12, 2021, 3:37pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/6 "2021-04-12T15:37:22Z")

</div>

Hi @Phil,

Nope, I'm using the default command (`npm run build`).

Thanks

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [April 12, 2021, 3:50pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/7 "2021-04-12T15:50:08Z")

</div>

Can you change your build command to `next build && next export`? I just tested this and it works.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [April 12, 2021, 4:03pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/8 "2021-04-12T16:03:45Z")

</div>

In fact I tried with `next build` and it worked as well. Can you show me your page queries?

---

<div class="post-metadata">

**Author:** ![djiit](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/djiit/32/2029_2.png) [@djiit](https://community.prismic.io/u/djiit)\
**Post date:** [April 13, 2021, 8:13am UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/9 "2021-04-13T08:13:21Z")

</div>

Sure, here is an example :

```auto
const posts = await client.query(
    Prismic.Predicates.at("document.type", "post"),
    {
      orderings: "[my.post.date desc]",
      pageSize: 10,
      page: query.page || 1,
      ...(ref ? { ref, lang: locale } : { lang: locale }),
    }
  );

```

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [April 13, 2021, 1:36pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/10 "2021-04-13T13:36:42Z")

</div>

> [@djiit](#):
>
> `...(ref ? { ref, lang: locale } : { lang: locale }),`

This line seems a little strange, I'm not sure why you would pass the locale and ref together. In the example you shared, you've already opened the options object and each option should be on a new line.

What you did makes sense here for example where they are both passed as options together:

> <https://github.com/prismicio-community/nextjs-starter-prismic-multi-language/blob/e8ad10f85fcdddb966ad2c28f5b024d4cba9f5d1/pages/%5Buid%5D.js#L49>

What you're trying to do here is something like:

```auto
ref ? {
      orderings: "[my.post.date desc]",
      pageSize: 10,
      page: query.page || 1,
      ref, 
      lang: locale 
} : { 
      orderings: "[my.post.date desc]",
      pageSize: 10,
      page: query.page || 1,
      lang: locale 
})) || {};

```

---

<div class="post-metadata">

**Author:** ![djiit](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/djiit/32/2029_2.png) [@djiit](https://community.prismic.io/u/djiit)\
**Post date:** [April 15, 2021, 2:18pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/11 "2021-04-15T14:18:38Z")

</div>

Hey,

Just tried and this is basically equivalent (see the object is spread into the current object with the `...`)

I have also the same result without any preview/ref stuff.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [April 15, 2021, 3:20pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/12 "2021-04-15T15:20:12Z")

</div>

OK, I'll have to have a look at the project. Can you send me the github link so I can debug on my side?

Thanks.

---

<div class="post-metadata">

**Author:** ![djiit](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/djiit/32/2029_2.png) [@djiit](https://community.prismic.io/u/djiit)\
**Post date:** [April 15, 2021, 4:14pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/13 "2021-04-15T16:14:31Z")

</div>

Sure, give me some time to put an example together; I went with SSR because it was working. I'll ping you here when it's ready.

If you refer to the structure above, you have to know I had a page with the uid "mypage" , could this be conflicting ?

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [April 15, 2021, 5:33pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/14 "2021-04-15T17:33:32Z")

</div>

That sounds likely if the static site generator was creating 2 pages on that route, can you try deleting one then you'll know.

---

<div class="post-metadata">

**Author:** ![djiit](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/djiit/32/2029_2.png) [@djiit](https://community.prismic.io/u/djiit)\
**Post date:** [April 16, 2021, 10:32am UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/15 "2021-04-16T10:32:48Z")

</div>

Hey, so here is it :

code : [GitHub - Djiit/djiit-test-nextjsblog](https://github.com/Djiit/djiit-test-nextjsblog) (look at the `pages/test.js` file)  
deployed site : [https://djiit-test-nextjsblog.vercel.app/test](https://djiit-test-nextjsblog.vercel.app/test)

In my prismic repo, I created a "Test" page (uid: `test`), with a simple content "Hello".  
The test.js file is a copy of the `index.js` + some debug info.

If you go on the homepage, everything works fine. If you go on the /test page, only the doc renders. If you use the link at the bottom of the index page, then you are redirected to another version of the page which is broken...

It looks like a race condition between `[uid].js` and `test.js` somehow, when a page with such an uid exists... But in a classic NextJS fashion, the `test.js` should have precedence over the catchall route.

Again, thanks for your time Phil! I really appreciate this.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [April 20, 2021, 4:48pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/22 "2021-04-20T16:48:06Z")

</div>

@djiit,

So I had a look at your project and indeed `test.js` is generated on the live website and [uid].js with the `uid` of `test` is shown locally. I'm not sure why it's doing this, though seems like this is more an issue with how Next.js creates its statically generated routes.

The link at the bottom of the page uses the link resolver so it's search for a `page` type with the `uid`:  
`test`, this works on local since it's there, but breaks on the live site since it doesn't exist.

But like you said:

> [@djiit](#):
>
> But in a classic NextJS fashion, the `test.js` should have precedence over the catchall route.

So it's working correctly on the live website.

What's the use case here for having 2 routes with the same name?

---

<div class="post-metadata">

**Author:** ![djiit](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/djiit/32/2029_2.png) [@djiit](https://community.prismic.io/u/djiit)\
**Post date:** [April 21, 2021, 4:01pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/24 "2021-04-21T16:01:25Z")

</div>

I didn't have any clear use case in mind. My mental model was the following: "I have a foo.js page, so my uid.js won't bother with any "foo" path." So yeah maybe it's just an edge case here. Should we add somewhere in the doc that catchall route + static route "can" technically coexist (in a NextJS fashion) but should not be used with Prismic ?

(or did I miss the point? ahah)

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [April 22, 2021, 9:23am UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/25 "2021-04-22T09:23:46Z")

</div>

I'm not really sure that this is something that should be in our documentation, I feel it's something that's explained in Next.js:

> **[Routing: Dynamic Routes | Next.js](https://nextjs.org/docs/routing/dynamic-routes#caveats)**
>
> Dynamic Routes are pages that allow you to add custom params to your URLs. Start creating Dynamic Routes and learn more here.

Yes locally it might be possible to see it, but really on a live website, the correct behavior of predefined routes taking precedence over dynamic routes exists. So yeah maybe a note for some users of what to expect on a live website and with a link to the page above would be useful. What do you think?

---

<div class="post-metadata">

**Author:** ![djiit](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/djiit/32/2029_2.png) [@djiit](https://community.prismic.io/u/djiit)\
**Post date:** [April 22, 2021, 1:20pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/26 "2021-04-22T13:20:04Z")

</div>

IMHO that should do the trick. At least people will be redirected to the NextJS doc and will have a closer look on routing precedence. Is there a place I can submit a PR ? Or can you do it ?

Thanks for your time Phil!

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [April 22, 2021, 3:48pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/27 "2021-04-22T15:48:22Z")

</div>

I've already added it to the team's backlog, we'll hopefully get to it soon. 🙂

You're very welcome Dijit, let us know if you have any other questions.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [April 27, 2021, 5:01pm UTC](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862/28 "2021-04-27T17:01:24Z")

</div>

closed on April 27, 2021, 5:01pm UTC as resolved,  flag & select 'Something Else' to reopen.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

[Next page](https://community.prismic.io/t/page-using-predicates-working-on-dev-not-prod/4862.md?page=2)