Should you use Next.js?.

Tom: Hello and welcome to Episode 21 of the Make Things Better podcast. Today I'm joined by two colleagues of mine, Nick Tsim and Stuart Bennett. So thanks a lot for coming on. Do you want to start off by telling us what your job roles are at Hive IT?

Nick: Yeah. So I'm a Senior Software Engineer. Yeah, I've been working here for maybe like six years now. Yeah, it's been very good. I get to work on lots of interesting stuff at Hive.

Stuart: And I am Stuart, I am also a Senior Software Engineer. I've been here only 3 years, working under Nick's wing. Primarily working on the front end side of things working with a lot of Next.js which we are going to talk about today.

Tom: Yeah absolutely, so how much experience do you have using Next.js then?

Nick: Yeah, quite a lot. Like now, maybe five projects at this point in time. Yeah. So quite a few. Like for example, one of the big ones we use it on is Department for Education under Explore Education Statistics Platform.

We use it for front end there it that makes everything super fast, it's great. We also use it on Weston Park, which Stu has had quite a hand in building.

Stuart: Yeah, yeah I've been thrown in the deep end there and I am really enjoying using it.

Over most of my time over the last three years with Hive, I have been working with Next.js and yeah I have been enjoying it.

Tom: So yeah it will be good to get into Next.js today and as you guys know I have almost no clue about it. So I am sorry that some of my questions may not be the best, but anyway, my first questions for you both is, is Vercel, because I know Vercel is built by the same people who built Next.js right, but is Vercel the best way to deploy Next.js apps?

Nick: I think for most people it is because it bring a lot to you, out of the box, so you can just get started, up and running and so for new people it is like as easy as connecting up your GitHub account and clicking your repo and then it just deploys it like magic basically.

Which yeah, back in the old days, a lot of this would involve a lot more knowledge about how the deployment process works and building stuff and what not. Where-as a lot of it now is so much easier.

Stuart: Yeah the short answer for me is yes. You just link it up and yeah. I suppose there is a cost associated with it. I don't know if you could reduce those costs if you put your own stuff together to get your website out there, but I don't think you'd really make much of a saving by doing it that way. So I would say yes.

Tom: So, is saving the only real reason you wouldn't deploy via vercel?

Nick: Well, in my experience, there has been a few cases in the past where vercel has been not the greatest. So, for example, they have various limitations on how long things can run in the background. So, if you have a request, it can take too long and like kill your request and throw a nice, ugly error screen instead. So there is stuff like that which is not great. They have limitations around stuff like environment variables and configuration which can kind of, almost be a project killer in some cases.

So, you need to be a little bit careful sometimes about that kind of stuff because it makes you make workarounds. In which case, you really are just forced to jump off vercel onto other platforms. Fortunately, Next.js can be deployed on other platforms.

So, in a previous project, I used Google Cloud Run. This is not a very common use of it but it worked pretty well to be fair. So, it is not impossible to deploy it to other platforms.

Tom: Yeah, Stu, have you ever deployed it via a different platform?

Stuart: No, I haven't. I've only ever usedvercel and it's all been really kind of smooth. I haven't really been in a situation where I would find those limitations that Nick has just mentioned.

Nick: There is another big one though. If your site becomes really popular, the pricing becomes a bit crazy. So, yeah, that's where more aggressive caching is required. Because, yeah if you have a Next.js site and it becomes really popular and you haven't really thought about the traffic and the implementations of that on your bill, you may be surprised to come out with a $300 bill one month, up from like a $20 bill the previous month.

Tom: Yeah, so I heard like Starbuck, Uber, Netflix are all using vercel so do you think it is costing a lot of money then?

Nick: Yeah, but also for them those costs are going to be like nothing.

Tom: Yeah of course, I mean costs are going to be so little compared to profits.

Nick: I guess it depends on the scale of your project, so we work a lot with charities and non-profits so I guess keeping costs down to a minimum is usually a good thing.

I've worked with one non-profit where the bills were just always above the base rate. And, for months and months I was working really hard to bring those costs down and put bits of caching everywhere to kind of reduce the overall expediture essentially, which was a pain, I won't say it wasn't.

Tom: And to improve how Next.js is used further, what tips would you have for anyone who is using Next.js?

Stuart: I suppose for me, I'd say if you are using Next.js and you are relatively new to it, learn about the different types of rendering which are available to you. I suppose that can reduce the load on the server to present pages to you and reduce costs as Nick just mentioned. So, there are two main types, possibly three, there is static rendering and server-side rendering of pages. I suppose that's why Next.js really exists because unlike React, it does the server-side rendering for you making it easier.

