What does Facebook, JavaScript and ordering a coffee at Starbucks have in common? Apart from java being a type of coffee and Facebook being compiled from script? Well, a lot more than you think.
So, if you think about it, Next.js is kinda like ordering at Starbucks. Think of the web client as a thirsty customer who walks into a Starbucks, and the barista as the server. Now, this barista already has a certain idea about what the customer may want ahead of time, after all, people generally want coffee and other caffeinated drinks when they walk into a coffee shop.
The customer may choose the pre-made double shot expresso in a can, which is an easy sale as all the barista has to do is grab it from the fridge, ring up the sale, and wish the customer a happy day. In this instance, the client has requested Static Site Generation (SSG) from the server, which is by far the fastest choice. The server has to perform little to no processing to complete the request, as it’s only returning pre-built content.
But then what happens when the customer wants a triple shot coconut milk iced coffee with an extra 3 pumps of caramel sauce, double whipped cream, and chocolate drizzle on top – AND 3 kinds of nuts and sprinkles? Well, the barista has to roll up their sleeves and get to work son, so they can bring this crazy concoction to life. This is the exact same thing when the client requests that a page is custom built at time of request, as pre-built just won’t do. The server has a job ahead of it, with Server-Side Rendering (SSR) having to sift through the static content, fetch the data required, and then expend processing resources before shooting it over to the client-side for display.
There’s a third scenario, and one we don’t really recommend you do next time you go order your morning coffee. The customer wants to Irish up their coffee a little, and orders a tall black to go – sneaking in a cheeky nip of whiskey from their hip flask on the way out. Both the barista and the customer do a little of the work to get the end result, the same way as sometimes there will be a process known as Client-Side Rendering (CSR) performed on the client side itself independent of the server. Though there are unique instances where CSR can be an advantage, generally both SSG and SSR are much faster and more efficient in the same way that it’s perfectly acceptable to have an Irish coffee during the holiday season, but indulging everyday makes you look like a bit of an alcoholic. Remember – drink responsibly.
What Is It:
Next.js is an open-source front end web development JavaScript framework based on the popular Facebook-backed React. The ability for developers to quickly create both static loading and dynamically rendered websites has now elevated Next.js status to one of the recommended React toolchains, thanks to its utility by adding a layer of abstraction to simple tasks within the framework.
Where React renders all content in the client-side browser, Next.js adds in flexibility by enabling applications to render on the server using its resources. This process works around some of the common issues associated with React rendering on the client side which we’ll explore a little later on in this video.
What It’s Used For:
Remember the Starbucks analogy?
The way Next.js handles SSG pages is still reactive, even if the content is statically generated. The client-side application has full interactivity with the content despite it effectively being a copy and paste job. Cast your mind back to that can of double shot expresso.
Where pages depend on specific input data and pre-built just won’t do, Next.js has the capacity to generate all page combinations for all the given inputs and variables through SSR. Again, this is like that monstrous custom iced coffee order.
The page content may need to be constantly updated if it has time sensitive features like real time stock pricing and charts, or something simpler like a chat bar, the CSR is the way to go – just so long as the majority of the page isn’t being rendered on the client-side. Next.js takes care of everything whether it be server or client based. It’s the nuance of difference between dosing your coffees with whiskey during Christmas, and having a problem.
Simply put, Next.js is a React framework used for developing single page JavaScript applications that can easily perform Static Site Generation, Server-Side Rendering, or take care of Client-Side Rendering.
PROS:
Automatic Static Optimization:
Next.js has a feature called automatic static optimization, which is a flowery way of saying the framework allows for hybridized pages that may statically load sections from the server, have others that are rendered server side, and yet others that are rendered client side – smart selection based on content.
Adaptability:
It may sound rudimentary, but the ability Next.js has to adjust the size of websites and apps to the size of the screen of the device is something fundamental that drastically improves the end user experience and cannot be understated.
Security:
Because some websites are statically generated by Next.js, there is no real connection to the dependencies and user data stored on the server so any sensitive information remains secure and protected.
Faster Dev Cycle:
Model View Presenter (MVP) can be created at break neck speeds in Next.js thanks to a host of premade components that allow you to not only build quickly, but also get feedback on the product so that the review process is nice and fast – not wasting any more time or money than it should.
Truly Cross-Platform:
Next.js based sites and apps are able to be accessed on any device – Windows, MacOS, Android, iOS, Linux, take your pick.
Short Loading Times:
The performance Next.js brings to apps via SSG is lightning fast as they’re copied over, but also when the pages themselves are rendered server side.
Huge Support:
Next.js is a framework that is gaining popularity, and being open source, the number of contributors is growing as well. There’s plenty of articles, literature and support available so no matter the issue, there’s likely someone who has thought of a solution.
TypeScript Support:
Remember life without TypeScript? Next.js configures and compiles TypeScript automatically, which is a huge quality of life improvement for any programmer who has cut their teeth on JavaScript vanilla.
Zero Configuration:
The application logic of Next.js based pages and applications is automatically compiled and bundled, a bias towards fast production to free up resources for other avenues.
CONS:
Downside Of Flexibility:
So, while all this Next.js flexibility sounds awesome from the perspective of the onlooker, the downside is that there isn’t much in the way of built-in front pages – meaning the front-end layer has to be created from scratch and from the ground up.
It Does What It Does:
Unfortunately, you can’t modify how Next.js routes through nodes as it’s limited by a file-based router, so if dynamic routes are something your project needs, you’ll need to use Node.js server.
Lacks A Manager:
Next.js has no state manager, so if you need a way to access and modify the application state then you’ll need a plug-in like Redux or Mobx to handle that side of things.
Which Companies Are Using It?
As it turns out there are a heap of websites that use Next.js like media rating site imdb, design site GoDaddy, and bizarrely a whole host of cryptocurrency sites like Binance, LebonCoin and CoinMarketCap that require a unique blend of SSG for the base site, SSR for user info and wallets, and CSG for constantly updating the asset pricing.
It’s worth going all in on Next.js solely based on the server side rendering alone. For too long JavaScript has been too focused on rendering on the client side, so Next.js developing and pushing that SSR concept really is a breath of fresh air.
The simple fact is that Next.js has become so popular mainly because it solved an age-old issue developers had with JavaScript rendering in the browser itself. By doing a lot of the work on the server side, the overall end user experience is greatly improved – but at the same time, Next.js still allows that CSR.
Make JavaScript great again? Done.
Where To Learn Next.js
Seeing how Next.js is gaining in popularity, and being touted as the next big thing in web development, 2021 is looking like a pretty good year to upskill – so here are our top picks for courses to help you get started.
1 – Universal React with Next.js – The Ultimate Guide:
This is a course heavy in server-side rendering, complete with exercises to make Next.js projects from scratch.
2 – Next.js Dev to Deployment:
Udemy has a great course that really focuses on building from scratch, and has the advantage of being presented by Brad Traversy – considered one of the best instructors in web development.
3 – React – The Complete Guide:
Even though this is a React resource, there is a very detailed module dedicated solely to work in Next.js – it’s like killing two birds with one stone.
4 – The Complete Next.js With React & Node:
This is a very hands-on, project-based course that really dials in to how Next.js works within React, but also how Node.js plays a role in determining the state of an application.
5 – Building Server-Side Rendered React Apps for Beginners:
Are you a total novice? Why not take the intensity down a peg and learn how to use React to solve the first page download issue associated with single page apps by using Next.js to perform rendering on the server side?
Next Steps
We hope this article helped you learn more about NEXT.js! If you enjoyed this article you may also enjoy P5js and 5 Things You Need to Know About It or 5 Reasons Why D3js is the Best Framework for Data Visualization.
Kofi Group offers a multitude of resources to help you learn more, improve your career, and help startups hire the best talent. If you are interested in learning more get in touch today!