Episode 161 Next.js with Tim Neutkens


Name. Walk into the six figure developer podcast the podcast where we talked about new and exciting Technologies Professional Development Clean Code career advancement in more. I'm John Calloway I'm Clayton Hunt. With us today is Tim Newton's. Tim Is the CO author and lead maintain maintainers of next Jay. US and is the CO author of the MDX Library for dynamic markdown documents. He has a passion for creating scalable applications and improving the developer experience welcomed him think, Hey, thanks revenue. Why don't you go ahead and tell our audience kind of how you got started in the industry and how you got to where you are today yes so i. started programming at around fifteen or sixteen at contrary exactly and it was basically just building websites for my family and. Friends and all that Financially I? Started education in it management, which is completely not suffer engineering and. Basically in the second year that educational to do an internship. was very fortunate to get an internship at a Development agencies today mostly like Web Development at building websites all that And I basically Stuck around there. And so I. started building websites all that eventually decided to hire me. That turned out really well. So I Sorry contributing to open source. And eventually true breaking open SARS working on milk full projects from Bristol. As an open source contributor in my free time. Eventually, got to work fulltime on basically my hobby projects that I was working on the time which was next. And Yeah, been been doing that ever since which is almost straight years ago. The shorts I just. Ask Pretty Cool again, getting paid full time to work on your hobby projects is awesome. So, in your bio, it says, you're the lead maintain her of next Jay Aston, Co author of the MDX Library. What are what are those four? What do they used for? What are what are people that know them know them for inter interested in about? Yes. next is a a framework that spelt on PUFF REACTS WHICH IS A. That facebook released I, think I believe six or seven years ago and Has since gone massive adoption into javascript. And next is basically a framework that built web applications and websites. And a basically provides all the bits that react doesn't provide CAS reacts is just the Ui Layer so to render your I must say. I of the web application but to actually build a soul, react APP you to set up a lot of other things like compilation tree wetback, which is a butler doing transforms your codes drew battle to make sure that erects O'Brien. all that kind of things. And this is a list of setup that you have to do noah ballots and like new heights optimize no I have to set up as well And like all these stills combined early like complicated to make were make them ripped together well and and like. Basically optimize hard on as well as like all go did you ride has to be? Split in different bundles and like you need to know how to deriding L.. That As the next takes care of like all these missing visas that you don't get react basically as it tries to you as a developer, a USO development team into the pit of success. I consider myself a dot net developer of web APP developer but with that, of course, I've reached for Java script whether it's Vanilla Javascript or J. Query or you e. or react or angular. So it seems like there's there's some there's always some component of a Java script something piece that I'm working on and more recently been focusing mainly in react for front end applications front into my dot net back end with that a typically reach four something like create react APP, and the sixty thousand packages that hit brings in itself for the sixty thousand miles that it brings in is is next like a create react APP or is it more than that is different than that? Yeah. So create your. Really designed as a starting point for a reacts application. So what you get with your stuff is like you get some setup but not everything like you don't get routing and like pre rendering select service that rendering generating content really helps you like get started with reacts very fast, but it's like in Mississippi says that light to go to production really well. So. Basically, like code splitting by default. Routing like assets doing a bunch of other optimizations and this is like we're we're next Phil says gaps and also tries to provide you with a recruit developer experience overall So it makes it really easy to set up a reacts APP with just next. She to go from like, Oh, I want to built my trait react up type application, which is only client side rendered in brighter. But you can also go to another page which has been service at rendered or cynically generated that full-time. go like a whole spectrum basically of all these different rendering targets. And builder up with those. So, with next sense, it's I dunno, it's. So it's built on top of the react library to provide those framework features how different is the development for someone who's familiar with something like react APP is there a big learning curve or is it pretty simple a simple? So basically what it does is it tries to get out of your way in many cases. So when you get started you basically basically get a Minimal. Directory structure which is you have pages rectory, and in the pages directory, you create files and every file that you create. There is a different route. So so you create pages, Abadla Jess. You about in your application. Than what is in that file is actually just react component. So there's no specific next year or anything when you get started is just three ex-combatants. Den, what you could do is you obviously want to like ripe between us rats, right so so you might have bad teaching linked to your homepage as he created a pages index legit ask as well. You went to link between them. that's the point where you actually like import next. Yes. router site like next link in the skies. which is a link component that allows you to client side transitions to your homepage, for example. So when you say hatred is slash and it automatically becomes A. Riotous clients that transitions instead of like when you click on edit goes like tour Basser to that other page. And then what next can also do based on? That is actually like optimize that's transitions by preloading D- Jealous Skirt Bundle that's needed for page Winston report but also preloaded data if like the data available for example. Okay. So does some kind of inspection of your component and goes Oh, it links to to this page in that page that page go ahead and load those or you can tell it to go ahead and load those components impossibly any of the information that those components would load. As, really cool What about what about route parameters? I, mean if it's if it's just a an about dot J. file out of you say that Oh will about needs an ID in order to work. Right so say you have a An example is like you have a blog that has a dynamic slug that you need for to render those specific veges. So what you would do is you would create a base rectory with in a block directory. Because you can nest these rights in an interlock directory, you create a style that is in brackets. And then like between those brackets type slack, for example, which is the Bremner that you want to capture. and. Then inside of your reacts Component Jackson that slug as dynamic parameter. So if you go to slash blog slash hello rope, you got the hello role parameter inside of And then next. To data fetching methods in order to do service at rendering or statically generated content. Okay. So the the file name is actually the parameter that you want to restore parameter or parameters that you want to receive. Yeah exactly. That's really cool. Yeah. So it it basically gives really intuitive way of looking at your complete ride structure 'cause. Really, the thing that you do is you open up the pages directory and like any application built on next even the ones that you've never looked at before and you're actually immediately know what the right structure looks like because he can just see based on the directories like these rights exists and they need these spreaders. So no surprises when you when you open up an application that maybe you haven't historically worked on before. Yeah exactly, and then UNCIVIL 'cause her based on pages. You basically get coats leading by default. So what this means is every single page that you create. So every single reactive create inside of pages to route is code splits. So this bundle for like the about page like if import very heavy MPM library, there is not going to affect the size of like your index page or any other page for that matter, and this helps wave like basically like if your application skills up to like say hundreds of pages, you don't want to have like one team import like the library to use case where an effect like the homepage of fear website, which is just the marketing face, for example. So. That is all built in by default and. Generally when you get sorry it with reacts build completely custom Yes to be really aware of like all these different pitfalls in our to like not make mistakes ship your like basically the whole application to your homepage. Next tries to help you prevent that from happening. Seems like the direction that is provided by javascript developers by library developers by react developers changes. So frequently because we we were learning so much we're changing our minds we're figuring out what works well, what doesn't work? Well, we're experimenting we're learning we're growing. I worked on an application that had a rather large react front end that was worked on by many different teams that had to coordinate those changes in those libraries and make sure that we weren't bringing in thirty seven different underscore packages or something like that. You mentioned that next day s tries to stay out of your way but but it also helps you fall into the pit of success. Is it opinionated in the right way in the in the just correct way that doesn't get in your way, but makes it abundantly clear what what is expected of you and what you can expect the framework. Yeah. So obviously that's super subjective to the person you asked about in my opinion, what we tried to do is It's tried to get out of your way, but give you all the tools needed in our to achieve what you want to do. So what this means is like next building rider instead of like you having to find a writer on the on empty on the Internet read like all these different articles in order to be able to understand what you want to do. And then Bisley or attached to decide or forever, and you have to figure out like. I have to do certain things in inside of that scope with next actually gives you this rider by default, for example, and we tried to optimize it as best as possible. And victory basically like because of having control over to rider, we can do all these like other optimizations like the bengals splitting, for example, So like splitting. been also like just up to. Mayes. Sees S., for example, like sees loading or unloading that. Severely like everything ties together in a certain way. But we tried to get out of your like. If your way as much as possible like in the end, what we generally see is that people end up importing just a few of the next libraries that you can use. The is so like next link for example is. Often, you to link to paid so like that's being used. and then the router itself which can like import as well. But besides that, it's like a very small API surface. For Your for you as a developer. But then like in the background, a lot happens that you are like, you're aware if you read the documentation, but it like tries to get out of your way and optimize as much as possible without you interfering configuring anything, but it's like. Okay. So so this is going to go a little deep, but one of the things that's common with larger applications lease applications that I've worked on is that you have multiple teams like John said earlier working on the same application and one of the best ways to keep those teams from stepping on each of the each other's toes is to. Are Well, at may not be the best way, but it's a way is to break the application into multiple parts so you might have. Maybe an M. package on your internal company server that has the admin section of the application, or you might have another package that has the shopping section of the package that has the articles section. If a company was in the habit of doing that kind of thing is there is there a way? To get next to realize that this group of pages is in this package and they need to be at this. Base Route let's say they were built with next in mind and they had their own pages folder each each package does Ryan and then, but you want to say, okay, we'll the admin. Pages. Need to be at the base adleman route. But then you know like their pages folder is just users profiles you know whatever is there a way to do that natively or is there a way that you could swap out? Parts of next Jay, s to accomplish sound. So. There's basically multiple ways that people generally softest there like the very common way that you would end up. Creating a application like Mona Refocus. And like if you want to, you could have your whole site split up the pages in one next application. So this happens fry commonly like basically team ends up like specific teams are. Basically. Have the responsibility for different pages that are still all in the same page directory and the Nice. Thing about this, your dependencies are always like the same Rennes in the same application context. Can share any code between all the teams, right. thirsts, utter cases where like some companies are basically like over going to split off the team they all have their own code days they all have to maintain it themselves We don't want to like get any sharing between any teams because they could leak something from another team that they're being the building right Very large this generally speaking like fortune five, hundred companies that just don't want to leak any of the new products that are building for example, right? So what we see in those guys says, she can actually have multiple next. APPS. Renting on a single domain true like setting base PA, for example, and what they would end up doing as they would deploy the these like. I like micro front ends, but not really would just deploy separate applications running on next. which is also supported. So recently introduced. Previously, super Super Complicated But it took a bit of work to set up because she had like chainsaw your links and all that. But recently in next year night when five we introduced a Bay spot option just sat. On going to host this on Sledge Edman. An every rods prefixed by slash admin entered enough to set up anything else yourself anymore. So really liked for we're still trying to cover this case better. The, there are many ways to to go by basically. Yeah. So what is the deployment story like what how do you manage building compiling code splitting? Are there specific demands that developers need to know about and be aware of right? So next basically split up in tree different commands. So the first this next staff which is for your development. So you ren that to get out much a replacement react foster refresh, which is a specific feature. Of Free Act that we built together with the facebook team into next which should be preserve states. So say you have some state inside if you're combined, you basically have taps, for example, a click on one tab and at. The state but then you make a change, your coach and you would immediately see receptor to the first initial value which is not as predicts as she could be so foster actually to determine ethically. Save these values like dead, the states basically between ultralights. So every time you make a change immediately reflected with the TAP still being open. Did you open before So that's one of the things it's for development. Then for production built, you basically have next built, which is building the application for production and then nurse next start, which allows you to start production server. And then in terms of deploying for sale the company behind next. Yes Had basically have a deployment platform that alive to very easily deploy next steps which. Basically. Get to deployment previews on requests. And then also like every commit get say separate deployment. So you can basically see every change you make an NCO to your colleagues. And then when that's merged to muster or the main bridge, for example. It is automatically put into production. and. It's being used by free large companies and very small companies as well. And it's basically the best place to host next because we also built the framework. But you can definitely host next on like any no deployment bless prominent you could think of. So that goes from like it'll be easy to to like digital ocean that subtracts Does. Like next, rex completely fine on those from really no luck in in in this case, like you can just deploy your next step anywhere But if you deployed on for Sal, you got some out of the box set up. That is really like going to light you to Rick Foster basically on your application. And you mentioned that there are some some large companies out there using next year or some smaller companies. Of course, some of the case studies that I saw on the website included who and marvel dot com can you speak to? Be Like, are you involved with helping those teams get up to speed or what does that have been like? Yes, are in touch with many of the larger companies that use next essay tend to reach out in one support in some way. So it's definitely something that we help I'd with. Santana food for example, they they ran basically like what you're talking about before like there's multiple teams building all these different services. And Davis physically, their whole web property is running on next. So discuss from the the homepage to to basically their whole web player. Like waiting to see where you what series all that to like alder FAQ pages or customer support like all that is running next. Gets Marvel like it's their main website that rental necks. And those many other like really large like Alexa top one, hundred or Alexa. Top One K ranking sites I think the biggest is one in China which is called. Q Dot Com which is large don't premiums. In the world is like fort in Lexus plundered, which also running on next which is, yeah. We're we're seeing massive adoption from like creating large companies, but also like the long tale of Smarter websites like my personal homepage I love h is also running on next. This is really interesting to see that. Basically, the framework skill to like the needs of the re large companies, but also need self like smaller websites and like personal homepages that. Do you think that that has to do with the the ease of use the the low barrier of entry, the the lack of pain in getting up and quickly. Yeah. So I definitely think that it's related to that. You can basically like scale up the Patriots concept to like hundreds of pages. Without affecting like the pages that you built before so Even, if you look at the for sell. Website itself in a dashboard the Pires it next was initially built to power for salvage fort. And for selfish for like over three hundred pages or so. and. All of these are different types of UI I. Like sitting together nicely inside of this next step, which is still a single next step, which also fires boxing ages our blog everything basically. Really like right. Next shines is that you can choose per page if you're going to make it static or dynamic or like clients that rendered and all that, and I think before we started recording, you mentioned that the new version or the next version is is nine point five working on incremental static generation that involved in this story as well. Yeah definitely So the way that basically like let's recap like you have studied generation or service that rendering. And setting generation means you generate the page at bill time right so you read next built and this h h comes out and the surf to your clients. the problem with that is that you can't scale this up to like hundreds of thousands of pages without affecting your bill time. So renting next bill come slower as the more pages ads in this case right serves at rendering, which means forever user that comes in like I go to websites I got special Taylor's response for like my requests. Then you go to website you get the special tater response, which could be completely like clear same response but has rendered every time. Share, basically, like burning CPU cycles on generating the same outcome every time. So what incremental steady generation does basically two parts. The first is it elected to generate static fouls on the month? So you go to page hasn't been steadily generated but the developer already knows that it can be cashed in a certain way. So it can be for like one second or ten seconds or something like that. In that case it will. Serve you a response and then every user officer net gets aesthetically generate response that you got before. Than the other part is, how do I get these statically generated pages to update right like I'm some changes in my see s like red press or like any hosted cms think of. And I need to then rebuilt my sites right I need to run next build again. This country to this 'cause you. You basically rebuilt like the complete side like every single page that was already generated and didn't. So. What incremental steady generation election to do is basically regenerate that single file when new user comes due to websites. and. The way that works is that ease stillwater revalidate cement ix wages, the Header directive that allied to like, say you go to a website. And the time Audi sat like one second for example has expired. It will go and surface stale response. So basically, the previously generate response. And then in the background like outside of the users like request in response cycle. It starts generating the new response. And this nearest funds is then sent to every user comes after you as the user that triggers regeneration. So that's good about that is that you don't get this. issue where you get A. Like, for example, really high load on your web server. Ties of people are on your like website they all refresh at the same time and they all get this. like for generating that that one page if the time was was expired. Now. You get the maximum one re-generation. Across like all these users that are request new website because they would still response until the new response ready. which is generally what you want. If you like your company is up super Like Solo Thailand in the sense that changes every like of milliseconds or something like that. Because if it's if it can be a updated more than once or like if it doesn't update more than once per second, you can catch it for one seconds at most makes sentence. It's Scott slightly hard to grasp in yeah. If anyone wanted to learn more about next and possibly start using it for their work what are some resources you could provide? So we have this built a built in learn course. So if you go to next door, learn you committee get started with like all these concepts are explained in this very interactive Terrell for you. So. What happens is you website you get this very short like explain nervously but look what next is and then you go through the course like let somebody lesson and you get points. For every lesson that you complete our strike issue to keep going until you complete the whole. Course and then like autry you've done that you know pretty much everything there is to know but like all the API that you. Can Use to built next application. So that's all built in and then the documentation itself is like a separate section on the website, which you can also retrieve ns very detailed guide some like what set setting generation is for service. And all that. Perfect. And before we start to wrap up here, I wonder if you might have any advice to those looking to level up their career whether it's just getting started or just looking to the future because it's not often that that you can find a company willing to pay you for your own personal projects. Yes for me. It was definitely like I. I just got started contributing to open source and. It was like even at the time for cell wasn't hiring at all. And there were just a small company San Francisco with like ten people working for them. And obviously just start working on next because I. Find Interesting Doing basically famously. Wants to learn more of a javascript. And just find super interesting to help people like six bucks that were recorded all bets And eventually a year later Shermo which is the CEO for sale He hired me to work on next full-time so. It's really like a story of. Like making your luck almost that. I just I wasn't really like my attention about to get hired to on this I was just like this is a fun hobby project. I'm going to work on Says I. Find It interesting. I was learning tons helping people and also like just diving into the cut base. is next is built on. So pathologies like. Compiler compactor and Butler's and all that which had no experience with And eventually it just like Rick. South. Advice on what to do what is the this way to to get hired source or anything but from my experience just like doing what you enjoy recognized stars is Sri is society rewarding And yet it's the freemen chip. Her high. Thank you. Is there any social media accounts that? You WANNA share in case somebody wanted to reach out and either contact you to about next s or just follow you so that they can get new updates. So very active on twitter. Where you can find me I'm sure that you'll put in his show notes at my full name, a touch states that are. Very simple to find in that case And besides that we have a blog for next, which is next which always has. The latest releases. if you have any questions, you can go to get up DOT com slash sales slash next. Yes. Slash discussions, which is get up discussions which is basically a community platform that gives us building that likes to to US questions or US for help Discuss other contributors, other people using EXE which. Tremendously helpful if you're like starting is And ever launching at conference phrase soon, like if you're interested in dad, it's completely free. You can find it on next sledge cones. Already, over twenty five, thousand sign up so far. As check this morning. So Yeah it's going to be early event. And looking forward to it. What's the timeframe for the conference? It's on the twenty seven of Tomer CEO slightly over two months from that. Perfect. Well thank you tim really appreciate you taking the time to speak with us today. Totally. This'll. Sorry. That was Jim Newton's. Tim Is the CO author and lead maintain her of next year? Yes. Is the CO author of the MDX Library for dynamic markdown documents. He has a passion for creating scalable applications improving the developer experience. If, you liked this episode, please like rate and review on itunes. Find show notes blog post and more at six figure death dot com. And catch live on twitch and be sure to follow us on twitter at six figured of. This has been another episode of the six-figure develop podcast helping others re potential I'm John Calloway I'm Clayton. I'm done at.

Coming up next