I just turned 50 years old.
It's hard to believe that I took up coding only a mere 4 years ago, when I turned 46, at the start of Covid. With nothing to do during the lockdown, I decided to learn Javascript and React and transition all my websites to Gatsby and then Next.js. I worked with an amazing senior developer, Stan, back then, who I found by accident on Github. I learned a tremendous amount from Stan and still use most of the code he programmed on my production websites.
In hindsight my decision to transition away from monolithic platforms, like Wordpress, was not a great business decision. Coding is hard, and learning to code at 46, with 2 young children and a full-time business to run, is even harder. Coding is a never ending process of making mistakes, refactoring, and constant tweaking. It is extremely time-consuming. Ultimately, you end up sacrificing other aspects of your business to focus on coding.
However, I have yet to find an intellectual activity that is more satisfying than coding, and I have always held firm to the belief, that life is about learning. There is no greater joy than intellectual satisfaction, and coding gives you that in spades, which is probably why it's so addictive.
So after 4 years of learning to code, I'm happy to share my first pull request an implementation of the new Shopify Customer Account API on the Next.js Commerce repo. This pull request will allow anyone to use the new Shopify Customer Account API to login customers into their Next.js Commerce website, and eventually to perform critical customer actions, like review past orders, add addresses etc. I felt like this is a great addition to the Next.js Commerce repo because authentication remains a challenging part of any React application. The new Shopify Customer Accounts API, however, greatly simplifies authentication for headless platforms, and easily allows you to pass the logged in user to checkout.
The code for this pull request is admittingly not really too original, as it is based on Shopify's own Customer Account API implementaion on their Remix Hydrogen store and Shopify's docs. However, refactoring this code to use Next.js App router with RSC's, middleware, and server actions was a bit challenging. I did have to do quite a bit of searching and code tweaking before settling on, what I think is the best way to implement the Customer Account API on Next.js.
Of course, this pull request is not totally complete. I still have to actually implement order history, address creation etc. But, I think the current code does provide a reliable starting point for integrating the new Shopify Customer Account API into your Next.js project. Certainly, I look forward to getting feedback on the code, so it can be improved.
The actual code can be found on the this forked branch of Next.js Commerce. Documenation for setting this up correctly, can be found in our Create a Headless Shopify Site with Next.js Docs