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: /recipes/367.json.

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:

route component
/recipes/367 UI
/recipes/367.json API

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!

The Problem

Netlify treats the /recipes/:id.json redirect as /recipes/:id, so all of our URLs in Netlify will map to our API!

route component
/recipes/367 API (incorrect!)
/recipes/367.json 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 /recipes/:id/export.json.

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.