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.
Continue reading “Adventures with Route Handlers & request methods”