NextJS14 Dynamic Routing

Support
, ,
1

I’m not attempting to do any advanced API routing just a simple page route. All I am doing is trying to obtain what the current slug is so it can be used in a query.

Site
rosannablacket.netlify.app

Research
I’ve combed the netlify, sanity and nextjs starters looking for relevant solutions. Nothing found. I’ve searched this forum, chatbot, sanity’s slack chat, stackexchange etc… Read the post on why is my page timing out. Read the netlify + next’s docs, searched git hub issues for both projects. Nothing comes up which has me thinking I’m doing something clearly incorrect.

Issue
Dynamically routed pages timeout with NextJS 14+ running next v5 runtime. There is no build error or error in the function log.

Error

An unhandled error in the function code triggered the following message:

LambdaTimeout - 2024-04-27T06:15:42.458Z 42730065-1c2e-4b50-8c49-c1b103eb568c Task timed out after 10.02 seconds

If I pass params to Page function it results in a time out. If I generateStaticParams during build, it results in a time out. The only way to get the page to load is to remove the dynamic aspects.

# /app/work/[slug]/page.js
export async function generateStaticParams() {
  const data = await getClient().fetch(`*[_type == 'folio'] { 'slug': slug.current}`)
  return data.map((data) => ({
    slugs: data.slug,
  }))
}

export default function Page({params}) {
  return <div>Dynamic page {params.slug}</div>
}

# netlify.toml
[build]
  command = "npm run build"
  publish = ".next"

I have to say the experience with Netlify has been below average as there is very little error information provided. The deploy is successful, the function log contains barely anything and this results in a vicious cycle of trial and error with time wasted waiting for builds to complete simply to discover the error remains.

Apr 27, 04:58:50 PM: 60be1bfc ERROR  Task timed out after 10.02 seconds
Apr 27, 04:58:50 PM: 60be1bfc Duration: 10016.18 ms	Memory Usage: 88 MB	
Apr 27, 04:58:50 PM: INIT_START Runtime Version: nodejs:18.v28	Runtime Version ARN: arn:aws:lambda:us-east-2::runtime:b475b23763329123d9e6f79f51886d0e1054f727f5b90ec945fcb2a3ec09afdd
Apr 27, 04:58:50 PM: 2024-04-27T06:58:50.787Z	undefined	INFO	import next server: 248.976ms
2

Have you tried checking out: [Support Guide] Why is my function taking long or timing out?

3

Thanks for the reply.

Yes I have. In this case returns are included. To simplify the issue even further, if the following code is placed in a [slug]/page.js file the page will time out. In this case there are no async calls to wait for.

export default function Page({params}) {
  return <div>Dynamic page {params.slug}</div>
}

An example url is https://rosannablacket.netlify.app/test/dynamic

If the following changes are made (removed params):

export default function Page() {
  return <div>Static page</div>
}

the page loads but no longer has access to params and thus can’t determine what its slug is.

Nothing helpful is present in the logs.

4

Could you potentially share your repo so we can check?

5

Hi @hrishikesh

Thanks for your assistance.

Public repo can be found here Bitbucket

I have removed sensitive API tokens + Sanity Studio.

6

I tried deploying your repo: f-117303.netlify.app/test/dynamic and that seems to load fine.

The only different I noticed was that you’re using Next.js Runtime 5.1.2 whereas I used the latest 5.2.2 which has some fixes related to the timeout (which might or might not be related to your issue).

Could you try updating it?