I wanted to use Netlify for one-click deploys on a personal project, but I encountered a showstopping limitation with Netlify’s redirects.
In my project, my recipe URL is of the form
/recipes/367. To get a JSON version of the recipe, you can append
.json to the URL:
The normal URL is handled by the React single page app, while the JSON dump is handled by the API server.
We use NGINX to route the URLs as follows:
To replicate this behavior with Netlify redirects, I figured I could use redirect placeholders like the following:
[[redirects]] from = "/recipes/:id.json" to = "https://api.recipeyak.com/recipes/:id.json" status = 200 # fallback to React on 404. [[redirects]] from = "/*" to = "/index.html" status = 200
But this doesn’t work!
Netlify treats the
/recipes/:id.json redirect as
/recipes/:id, so all of our URLs in Netlify will map to our API!
As mentioned in the Netlify docs, Netlify placeholders only match full path segments. Confusingly, Netlify doesn’t warn you if misuse a placeholder.
A placeholder either matches a path segment from one
/to the next
/or matches a final path segment including a file extension but excluding a query string
What’s the solution?
We could change the application routes to support Netlify’s restrictive redirect rules. Our JSON dump URL could become
/recipes/367/export.json, then we could add a rule matching on
In my case I reverted to my old NGINX setup.
I thought Cloudflare Pages might be an alternative, but they suffer from the same behavior.