Optional route parameters are not yet supported. Is it a bug?

[emrecoban]

Summary

I am creating dynamic segments with Next.js. However, if the segment is [[slug]], I am getting the error "Optional route parameters are not yet supported". When it's [[...slug]], I don't get the error. It's very strange. What is the solution?

My directory structure: src/app/[[slug]]

Additional information

No response

Example

No response

[icyJoseph]

What that ever supported? https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes

I do think, catch all have to be [[...slug]], as it says there in the docs:

For example, pages/shop/[[...slug]].js will also match /shop, in addition to /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts.

[emrecoban]

Yes, I saw it, but I don't want to catch all-segments. When it is, it is possible domain.com/a/b/c/d... I just want to create one segment, like this: domain.com/a

[icyJoseph]

But you can just check if the length of the captured slug is one, otherwise return not found

[emrecoban]

Yes, I know and did it like that. But It was not what I want. It should have worked like /app/[[slug]].

[icyJoseph]

Ah I kind of agree. A couple of times, I've been bitten by that haha; I think the old path resolver implementation, could also handle it, but for some reason it was not allowed anyway.

[milovangudelj]

Another thing to note is that a catch-all segment must be the last part of the URL. While having support for an optional route parameter like [[param]] could be very useful especially for i18n where you would want the default locale of a page to just be something like this site.com/about instead of site.com/en/about.

[milovangudelj]

No, currently there is nothing other than a rewrite that allows us to mask the default locale in the url.

You have to use a dynamic segment and generate all possible parameters using generateStaticParams. Then for each request verify if the user is visiting the default locale and rewrite the request accordingly.

There's a pretty good official example of a barebones i18n implementation here:

https://github.com/vercel/next.js/tree/canary/examples/app-dir-i18n-routing

I'll update it to add the locale masking logic as soon as I get the chance to do so.

[bahag-stolyarchukm]

Rewrite you mean by using NextResponse.rewrite() ?

[mfkrause]

@bahag-stolyarchukm Did you solve this in the meantime? This is exactly my problem as well right now (default locale at the base path with sub-path routing to other locales).

[bahag-stolyarchukm]

I am not sure if I went exactly the same way as @milovangudelj - but I used route masking approach. I have also used redirect approach as sometimes, based on the need, URL contains /locale

const absoluteUrl = new URL('[any route to mask]', req.nextUrl.origin).toString()

    const i18cookie = { name: cookieName, value: 'de' }

    const response = NextResponse.rewrite(absoluteUrl)

    response.cookies.set(i18cookie)

    return response 

What I did not use is generateStaticParams - as we are detecting supported locale on i18n side with Navigator and passing the value directly into configuration. In this way useTranslation does not need 2 arguments.

[bahag-stolyarchukm]

I have actually decided to go a different way.

next.config.ts:

  async rewrites() {
    if (!isLocale) {
      return [
        {
          source: '/:path*',
          destination: '/your locale OR any segment locale like :loca/:path*'
        }
      ]
    }
  }

I could still be wrong, however, it works as expected for the time being.

[treylon]

Is there any news whether this is on the roadmap or not? As @milovangudelj mentioned we would also really appreciate this feature for i18n purposes.

[bahag-stolyarchukm]

It is not yet supported, is not it?

[musjj]

Can't believe that this isn't supported yet. That darn message was added 4 YEARS ago: f8125c9. Now that we're on v15, still nothing.

[HackerQED]

+1. This feature is critical for i18n sites

[provok-exe]

@rauchg 👀

[milovangudelj]

Please don't tag people not involved in the discussion. It's considered rude...

[provok-exe]

Okay, I understand @milovangudelj
I won't do it again 👌

So, since you're the acting marshal of this town, how do you plan on getting an answer to this 4-year-old problem?

[milovangudelj]

Don't take it personally, I'm no marshall. I just told you it's something to avoid most of the time and you can do what you want with that information 🙌🏻

As for getting the issue answered, I can only hope enough people see it and react to prioritise it. At the end of the day it's up to the maintainers to decide what to do. This is not a simple fix, and it's not even a bug really so it might never be addressed.

It would be nice but we can only wait and hope they see it 🤞🏻

[provok-exe]

Yeah, no problem @milovangudelj. It's just my way of talking. I'm blunt 😂

Let's hope more people react to it then.

[akarabach]

any updates on it ?

[dominik-sfl]

also curious about this? any news?

[sharmapukar217]

is there any new news about this?
i really need app/dashboard/[[tenant]] for this. sveltekit so nicely support this feature, i.e: routes/dashboard/[[slug]]. I've been waiting since nextjs 14, but i don't see any new topic related to this.

[AzizStark]

Aug 21