So, yeah look into that early on.

Nick: I think one of the main improvements that Next.js has really brought is Interactive Static Regeneration which I'd say is one of their killer features. So, we've used their framework for React server-side, so React is an example of what our website is built with. So, our website is built with Gatsby but there are a ton of disadvantages to rendering in that way. So with Interactive Static Regeneration, or ISR, means that you can have really quick build times. If a user comes to a page, only then does the page actually get cached and that's like one of the main strategies for actually deploying big Next.js apps.

Especially, on vercel as well, you don't want your build times to be really long because there's also limitations on that. There are a bunch of things you need to consider in terms of the caching and the time that things take. So having that whole ISR feature is really useful.

Tom: So, is one of the main advantages of Next.js over Gatsy, how fast it is to deploy?

Stuart: I suppose that is what the Interactive Static Regeneartion is, I don't know if Gatsby can do that can it? I remember the build times being quite long.

Nick: Yeah so we have like 20 minute build times on the Hive website as it stands. Where-as a lot of our Next.js builds can take less than 5 minutes. I think the main difference though is that you can also do a bunch of server-side stuff that you can't do with Gatsby. So, with Gatsby it all has to happen at the build, where-as with Next.js, you could actually just have a page that does something completely different every time you visit it. With Gatsby, you just can't do that essentially. So, yeah there are quite a lot of advantages of using Next.js as oppose to Gatsby.

Tom: Is there any reason you would use Gatsby instead of Next.js?

Stuart: I probably wouldn't, but that might just be based of my experience with Next and because of how comfortable I am with Next.js so why would I go elsewhere now? But, also like how Next.js is so much more popular now that is a bit of a tell as to it being better. So, yeah for me, I would always go with Next.js and I am quite an advocate now. If any of my friends want to learn some web development, I am like go and learn React, go and learn Next.js.

Tom: And talking about if your friends are learning a react framework, would you say that Next.js is like the future of javascript frameworks?

Stuart: I hope so.

Nick: With the javascript ecosystem, it is very fickle. So things can lurch from one technology at the drop of a hat, within two years, everything that you thought you knew, isn't applicable to this new thing you have to learn and that happens a lot. It is called churn essentially. So, I'd say it's got a lot of legs though. It feels like it's been the best investment of time to learn, for us as a company, us as developers in general I think, compared to the other frameworks that we've mentioned.

But, also like front end in general, javascript has mostly coalesced around react as the main framework, well library to use and Next.js is like the framework for react so you have like the power couple bascially. But, not to say there isn't any other competitors. So, there are potential ones that have come up recently so there is one called Remix which I have been keping a bit of an eye on, so maybe at some point I will give it a go and see if it is a worth competitor.

Tom: And I know for some of our projects we've used Sanity as a headless CMS with Next.js as well, so how have you found that experience?

Stuart: Yeah so I have really enjoyed using Sanity, we have used it on the Weston Park Cancer Charity. And yeah it is super lightweight to get started and get running, primarily because all of the data is stored elsewhere via an API so you can just start the CMS if you want to make changes to the CMS or you can literally just start the CMS which will interface via the API.

So, if I want to get that project up and running with Next.js, you can literally just start and everything is up and ready to go. There isn't really any messing around and not really anything can go wrong too drastically.

So, from that side of things, yeah I have been really happy working with Sanity and the fact that it is all in javascript as well is quite a big plus.

Nick: The developer experience is really good. So, one of the main plusses is that their studio gives you a lot of control. By studio, I mean their backend UI, how you would typically expect a CMS. So, everything is defined with javascript and code and as a developer we have a lot of control over it. Where-as with other CMS's there is a lot of magic going on, like you have to learn this really complicated system of intricate, machine type of things going on. With Sanity, you have a lot of control over like if you want to make part of a page a certain way you can actually go and do that. Where-as with other CMS's you don't always have the ability to go and do that.

Tom: So, there is a lot of different resources and ways to make different pages is that right?

Nick: Yeah there is many different ways but we've mostly coalesced around using a block model.

Stuart: Yeah or blocks within blocks to create various different UI's. So, users can build like staff profiles, with the name, the role, bio and stuff. We can then get that data to the front end.

Nick: Yeah so the users can like pick and choose which bits of content they want on the page so like staff blocks or a block that shows a video or something. And it means we can build all that stuff as individual blocks and you know the admins of Sanity studio can choose what they want and pick and choose and create a page however they want. It has worked out pretty well, they seem to be really getting it as well. They are making some really nice pages on Weston Park.

