Next.js Conference 2021: What is Next.js? And other questions you might be too embarrassed to ask

Transcript

Note: The following is the transcription of the video produced by an automated transcription system. 

Welcome to the Konabos video hour, if you will, but it won't be an hour. Akshay this week was the Next.js annual conference and I saw a lot of back and forth in our Slack channel. Excitement about it from our technical folks were very technical. I'm going to ask some silly questions because I work in tech. I've been in it for 15 years. I don't think I fully understand this part. So could you explain first, what does Next.JS mean?

So next year is a framework which lets you build applications. So next year basically uses react as the base and you add next year on top of that, and then you're able to leverage everything from the React based functionality. But next, add its own secret space. On top of that, which is unique to just next. There's other technologies like this, like Gatsby, for instance, is another way of building sites. Next year is another way of building sites. You could do it in pure react as well, but that's what Next.js is.

So this might be very elemental, but in the past when we would build websites, maybe 10 years ago, right? Or even some still do this way, the way I would always go through the process, very waterfall based. You go through a design period, which is done in Photoshop and PDFs. There's certain tools you can use to showcase these to almost make it clickable, but it's not HTML. Then those would be approved. Those would be turned into HTML, CSS and then that HTML CSS would be for lack of a better word, ported to a WordPress, a Sitecore Kentico. Where does these? What are these terms Next.js react? You brought up, I always hear that. Where do those come into that old way of doing things?

So you would still have a design system where you design how it looks? Talk to the client or yourself if you are the customer, get everything straightened out, laid out brand guides, all of that work still the same. You still have to take that and convert it into some kind of a markup. So in the traditional sense, they used to do HTML, CSS, JavaScript and jQuery right in the in the modern sense, you can use stuff like markup, which is HTML with tailwind and all of that you. Nowadays, you use an additional layer to bridge the gap between the markup and it being used in some kind of its system where you write the code for it, right? We all we've always had that if it's WordPress, it's PHP. If it was Microsoft, we use ASP.NET. So in between, we now have tools like storybook. What they do is they take the markup, chop it up into components and put it in such storybook, which lets you still, it's pretty static. Nothing is dynamic, but it's pretty static. But you can see from a component perspective the different variations of a specific component and then play around with it so you still can coordinate with your customer or your client. Go around, still go back and forth between the design of the markup and the story. Book until you're happy and you can take those components and then now feed them real time data and dynamic functionality. That's where tools like Next or React or Gatsby. or whatever that you're comfortable with. Even net comes along is where you are saying, OK, I need to pull it from system x system y. Why take that and then hydrate these components and make them behave in the way you want them to behave?

So Next.js was a part of these more traditional builds eventually correct.

But yeah, whatever technical like, you basically replace what we use PHP in WordPress for.

Got it. So now we've moved in the last five years as we always discuss right into Jamstack. Headless, ComposableDXP. Is this where the magic of Next.js and react really come to the forefront?

Yeah, it does. So like the evolution of the Jamstack picking up composable DXP coming through. All of this is helping Next.js propel to the next level. It's very, very popular. There are a different popular tools, but next year is one of them, which basically is helping us build those static sites, which are really not static. They're dynamic. Or a hybrid in a way, so they are able to update themselves dynamically, they're able to provide functionality without being too heavy on the infrastructure. So all the benefits of the composable DXP stack and jamstack right next year is a core piece of it which helps you build those solutions.

Yeah, I hear that term a lot with the with this world static sites. Does that mean exactly what it sounds like?

Yeah. So it originated with it being. Essentially, we could have done this 20 years ago. That's the thing, right? So you just needed HTML. You needed some JavaScript, which basically made a call and say, Oh, you know what? I want to show a picture, give me a picture. I want to show a piece of content, give me the piece of content, and you just dumped it onto the web page. Essentially, you're doing that, but it's a much more complicated and microarchitecture way where you could do things a lot easier, a lot more safer. It started off by being pure static, so the. One of the modes is you have pretty much like three main modes, one is, you know, I want to do pure static, which is you take all of the data dynamically. If you have dynamic data and all of the content, churn it into your components. Extract out HTML. Fast, easy, you can dump it on any hosting provider for a small fee, and it'll be super, super fast. You can always add, you know, JavaScript elements on top of it to make it a little bit dynamic.

But for all intents and purposes, that's a static said generation. And the other end, you have server side, which is everything runs and it's dynamic. It's always dynamic from a pushing content perspective. So if you look at these two at this moment, if something major change from a data perspective, you would have to rebuild the static site to regenerate the static site again, whereas on a server side rendering part, you don't have to automatically update itself because it's running on the server side every single time. And between them is what called as an incremental or incremental static site generation where it generates a static site. But from time to time, it makes a call to say, Hey, did something change? Something change? And if something changed, it would update itself and write, that changed. The changes to disk. So that means it's operating part static and part server side, essentially what it is and everything in between. So you could do a combination of all of this as well and make it more complicated.

