Page using Predicates working on dev, not prod

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 :sweat_smile: .
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 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 :frowning:

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.

Hi @djiit,

Welcome to the community!

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

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

Thanks.

Hi @Phil,

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

Thanks

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

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

Sure, here is an example :

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 }),
    }
  );

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:

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

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 
})) || {};

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.

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.

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 ?

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

Hey, so here is it :

code : GitHub - Djiit/nextjs-blog (look at the pages/test.js file)
deployed site : 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.

Hey,

Thanks Dijit, it's been a really busy day, sorry. I'll try and get a look at this on Monday :slight_smile: