How I lost potential clients because of a Nextjs Server Action

Hey everyone!

It has been a really long time! (4 YEARS OMG??)

Since then i got my diploma, "ai" is taking over (🤡), I moved to my parent's attic and Musk bought Twitter 😂

I also started a completely new project and I've decided that I will find the time to share some learnings now and then from this journey.

But first you need to understand the project and the why of it. I will only explain it in that article. You can skip it but I feel like you wouldn't get the whole picture for the next articles. Anyways.

A bit of context

Around 2021-2022 we've decided with a friend to start a YouTube channel (in a totally different niche)

After some time we understood that short form content was becoming undeniably powerful. So we decided to try to create on top of the videos, one short form video per day (as it is recommended by a lot of creators at that time at least)

But we quickly faced a problem...

It takes time. A lot!

So we try to find ways to speed up the process.

One of them being auto generating captions for the videos instead of manually captioning them.

I tried so many solutions and none were satisfying. I still take a subscription to have the job done but I decide to start building my own.

Having tried most of the existing tools out there, I know the annoying parts, that it's too expensive for just having captions and that they are not enough accurate. Therefore it still takes me too much time..

I finally come up with an MVP and get videos uploaded on the major platforms while using that tool for our accounts.

At the same time, I know quite some people in content creation that have the same issue. I take the opportunity and make them use the tool.

They suggest me improvements, point out issues, and uses it to upload videos for their own content (or even for their clients)

Combined with my own experience, it was REALLY a game changer in the process of building Subtile AI.

I think it was the first time that I started a project where I knew the pain points and knew people that could express me their needs and that was so valuable. I'm sure that I wouldn't have a product that mature today without that.

Technical issues

Speaking of maturity. As you may probably know, a SaaS is not a SaaS wihtout a landing page and a waitlist, right?

When I started being confident that it would be useful also for strangers, I decided to work on that and make the project public.

One thing to know is that I am using NextJS with that project and even if I first started with a simple api route for the waitlist, I eventually changed the code and took that opportunity to try the famous server actions coupled with the useFormStatus from React ("experimental" at that time).

So I proceed, and of course, test it locally but also on my deployed environment.

Ok it works, nice!

Does it?

A couple of weeks later, I notice that the number of registrations to the waitlist has significally decreased. Why was that? I don't know so I decide to open my Posthog dashboard and here in front of me I see something very strange!

Someone clicked the "Join waitlist" button twice but I don't see any new entry in my list of emails.

I try to reproduce the issue and... WTF? It works?

Debugging

I start to dig a bit deeper, check the logs, try to break it by any means but nothing.. It really do work.

I decide to check back the logs on Posthog and I find something interesting 👀 Why didn't I check that earlier...

The person who had the issue tried on "Mobile Safari", so I decide to grab my phone (an Android) and try again.

Surprise! It indeed doesn't work!

But why wouldn't it work on mobile?

In a way, I feel some relief because I now understand why my product was getting so little attention... (I was feeling really down about it lately..)

But on the other hand, I was stuck with an issue that seemed incomprehensible!

The (stupid) solution

Eventually after some debugging (❤️ to the Chrome Devtools for allowing me to check the console on my mobile browser by just plugging my phone) and some research on Stackoverflow (Yeah, I'm an OG, I don't use ChatGPT 😂); I found out that you NEED to have your server actions to be under the app directory!

Ok in every example of the NextJS team they indeed create those in a "actions.ts" under the app directory if I'm not mistaken but how could i guess that you can't put them outside and it would break only on mobile??

Maybe it's written somewhere in the doc, but I re-checked quickly and didn't find anything.

You guessed it, the only thing that I had to do was to move my actions under the app directory and adapt the imports and I was done.

git add . git commit "hell yeah" git push *waiting deployment*

I finally take my phone, head to Subtile AI and it really works!

Conclusion

After almost 10 years of coding, I'm still surprised how an issue can be that stupid but that difficult to think of at first glance.

That one was a bit longer and I had to go a bit deeper on the project but for the next ones I will just send you to this article to get the context.

I hope to come up with interesting topics (but not too much, it would mean I'm facing too many issues 😂)

I would also be curious to know if anyone got any similar experience with NextJS or any other tech.

Until then, happy coding!

PS: I have a new Twitter/X account where I'm more active, don't hesitate to {% cta https://twitter.com/yoadev %} connect {% endcta %}