Page using Predicates working on dev, not prod

Developing with Prismic
1

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 :

2

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:

3

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.

5

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.

6

Hi @Phil,

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

Thanks

7

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

8

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

9

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

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

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.

12

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.

13

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 ?

14

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

15

Hey, so here is it :

code : GitHub - Djiit/djiit-test-nextjsblog (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.

22

@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:

So it's working correctly on the live website.

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

24

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)

25

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:

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?

26

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!

27

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

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

28

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