TLDR - Next.js, GraphQL, FaunaDB, Tailwind, Auth0
I came across a Sam Selikoff's video on Buildng my first Next.js app, and really liked the idea of having a kind of boilerplate CRUD app (in his example, a recipe app) that you might rebuild with different front end stacks.
I think around that time, I had watched a couple sessions from React Europe, one of which covered the Next.js 9.4 release. In the past, I have used Gatsby, but had yet to look at Next, and so here we are.
Prerendered, static sites have gained momentum in the past 2-3 years, filling a niche and providing improved performance and developer experience for use cases involving, well... static content. Documentation, brochureware, etc, are great candidates for Gatsby or Next, but I think they are increasingly catching on in cases where we might have used a traditional SPA pattern for more interactive experiences without the bloat.
As this was my first time using Next.js, it was also my first time using the Vercel deployment platform. I love using Netlify, so my expectations were high.
It was fairly easy to setup, and now whenever I push to master, my app is built in less than a minute. I also liked that branch deploys were active with zero configuration. Nice! My only question is why my site deploys to (what seems like) a million domains.
I didn't start with Fauna as my backend - I actually started with Hasura. I ran into some problems designing and configuring my database (mostly because I'm not really experienced doing so) and I wasn't quite sure how to setup foreign key relationships in Postgres so that I could access them via GraphQL relations. I've heard good things about Hasura, so I chalk this up my lack of determination 😅
I hate to say it, but I think I tried FaunaDB because they had been running a lot of promoted tweets during this time. In any case, Fauna setup "clicked" for me, maybe because you can start with a graphql schema, and once I realized you could create indexes with custom search fields, I felt comfortable setting up what I needed for this app.
This was my first time using tailwind css, and I like the utility-first concept. Boostrap and Bulma are nice, but I would often supplement those base styles with sass spacing utilities. It can get a little repetitive, but you can always extract your own components, or add your own styles.
I began this project using theme-ui, a css-in-js jsx framework with its own components package. Initially I wasn't a huge fan of css-in-js as I found it hard to read. After a few days I got used to it, and enjoyed the flexibility. I could not get what I wanted out of the theme-ui components, so eventually I scrapped the whole thing, and converted to tailwind.
🚨 Bug alert: If you are using Chrome, and are blocking 3rd party cookies, a hard refresh will log you out of the session 😱
There is an open issue with the useAuth package - if I can't figure out a workaround, I might look at another authentication mechanism. If anyone has experience with auth0 and/or useAuth, please let me know!
Illustrations from Undraw.