It took me something like eight hours to understand how to bring Next.js 13 Beta to let a user put text into an input field and use that text in a function. Here’s why:
The component has to be client-side for a state driven input field to work.
The function had to be invoked server-side because it uses an (OpenAI) API key that would have otherwise been exposed.
I tried for hours to somehow manage to take the string from the input field and throw it into the server rendered component. That doesn’t even make any sense and was always going to fail. It would be a paradox.
It took me only a couple of hours to come to that conclusion. That’s when I figured that Route Handlers, formerly known as API Routes might be the solution. There was only one problem: I didn’t really understand what they are, what they’re doing and what exactly they’re meant to be used for. After playing around with them for a while, I somehow lost my mind and went back to my initial approach: Trying to convince a server side component to dynamically render something based on data from a client side component.
Okay, hear me out. Web development is actually kind of fun. I mentioned that I worked through The Joy of React recently and while the course managed to transfer a lot of valuable knowledge, it didn’t do a great job at keeping me motivated.
I’m not one of those people waiting for motivation to magically hit me. I know that it’s something you create by actually sitting down and doing the work. Nevertheless, something about the course constantly trying to trick me into working on something it hasn’t taught me before, made me just watch the solution videos before actually trying to solve the problems. I knew that I could not possibly know the “right” solution, so I stopped trying. That resulted in me finishing the course without applying most of the things it covered.
100 Days of SwiftUI‘s approach worked far better for me. It covered a couple of concepts, then gave me a challenge and told me that I already know everything needed to solve it properly. I knew that it’s completely my fault if I don’t manage to come up with a solution and I also knew that I only had to re-watch the previous lessons to stumble upon the answer at some point. That’s motivating! Telling me that I’m theoretically able to solve the challenges gave me enough confidence to sit down and try until something worked.
So here’s how I got over my disgruntled and unmotivated “Web dev sucks” state:
I bought the limited early access to The Joy of React the other day and worked through the whole course since then. Switching to web development while still being at the very beginning of my journey of becoming a Swift developer might not be the smartest choice but I never claimed to follow a thought-through master plan in regards to my learning, so whatever.
Before we get started: These are my current thoughts on getting into web development as somebody who has only a basic understanding of HTML and CSS. These thoughts will be different in a year from now. Cool your jets and consider this as something like a user test for the question of “How accessible is becoming a web developer?”.
Web development is a pain in the ass. You need to understand what a terminal is, what it’s used for and how to use it to even get to the point of asking yourself “What the fuck is NPM?”. Then NPM needs to be installed which feels like hacking the Matrix, since it does something somewhere but you won’t see anything but lines of text in your little terminal window into the soul of your computer that you’re afraid to touch because what if you sudo your SSD or something.