Next.js error only in production on newly created item on dynamically routed slug page

Support
1

Howdy Netlifyers,

I decided to go all in with Netlify on a Next.js project I’m working on. So, I’ve got Netlify identity, Netlify functions, and I’m even using Fauna.

I gotta say that Netlify Dev works like a charm. Nice work!

Now here’s the deal…

The site uses dynamic routing, so I can use a URL like this https://mysite/things/thing-slug and display a page specifically for that slug. This is thanks to getStaticPaths and getStaticProps from Next.js.

As I will potentially have a lot of things, and new things may be created between builds, I’m using fallback: true in getStaticPaths.

This all works swimmingly on my local running the app both with netlify dev and npm run build && npm run start, which is the equivalent next build followed by next start. In the latter scenario, I run the Netlify functions with netlify functions:serve.

Now there’s one thing that doesn’t work, but it only doesn’t work in production.

Once the site is deployed to production, and a new thing is added (to the db), attempting to access the slug page, https://mysite/things/new-thing-slug/ results in an error:

GET https://mysite.netlify.app/_next/data/eDkYkRXXhrj8JP46OysaH/things/new-thing-slug.json?slug=new-thing-slug 500

While it’s entirely possible that I’m doing something wrong, this is strange because this works with a manual build (next-build) running with next start, locally, which should be as close to production as I can get.

I’m guessing this is something happening under the hood with how Netlify serves Next.js apps, but I can’t seem to get any info from the logs. And I have updated the nextjs plugin to the latest (@netlify/plugin-nextjs@4.14.2).

I’m going to try to deploy this on another platform to test, but in the meanwhile it would be great if anyone’s come across this before and might have an idea of why this is happening and how I might resolve it.

Thanks!

2

Okay, tried this out on Vercel, and it works as expected in production, so something must be going on under the hood at Netlify that causes this issue, unless I’m wrong, which is entirely possible.

Any helpful advice here would be very appreciated.

3

Hey there, @Kimfucious :wave:

Thanks so much for reaching out. We are happy to look into this further for you so we can investigate what is happening. Can you please share your site URL? You can DM it to me if you are not comfortable sharing it publicly. Additionally, can you share a full copy of your most recent deploy log?

Thank you so much!

6

Thanks, Hillary. I’ve sent you a DM.

8

Hey @Kimfucious,

Are you doing some kind of image transformations inside any of your routes covered by ISR?

Could you try to make sure:

  1. sharp exists as a dependency in your top-level package.json.
  2. Including it like:
[functions]
  external_node_modules = ["sharp"]

in your netlify.toml, works?

10

Hi @hrishikesh,

Thanks for helping out.

The sharp package exists as a dependency of the plaiceholder package and Mantine (a components library). I’m not using any of the image components from Mantine, but I’m using plaiceholder in getStaticProps on some pages, including the page that is presently getting that error.

Taking your advice, I added a netlify.toml with the functions entry and installed sharp as a top level dependency. Unfortunately, the problem persists.

Any further ideas toward resolving this would be most appreciated.

11

Hey @Kimfucious,

Could you share a path at which you can see this problem? I went to your site/_next/data/eDkYkRXXhrj8JP46OysaH/things/new-thing-slug.json?slug=new-thing-slug and that doesn’t show the error - which is probably expected as the assets now give 404 due to hash change, I assume.

If we have the path which consistently gives this problem, we can check further for this issue.

12

HI @hrishikesh,

That path was salted with fake characters. Sorry that wasn’t clear.

As, things “just worked” when deployed to Vercel, I’ve been carrying on there.

Thanks anyhow,

Kim