Stuart: Yeah absolutely and as you say they have picked it up really easily. I think they came from Wordpress and were ready to try something new, so yeah Sanity for them they have been really happy with it.

Tom: Yeah I think it seems to be working as well. I noticed that donations have increased a lot as well since we've been using Sanity as a headless CMS on Weston Park Cancer Charity.

Nick: Well I wouldn't say it's all necessarily attributed to Sanity.

Tom: People's generosity instead perhaps.

Nick: A fundraiser or two helps.

Tom: Yeah some huge fundraisers as well.

Stuart: Using Next.js did actually kind of allow them to take online donations and for them to go and give that service to their own customers and donors, so yeah being able to use Next.js with Sanity in that whole ecosystem really made it easy to give them the tools that they need.

That has been a big advantage.

Tom: How difficult do you think using and learning Next.js is as well?

Nick: If you know react quite well, it is actually fairly easy to transition to learning how to use Next.js. But, if you are starting off from scratch, learning react, you probably don't want to go straight to Next.js. You probably want to figure out how react work, how javascript even works if you are a real beginner and then you want to move on to Next.js because there's a more complicated part of it which is server-side rendering which is very different to how you traditionally work with react in a really vanilla way.

So, you have to consider how essentially react renders stuff on a server versus how it renders stuff on a browser and a browser is how a user typically uses it. So, you have to consider both to get an actual rendered page for a user.

So, there is a bit more overhead but I think for a lot of projects it is usually worth it, particularly because it improves page rendering quite a lot. Like, the speed of page rendering so the user gets a page faster, they have a faster user experience essentially.

Stuart: Yeah, I agree with Nick. Learn React first and then Next is next if you want to take it to the next level.

Tom: Oh wow. oh wow.

And so we have talked about quite a lot of positive to Next.js is there any downsides?

Nick: I guess I have ran through a few of them, but yeah some of the caching can be a little bit fiddly. They have added new features recently. So, currently how caching works is that it is based on times, so you would have to say this page will cache itself in two minutes say. It would only stop caching two minutes later. But, nowadays, you can actually use an API to actually stop that cache essentially whenever you like it. So, the main point of that is that you might want to cache a page for a very long time, so you want a page to be cached for days at a time but only when someone updates part of a page. So, then the cache of the page is deleted so then you can have a really optimized page essentially.

So, that is one of the strategies I have used. So, you know that project where the bills were quite high I had to get a lot of caching in to bring the bills down, that was the strategy essentially.

Stuart: Yeah for me, I am quite happy with Next.js. In terms of Next.js or Gatsby, I am quite happy. I don't see many downsides, I am just team Next.js

Tom: Yeah absolutely, fantastic. So my final question for you both, Nick I may have asked you this before when we did a podcast a year or so ago. And Stu it's your first time on the podcast, so the question is, what can people do to Make Things Better?

Stuart: So, the first thought that came to my mind when you asked me that questions and I actually didn't know what that question was going to be. But, I think if you are in a position to help people take that step from academia into employment then you really should do that. And I feel like that's what I would like to do in my next few years especially.

Really help developers get into this career path or allow them to know whether that's what they want to do, and inform them. And that is something I really went through in the early stages of my career and so that's me being able to give that back as well and so that's what I'd like to do.

So, if people are in the position to do the same then I'd hope they choose to.

Tom: Yeah that's a great answer and for you Nick?

Nick: Yeah I am going to keep it quite relevant to what we've talked about.

Tom: Use Next.js?

Nick: No my actual point is to make website fast. My point about this is that a lot of websites are slow which isn't good because it causes more computation, more waste of processing power of people's computers. All of that is bad and bad in particular from an environmental perspective and this is quite relevant right now because this room is boiling and climate change is no joke. People need to be paying more attention to climate change and so in our industry we need to be paying more attention to making our websites faster. There are only benefits to making things faster and the climate issues are only one aspect to it.

Tom: Yeah that's a great answer and really relevant to this week with it being 40 degrees ceclius. So yeah thanks for both coming on, I've really loved coming on. Where can people find you on social media?

Nick: I am on Twitter @nick_tsim

Stuart: Yeah I am not really on social media much but you can find me on Instagram @stu.ben

Tom: Awesome thank you for very much so thanks for watching or listening (Or reading) and I hope you have an amazing rest of your day.