Vercel has a cleanUrls option

[leerob]

Hey!

FYI, Vercel has a cleanUrls option for vercel.json.

---

When set to true, all HTML files and Serverless Functions will have their extension removed. When visiting a path that ends with the extension, a 308 response will redirect the client to the extensionless path.

For example, a static file named about.html will be served when visiting the /about path. Visiting /about.html will redirect to /about.

Similarly, a Serverless Function named api/user.go will be served when visiting /api/user. Visiting /api/user.go will redirect to /api/user.

{
  "cleanUrls": true
}

---

https://vercel.com/docs/configuration#project/clean-urls

[slorber]

Thanks, will add a line for this option (and also trailingSlash) soon.

I understand that /file.html will redirect to /file with cleanUrls, however I was surprised that without this option, /file is 404 while /file.html works.

Particularly, next export will create files such as file.html by default (without trailingSlash: true) so wouldn't it make sense that a no-config next export works on a no-config Vercel by default?

[leerob]

Thank you! We will soon be changing the default on Vercel to have cleanUrls enabled by default. Stay tuned for that changelog.

Re: next export – the vast majority of Next.js applications are using next start, actually. I agree that it should work out of the box, though. We will fix this!

[slorber]

Yes that's what I thought 😆 using next export on Vercel is probably not the most used setup

[slorber]

@leerob is there a way to configure cleanUrl + trailingSlash using the Vercel interface?

What's the simplest way for me to deploy the static folder with 4 distinct options combinations? Is there any way to avoid having 4 distinct folders?

[leerob]

Currently, those options are only available through vercel.json. We will be adding them to the UI, though!

You can simply create multiple projects with different vercel.json files for testing 😄 You can have multiple projects for the same git repo.

[slorber]

@leerob but doesn't this mean that I have to create/maintain multiple copies of my static folder in this repo then?
I'd like to avoid that 😅 let me know if there is a way, or if it will be configurable on the UI soon, otherwise I'll have to do that and handle multiple copies.

[leerob]

No, you can import the same repository multiple times. One to many relationship with projects. So you can have the same code but different settings per project!

[slorber]

Yes I understand that, but how can I have different Vercel settings for the same github repo? I'd have to use 4 vercel.json config in any case, and it's only possible to put one in /static/vercel.json

I'm thinking of using different branches for each vercel deployment, any better idea?

[leerob]

Ahh, my bad. Sorry, I wasn't putting the full picture together here.

Yes, since you need to have multiple vercel.json files, you could do different branches! Or separate folders entirely.

P.S. vercel.json is in the root of the folder, not underneath static.

[slorber]

Oh noooow :'(

I just created the 6 branch to account for all the combinations of cleanUrls + trailingSlash configs, and now get this error:

Is there anything you can do to unlock this?

I'd prefer not having to maintain multiple forks or pay a pro plan just for this repo 🤪

---

P.S. vercel.json is in the root of the folder, not underneath static.

From what I see, it's fine to nest the config file in /static/vercel.json as long as I set /static as the root in the UI

Also, noticed that the trailingSlash option is available on both Next.js and Vercel, any idea how they relate? I know the trailingSlash of Next.js will also affect filenames on next export

[leerob]

Happy to sponsor a Pro team (which has 10) for this 😄

1. Create a new Pro trial and let me know the team slug
2. Transfer the project from your Personal Account to the team
3. Ensure it's working!

https://vercel.com/docs/platform/limits#general-limits

[slorber]

thanks :)

Here's the slug: https://vercel.com/teams/trailing-slash-team/

[leerob]

Done!

[slorber]

Thanks Will try to finish all this tomorrow 😜 Le mar. 6 juil. 2021 à 20:31, Lee Robinson ***@***.***> a écrit :

…

Done! — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFW6PVL67SPXYYAOBG6FYLTWNDZXANCNFSM46UGJ2MQ> .

[slorber]

Thanks, it seems to be working.

Now covering all the options (I think)

Seems like Vercel has some unexpected serving behaviors. Using cleanUrls is not enough to get file.html served and you have to use the trailingSlash option too?

https://github.com/slorber/trailing-slash-guide

---

FYI I wasn't able to transfer the projects (asking for CB) so I recreated them:

[leerob]

@slorber Guessing you hit the issue since I added a sponsorship to your account, and never put in card information 😄 Edge case!

[leerob]

Seems like Vercel has some unexpected serving behaviors. Using cleanUrls is not enough to get file.html served and you have to use the trailingSlash option too?

That sounds unexpected, I will report back to the team!

[slorber]

Edit: nevermind it looks like it behaves with cleanUrls: true now, was just a Docusaurus error mistake

Maybe we should update this doc, does it require to redeploy things?

---

We will soon be changing the default on Vercel to have cleanUrls enabled by default. Stay tuned for that changelog.

@leerob was wondering if cleanUrls: true is now the default, and if other changes were made?

It seems a Docusaurus user may be affected by the current serving behavior: facebook/docusaurus#6706

Should SSG deploying to Vercel document that cleanUrls: true is a recommended setting?

[mripkiss1]

Hey!

FYI, Vercel has a cleanUrls option for vercel.json.

When set to true, all HTML files and Serverless Functions will have their extension removed. When visiting a path that ends with the extension, a 308 response will redirect the client to the extensionless path.

For example, a static file named about.html will be served when visiting the /about path. Visiting /about.html will redirect to /about.

Similarly, a Serverless Function named api/user.go will be served when visiting /api/user. Visiting /api/user.go will redirect to /api/user.

{
  "cleanUrls": true
}

https://vercel.com/docs/configuration#project/clean-urls

please show me how and were to find the vercel.json files to edit this in.