Search for a command to run...
Hey 👋🏻 !
I'm Kevin, a full-stack developer running a digital prototyping company with my business partner called Spin Up.
When I'm not consulting and building for clients, I'm writing content here, curating my newsletter or creating videos.
Outside of work, I enjoy handing out with my wife and sons - camping, hiking and kayaking or just curling up with a good book.
No comments yet. Be the first to comment.
We'll discuss why React applications need servers and how to build them in Next.js without using a custom server.
Have you ever been tempted to hand over your car keys to a stranger? How about your Facebook login details? Your debit card PIN? Each of these are ridiculous scenarios - you wouldn't even contemplate them. When your application contacts other service...
SVGs are great! They are scalable vector graphics. As they are vector based they can be scaled to be huge or tiny and they won't pixelate. They are made up of XML describing the paths and shapes needed to make the final image. They are an excellent c...
One of the strengths of using WordPress as your content backend is that you have a lot of choice. You can decide where to host your instance, how to organise your content types and how many different users and roles you want to introduce. I don't kno...
I realised last night that I've been writing a lot about why Headless WordPress is a great solution but haven't been clear about what headless actually means. Every website or application that you use is made up of at least two components. There is t...
I think being able to code is a super power. I also think that we are often too quick to use this super power. https://twitter.com/dolearning/status/1319262958279643137?s=20 A week ago, a friend who works for a charity approached me. They were using ...
I'm a big fan of the JAMStack and WordPress. I think they are excellent companions, adding value both to content creators and developers. I'm glad to say, I'm not alone. However, it doesn't take long before you come across the view that this combinat...
In a previous post, I discussed why we need servers for our frontend applications. There are lots of reasons - security, performance and convenience being high on the list. The React developer is left open to choose for themselves whichever backend most appeals to them. This is freeing but can add to the decision fatigue that faces developers from time to time.
Have you heard of Next.js? I imagine you have but if you haven't, Next is a framework built on top of React. It seeks to make some of those decisions for us and make development quicker and more productive.
I love working in Next - from server-side rendering to file-based routing - I feel like I can speedily create solutions and add value for clients.
A few release ago, Next introduced API routes. These have been a game changer for me. Previously, I've had to build custom servers to provide for my applications. Now, I have a straight-forward and speedy way to handle these tasks.
The API routes follow the helpful file based routing paradigm that the rest of Next supports. Creating a file in the /pages/api directory will immediately create an API route.
// /pages/api/hello.js
export default function handler(req, res) {
return res.end("Hello!")
}
Visiting this route with a browser or API client will respond with a "Hello!". What a friendly API!
As they are file based, you can have dynamic routes as well. You place the dynamic part in square brackets and can then query it within the handle.
// /pages/hello/[name].js
export default function handler(req, res) {
const name = req.query.name || "there";
return res.send(`Hello ${name}!`)
}
Now our API is so friendly, it even uses your name! Hit /api/hello/Kevin and see "Hello Kevin!' as the response.
You'll notice that the handler above receives the request and the response. If you've ever worked with Express this will be very familiar. In fact, these objects both have a lot of the same helper functions and properties that Express users will have used in the past.
You can use all of your JS libraries and logic, you can work with middleware and interact with APIs. It's pretty sweet!
Not all of the helpers have been transferred from the Express implementation. Here's what has been:
The real win here though is deployment. When you deploy to Vercel or Netlify, each of these API routes is converted to a serverless function. How cool is that! You don't have to provision a server or keep it up and running. You are allowed a ridiculous amount of free requests that these almost always work out as free. If not, it will be much cheaper than any server hosting would be.
There are a few gotchas in moving from a custom server in Express to using Next API routes. I'm going to explore some of these in future posts.
Thanks for being here. Follow me on Twitter and signup to my newsletter below if you've found this helpful :)