So I know we have our logo everywhere. They're always in the mix. Here they host the conference, who is virtual.

So virtual is the parent company, which. The evolution is different, but essentially Vercel currently owns next year and the build for it, the devs, it's technically the repo is available for everyone, but for Vercel is the kind of like the parent if you want to look at it that way. But Vercel also does other things so you can host. So Vercel is an amazing company. Their product for deployments hosting CDNs is amazing. You can deploy projects which are not just Next.js, you could even do other technologies. So you're not just, they're not, you know, it's like Netlify . Netlify lets you do it in different technologies. Vercel does, too, but because next is their baby, Vercel does Next.js hosting a lot better than some of the other providers available.

And, you know, growing up in this hosting has always been a big part of these traditional pieces as well. How is hosting? Different, maybe less heavy, if that's a word less onerous. How is hosting different in this world?

Yeah, it's a good question. Like we come from a world where you're spending either like 20 bucks a month to do like a WordPress hosting or you're spending a couple of thousand dollars a month hosting a server in Azure or AWS, it's pretty resource intensive. You always have to keep an eye out for it, making sure everything is running. But in this tech world, it's changed everything. Everything's changed because you're constantly calling these microservices, so you're calling a headless commerce to get commerce information, Headless CMS has to get serious information. You're calling SAP. You're calling some of the providers to give you marketing automation to all of these headless services are helping you do things. So what it does is from a hosting perspective, it's all done on the edge on the CDN. And so you do your stuff, publish it. All of these files, which are required to run your site, are running on a CDN and provider, so it's the fastest. You're very close to it every single hit you're trying to like. If your customer comes to the site, you're not running things on the server to give them something which is in the traditional sense. That's what you're doing. That's why you need all of these server resources in this new methodology. I don't even we have like so many production sites running with millions of hits a day. I barely look at our hosting on Vercel because it just takes care of itself. I don't have to be worried about it unless something goes wrong catastrophically, which hasn't happened yet. But that's where it's pivot to do in the sense that most of the things which run on which you need on the page are either pre generated or generated on the server side and taken care of or are happening on your machine as a user when you're browsing the site.

I have two more questions, this has been really helpful. The first question is you use the word on the edge, you hear this a lot in the articles and discussions. What does the edge mean?

So the edge is the edge network. Basically, a CDN is all of these different computers all around the world which are hosting your output. So assume you have a home page? Matt McQueeny e-commerce home page Instead of in the traditional sense, you would just have it on your server if you cast it or whatever that is. From a CDN perspective, that home page is not just on your server anymore, it's on twenty five different locations around the world. So someone sitting in Queensland, Australia, going to Matt McQueeny.com isn't coming to your server in the US or Europe, for instance. They would go to their nearest endpoint, which is, I don't know, Sydney, for instance. That's where they're getting your site from. So the Edge network is basically that where it's distributed computing all around the world, where your pages are cached for people to get access to that great.

My last question again, going back to my, you know, when I used to walk to school in the snow without shoes on time of life, I always conceived when we talked about that waterfall approach, I always conceived as almost the back end developers, as we would call it, as being the gatekeepers in a way. And then the front end developers were just another input to the back end developers. What I'm seeing a lot and maybe I'm wrong could be a dumb question. What I'm seeing a lot with this, with this, this Next.js, especially right and the headless world is that the front end developers are in some respects equal to, if not more important than the back end developers. Is that a dangerous thing to say?

No, not really. I think it's evolved in the sense that there is a place for back end developer still. So the myth is you no longer need back and developers in a Jamstack world, it's not true. Because there's still a lot of integrations you need to do. Still a lot of finessing of data, you have to move a lot of server side functionality in terms of like azure functions or lambda functions, you need to write. So there's still quite a bit of work for the back end developer. I would say more on the frontend developers role has changed a lot to more of a full stack developer where they're no longer just doing frontend work, but they're also writing their own serverless functions in Vercel or Netlify. Whatever that is, they are doing almost like a full stack development where they are going beyond just taking care of the front end to also supplementing, getting the data, processing the data, doing the integration. So there's an evolution there. I think both are equally important and but still have a big role in this Jamstack world as well.

Well, that was great. We got in under 15 minutes here. I learned a lot and I hope those watching and listening do as well.

I hope so, too. Thank you, Matt.

Thank you.

If you have any questions, please get in touch with me. @akshaysura13 on Twitter or on Slack.