Did you know Netlify Functions could break when renamed to the same name with a different casing? I sure didn't. What Are Netlify Functions? If you know what AWS Lambda or GCP Cloud Functions are, then Netlify Functions won't be a stranger to you. Netlify functions are serverless functions powered by Netlify's infrastructure. These functions are designed to allow you and me to quickly build and deploy serverless applications without the need for managing infrastructure or scaling concerns. One of the common ways we can use Netlify Functions is by serving API routes defined in frameworks like Next.js. Suppose I wanted to create some endpoints for my frontend application to call, like . /api/toast/<id> In that case, Next.js enables you to create your route within the same root directory under the directory. You can read more about it . /pages/api here Is This a Bug? I have been toying around with Netlify Functions to test a few APIs here and there to see how easy it is to integrate into a project. Over time, one of the routes I defined stopped working on my live deployment. And the worst part was that it worked locally. The route was a that took in an id called so I can fetch a piece of Toast by id (this is a simple test app, don't worry about it). dynamic API route toastId export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const { toastId } = req.query;
    // Fetch the piece of toast by id and do something with it...
  } catch (ex) {
    // ...
  }
}; Looking through the Git history to see what change may have broke, it didn't give too many hints as to how I broke it -- neither did logging out the value on my local deployment. What did help was logging out the value on the deployed instance of my test app. Turns out, my renaming of the dynamic route file from to broke what I initially deployed to Netlify. When I ran the server locally, the casing change took effect as expected. [toastid].ts [toastId].ts However, it was not reflected when deployed to Netlify. As a result, my route was not able to extract the path parameter using the following  code snippet: const { toastId } = req.query; // `toastid` was being populated instead After renaming the file from to , the route worked once more. [toastId].ts [toastid].ts Now, is this a bug or just an undocumented behavior? Unfortunately, I have yet to find an answer for this in the Netlify and Next.js documentation or StackOverflow and Github Discussions. Please let me know if any of you do! Tl;DR The name you choose for your routes in your Next.js app matters. It may not be apparent when you're working on it locally, but quirks such as this one on Netlify can throw a wrench into your application deployed in prod. Thanks for Reading! 💎 Thank you for taking the time to check out this post. For more content like this, head over to my actual . Feel free to reach out to me on and follow me on . blog LinkedIn GitHub

This story contains new, firsthand information uncovered by the writer.

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Casing Can Break Netlify Functions: Here's How

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Boosting Your Productivity and My Scrappy Approach to Getting Things Done 🚀

Asterisk's Unnoticed Bug: The Double Quote Bug

Common Mistakes in Bug Reports and How to Fix Them

Getting Regex Boundaries Right: A How-To Guide

Go vs Rust: A Sto-array of Arrays

Boosting Your Productivity and My Scrappy Approach to Getting Things Done 🚀

Asterisk's Unnoticed Bug: The Double Quote Bug

Common Mistakes in Bug Reports and How to Fix Them

Getting Regex Boundaries Right: A How-To Guide

Go vs Rust: A Sto-array of Arrays

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps