dynamicParams not working with Next 15 (or 16)

[jeffcad]

Summary

I have a website in production that uses dynamicParams with getStaticParams to generate new post pages after build time, with posts fetched from Contentful. It works perfectly with Next 14.2.3, generating pages correctly at build time and on demand. I have been unable to upgrade it to Next 15, the build time pages work correctly but I can't generate new pages on demand. I'm currently trying to upgrade to Next 15.3.4, but I had the same problem with 15.1 and 15.2. The updating of existing post pages that were generated at build time works in 15.3.4, I have a webhook triggering revalidatePath for that.

The error that I'm getting is below. There is only 1 place where I use split, so it suggests that the params aren't being passed correctly for me in Next 15.

TypeError: Cannot read properties of undefined (reading 'split')
at s (.next/server/chunks/20.js:1:776)
at m (.next/server/app/special-events/[special-event]/page.js:1:981)

I've seen the docs about changes with getStaticParams in Next 15, but I'm confused about how it might apply to my project. I've also tried updating the Contentful package to the latest version, which didn't change anything. I'm out of ideas for now. I've included my Next 14 and 15 codes in this post. Any help is appreciated very much!

Additional information

// This is my current working production code with Next 14.2.3. I've changed some variable names here, so if you catch a name that doesn't match, it isn't the problem

export const dynamicParams = true

export async function generateStaticParams() {
  const response = await getSpecialEventsPosts()
  return response.items.map((item) => ({
    'special-event': `${item.fields.eventDate}-${item.fields.city}`
  }))
}

export function generateMetadata({ params }) {
  const { city, eventDate } = getCityAndEventDate(params['special-event'])
  return {
    title: `${eventDate} ${city}`,
    description: `${eventDate} special event in ${city}`
  }
}

export default async function SpecialEventPage({ params }) {
  const { city, eventDate } = getCityAndEventDate(params['special-event'])
  const response = await getSpecialEventPost(city, eventDate)
  if (response.items.length === 0) {
    notFound()
  }
  const thisRouteName = params['special-event'].split('%20').join(' ')



// This is my new code with Next 15.3.4, which doesn't generate new pages. I've changed some variable names here, so if you catch something that doesn't match, it isn't the problem.

export const dynamicParams = true

export async function generateStaticParams() {
  const response = await getSpecialEventsPosts()
  return response.items.map((item) => ({
    'special-event': `${item.fields.eventDate}-${item.fields.city}`
  }))
}

export async function generateMetadata({ params }) {
  const awaitedParams = await params
  const { city, eventDate } = getCityAndEventDate(awaitedParams['special-event'])
  return {
    title: `${eventDate} ${city}`,
    description: `${eventDate} special event in ${city}`
  }
}

export default async function SpecialEventPage({ params }) {
  const awaitedParams = await params
  const { city, eventDate } = getCityAndEventDate(awaitedParams['special-event'])
  const response = await getSpecialEventPost(city, eventDate)
  if (response.items.length === 0) {
    notFound()
  }
  const thisRouteName = awaitedParams['special-event'].split('%20').join(' ')

Example

No response

[icyJoseph]

Hi,

I can't reproduce:

src/app
├── event
│   └── [special-event]
│       └── page.tsx
├── favicon.ico
├── globals.css
├── layout.tsx
└── page.tsx

With this [special-event] page:

export const dynamicParams = true

export async function generateStaticParams() {
  return [{ 'special-event': 'hello%20world' }]
}

export default async function SpecialEventPage({ params }: { params: Promise<{ 'special-event': string }> }) {
  const awaitedParams = await params

  const thisRouteName = awaitedParams['special-event'].split('%20').join(' ')
  return <div>{thisRouteName}</div>
}

[jeffcad]

I've done more testing. I can confirm the following:

• It works perfectly in Next 14 versions
• In Next 15.3.4, the pages that were created at build time work perfectly and can be updated with revalidatePath
• When I publish a new post in the CMS and refresh my site, the data was fetched from the CMS because the new post title appears in the menu screen
• On the menu screen, the pre-fetch of the pages created at build time works, but pre-fetch of the new post page gives internal server error
• When navigating to the new post from the menu, the page generation again fails and gives internal server error
• I did a console.log of awaitedParams for the new post page, and it was { 'special-event': '%5Bspecial-event%5D' }, so it is just being fed the dynamic slug name itself (%5B is '[' and %5D is ']') and not the information from the URL which I have confirmed was displayed correctly in the browser
• Deployment is on Vercel, if that could be important

I'm unable to understand how all of the above could be true, work perfectly in Next 14 but not 15, unless there is something wrong with Next 15's use of dynamicParams.

[icyJoseph]

Are you using middleware?

[jeffcad]

No middleware.

[jeffcad]

I will add that if I take the same post that I am trying to generate on demand, and build/deploy again with it already published, the post works correctly on the site. There is nothing wrong or corrupt with the post itself, as long as it exists at build time it will work.

[icyJoseph]

And this doesn't happen locally with next build && next start?

[jeffcad]

Next 15 code in local dev environment (npm run dev) gives my Not Found page when post is unpublished, and correctly generates the page when post is published. Behaviour is exactly as expected.

Next 15 code in local build environment (npm run build & npm start) gives my Not Found page when post is unpublished. I can see that the slug for [special-event] is being passed correctly in the console.log of awaitedParams, unlike during deployment on Vercel. If I want to make the page generate, I have to publish the post before visiting its page for the first time, then I get the Not Found page, but if I refresh I can see it. No errors given. This is the same behaviour as my current production code when used with local build environment, so I don't think it's an issue.

[jeffcad]

I was hoping that Next 16 might fix this issue for me, but it's still failing in exactly the same way. I logged the params before awaiting them, immediately after they're passed to my SpecialEventPage, and this is what it gave:

Promise { { 'special-event': '%5Bspecial-event%5D' }, [Symbol(async_id_symbol)]: 34460, [Symbol(trigger_async_id_symbol)]: 34459, [Symbol(kResourceStore)]: {

You can see that the params it's receiving for the slug 'special-event' is just the slug name itself. This matches the result when I await the params before logging, as I wrote about above. Again, this only started happening with the change from Next 14 to 15. Version 14 works perfectly. I've checked the URL and it is a valid URL for one of my posts, that is not the problem. I can't come up with any reason that this should be happening. Does anybody have any ideas about what could cause params to not be passed correctly at run time?

[jeffcad]

Vercel tech support wrote back and we have our answer. The problem is with the dashes in the name of the path. I renamed the segment from special-event to specialEvent and it works again. The problem with the dashes is only a problem above Next 14, when deployed to Vercel, and only for page generation at runtime. It works with Next 14 and below, works on local builds, and works with pages generated at build time, so was a difficult one to figure out.

The issue was reported last year, but hasn't been resolved. My search of the issues didn't find it because I was focused on dynamicParams being the problem, but the report focused on dashes in segment names. :-(

Issue #71757