The journey of how I developed and deployed a serverless NextJS 14 web app on Cloud Run with no prior web development experience.
My pre-existing knowledge on web development until this point had consisted of learning html back in high school, plus some recent experiments with making javascript modules to embed in a no-code website creator.
The task ahead of me was to create a fully-fledged web app to integrate with multiple APIs to create a smooth signup flow for users. I was lucky enough to have a figma design to work from and go from there.
Knowing our cloud provider of choice was Google as pretty much the only requirement, I set out to do some research as to what is the best framework to use and settled on Next JS as an alternative to Baseline JS which was recommended to me (but strongly tied to AWS). You can see my other post here explaining the GCP Tech Stack I used for a serverless NextJS Web App
Thus begins the journey...
and so I'd like to point out the key concepts that I came across and had to learn which ultimately led to a functioning web app. Fair warning that this ended up being a longer list than expected - turns out web development is pretty complicated!!
What is React? ⚛
Or futher, what's a framework? What's a component? What does server-side vs. client-side mean?? I dove into the deep end on this topic and a few crash course videos on youtube gave me enough context to bridge the gap between vanilla javascript and the richness of features of NextJS to allow me to dive-in with npx create...
Some quick videos I'd reccomend:
- React in 100 Seconds
- Every React Concept Explained in 12 Minutes
- Learn SSR for Next.JS in 10 Minutes
How does App Router Work? 📂
A hurdle I ran into pretty early on was absolute confusion as to what the hell 'server side props' meant? I finally realised the gap was because I was using the new NextJS 14 App Router... and reading a bunch of guides of a completely different version. Whoops!
But the good news was, the updates in app router resulted in a much cleaner codebase (in my opinion) and so once I figured out to ignore certain google results for a different version, I quickly picked up the folder directory driven structure for building out my app pages and API routes. Check out Getting Started - Next JS Project Structure.
How do Cookies Work? 🍪
Or rather first, how do I pass data between the client and server? And then once I landed on cookies, how to wade through the seemingly millions of different cookie libraries and figure out which to use??
The answer in my case ended up being, ignore all the libraries and use the built in cookie utilities with NextResponse and NextRequest. Simple is often better when it comes to programming. This was again another topic quite out of my depth although one I ended up having to learn in depth. So you set a cookie in a response, and read it from a request, and so you have to first return the response before reading the next request.... and around in circles I went.
But! I got it to work. And this video in particular was the light bulb moment for me by Josh Tried Coding.
What is a State Machine and How Do I Set That Up?
This question actually ties in with the last as handling state was why I originally implemented cookies in the first place. This was another case of finding many different libraries when looking for a solution and although I tried a few, I settled on using xState, perhaps mainly because it's the first I actually got to work.
I found the benefit of xState was using createMachine to define the flow of my app and easily being able to implement a middleware piece to send a user back to where they are supposed to be, no matter the URL they were trying to access. But how to secure these cookies??
How to do Encryption with TypeScript? 🔒
Now I'm not unfamilar to the world of encryption thanks to handy python libraries like cryptography although I soon found out it was quite a different ball game in typescript. I originally wrote my entire encryption handler functions using the built-in javascript cryptography library only to be hit with:
Not available in NodeJS Edge Runtime
What the hell is an edge runtime?? This led me to learn about how middleware doesn't run entirely on your server, or perhaps it does, but on a 'sub' version of it without full nodejs. Do I still understand it? Not really. But I figured out enough that I had to use the Web Crypto Api instead for any case where the middleware needed to use it.
Using this I was able to encrypt all my cookies using a secret so they were not so easily changable, or recognisable, by a user.
Is that everything?
Not quite, but it definitely covers the main challenges and topics I had to overcome in this journey into web development.
Some other pieces I learned (with handy links to what helped me) included:
- Setting up Google Analytics
- Setting up Google ReCaptcha v3
- A lot about CSS
- How to use media queries for different device layouts
- How to React's
useEffectanduseStatefor client-side stuff - All the fun stuff that comes with deployment and scaling and security, some of which is mentioned in my other article
All in all, this was a great learning experience and I'd say I quite enjoy web development! I am keen to learn more about this field and work on future projects.
Top comments (0)