Developing fast, SEO-friendly web applications can often be complicated and inefficient. Next.js is a simple yet powerful way to bring a vision to life. Are you looking for an answer what Next.js actually is? In this post, we’ll go over everything you need to know about this framework, including its pros and cons and whether you should use it for your project.
Next.js has become the framework of choice for the Clean Commit team. Over the past couple of years, we’ve tried dozens of different technologies and Next.js is the one that’s stood out. Reach out if you need help from folks that have completely jumped on the Next.js bandwagon and know the platform inside and out!
What is Next.js?
Next.js a framework for writing the code that runs on a browser. Browsers can only read particular types of code (HTML, CSS, JavaScript). Writing websites or applications in these raw forms of code is completely fine, but it’s slow and inefficient. There’s a ton of repetition, which is a programmer’s natural enemy. Next.js offers a set of tools for speeding this process up.
However, this is selling it a bit short. It can also build sites to generate statically (without needing a server), or render content from a server (dynamically). Essentially, it provides the building blocks for creating web applications that load quickly and perform smoothly.
What is Next.js used for?
As arguably the hottest frontend web development framework of 2022, Next.js can be used for some really cool projects. Given its ability to handle static site generation (SSG) or server side rendering (SSR), it’s quickly become the go-to for larger companies website development. However, it also makes an excellent frontend for decoupled applications where data is being fetched from an API.
The role of a dedicated frontend framework has been dominated by React, Angular and Vue in the past. Next.js is pushing its case for being mentioned in the same conversation.
Are Next.js and React the same thing?
Next.js works on top of React (check out our article about Next.js vs React), which is a JavaScript library created by Facebook in 2013. The range of UI components that are included in React makes creating user interfaces a more easy and efficient process for developers. However, at the end of the day, it’s just a library and doesn’t offer opinions on how applications should be built.
Next.js and React aren’t exactly the same thing, but any developer who is familiar with React should be able to understand what’s happening with Next.js (JavaScript) code (assuming it’s well written!).
These two popular frameworks can seem quite similar, as they both operate on reusable components that are relatively simple to develop and integrate into your web applications. Next.js was actually created to fill in some of the gaps left by React. The main difference is the way content is loaded onto the page.
React displays content through client-side rendering, which means the end-user loads all the page’s elements. This can be bad for performance, as it takes a while for the browser to read through all the code. By using Next.js, you’re able to do things like server-side rendering, which means the server reads through code and tells the browser what to display on the page. Server-side rendering creates faster, more versatile web applications.
Next.js is a fairly rigid toolkit, so there’s “limited” flexibility when it comes to how apps are structured. All pages are routed through a system of files and folders. React provides a lot of freedom for how you want to structure your application, as it’s simply a library of frontend components - not a framework.
The “limited” flexibility we’ve mentioned above isn’t an issue for 99% of applications. Our experience with Next.js development is that it can do everything we need and we’ve had great success using it optimise website performance and enhance user experience.
Next.js Features
There are a number of core React features that Next.js significantly improves. It also adds some completely new functions. Let’s take a look at some of these features.
Data Fetching & Pre-rendering
One of the most important functions of any web application is retrieving information from the server to display the right content to users. This is referred to as data fetching, and it can have a massive impact on how your app performs and behaves.
Next.js provides heaps of flexibility when it comes to data fetching, giving you the ability to render content in different ways depending on the situation.
- Server-Side Rendering - converts code into a fully rendered page entirely at the server’s end. Browsers request information from the server and instantly receive a fully rendered page in response.
- Client-Side Fetching - A full “stale” version of the website is delivered instantly, while the new data is fetched. This is more awesome than it sounds. It allows for pages to be loaded incredibly quickly, but also dynamically!
- Static Site Generation - Generating as much of the dynamic content ahead of time and storing it on a content distribution network, so no interaction with the server is required at all. SSG is the fastest way to serve websites - just click around the Clean Commit website and you’ll see this in action.
The power of Next is being able to implement these different data fetching models in any combination that suits your website or application.
eCommerce sites, for example, need to be super fast because that’s one of the signals Google looks at when determining how to rank a site on the search results page. This is a perfect use case for SSG. However, product pages also need to stay up to date so they show how many products are available for purchase to avoid overselling something with no stock. This situation better suits SSR or CSF.
TypeScript
TypeScript is a superset of JavaScript developed by Microsoft, designed to make the life of JavaScript developers a little easier by eliminating some of the headaches that come with JS code. One of the big benefits of TypeScript is it can report errors when different types of data (strings and numbers) are combined incorrectly. This is actually a pretty big deal for complex applications and removes some of the complexity from the frontend development process.
Next.js comes with TypeScript already integrated, meaning everything is set up and ready to go by default. With TypeScript, we’ve been able to create web applications more efficiently by leveraging its powerful debugging capabilities. In turn, this also results in apps that work better and run smoother.
Image Optimisation
Next.js can help with web vitals as it does a fantastic job at optimising images to achieve snappy performance and enable your site to pass Google’s core web vitals. The Next.js docs list the optimizations built into their image functionality:
Improved Performance: Always serve correctly sized image for each device, using modern image formats
Visual Stability: Prevent Cumulative Layout Shift automatically
Faster Page Loads: Images are only loaded when they enter the viewport, with optional blur-up placeholders
Asset Flexibility: On-demand image resizing, even for images stored on remote servers
The next/image API comes with image optimization out of the box, the images are set to automatically lazy load, can be configured to use modern formats like WebP, and easily serve any future format that proves to be better.
Automatic code splitting
Code splitting is a neat feature that allows the code required to run a single page to be organised and “split” within the directory of each page.
The benefit of this feature reduces the amount of code an end user needs to download to just what’s required for the page they’re viewing. As a result, the page can load incredibly quickly.
The Edge
“The Edge” is a concept that describes a series of servers connected in a network. The Edge is kind of like a Content Distribution Network, that is a network of machines that distribute static content like images. However, Edge servers can run some code too.
The big takeaway here is that caching and code execution can be done on a server closest to the user. Physical proximity makes a massive difference to load times. No matter where you live across the globe, if you’re accessing a Next.js website or application that’s on the Edge, it will be blazing fast.
Which big companies are using Next.js?
Next.js has become popular with larger companies for it’s performance, extensibility and easy configuration. With the exception of Gatsby (another React-based framework), there’s no framework that can achieve the same search engine optimisation results, while also providing the tools to execute complex development.
The Next.js site boasts a massive list of companies that have made the jump to the framework. Here’s the shortlist:
- TikTok
- Netflix
- Nike
- PlayStation
- DoorDash
- Porsche
A more comprehensive list of companies is available on the Next showcase page.
When the big companies are throwing their weight behind a technology, it’s worth following suit.
Pros of Next.js
Technical Pros
Data Security
Data security is possibly the single most important thing for modern websites to get right. Static websites have no direct connection to the database since they’re just a set of files living on a CDN.
Saying something is “hacker proof” is inaccurate, because every website has vulnerabilities and ways to be exploited. However, most sites run code on a server and that connection is the weak spot where hackers focus. Next.js provides a way to reduce your business’s risk of being compromised by a malicious attack.
Time To Market
Time to market is a term for how long it takes to turn an idea into a fully released web application. The range of pre-made components makes building a minimum viable product (MVP) relatively quick and simple.
More complex projects can also be completed faster due to the clever syntax and structure. The error handling and debugging principles used in React and Next mean developers can test changes and make improvements quickly and efficiently.
Search Engine Optimisation Pros
Page Load Time
Next.js can achieve unrivaled page load times. It’s out-of-the-box image optimisation, static site generation, code splitting architecture and ability to run on the Edge all combine for elite performance.
Search engine optimization is an important factor to consider. How quickly a site loads is becoming a significant factor in Google’s ranking algorithms. Over the past couple of years, Google has released several major updates to their algorithm focused on penalising websites that don’t pass Core Web Vitals.
The features and components of Next.js give us all the tools we need to create web applications that keep users engaged. This improves other strong signals Google is watching for, like low bounce rate and extended session duration.
Indexability and Crawlibility
To rank higher in search engines, it's generally best to have a well-structured, easy-to-navigate site structure. This helps Google’s bots crawl your site and gain a true understanding of who your content is relevant to and for what queries it should show your site in search results.
By default, Next.js uses a simple but effective system of pages and folders that direct Google on how to crawl your site. Components are also set up in a way that lets search engines utilise them a bit more when ranking a site.
Having a site that’s easily indexible and crawlable doesn’t unlock huge SEO benefits. However, getting it even slightly wrong (which is easy to do with WordPress sites) can have significant traffic penalties. That’s how Next.js can help with SEO
Business Pros
Conversion Rate
Web applications that are built using Next or React often have high conversion rates. This is a bit anecdotal because we don’t have empirical data to back it up. But the tools that Nextjs provides allow for more complex, faster and engaging frontends, helping customers find their way through the purchase process.
Accessibility
Businesses creating websites and applications have a responsibility to ensure they’re accessible. The web is an inclusive place, and everyone deserves to be able to interact with it easily.
Next.js is packed with a handful of great tools to make writing clean code quicker, and accessibility problems easier to spot.
Flexibility
Next.js is a powerful framework. It’s packed with everything required to develop a really nice frontend. Our team has managed to build some decently complex applications using a combination of Next.js and Laravel (for the backend).
There is an argument for React being more flexible because it’s an unopinionated library. This is probably true for some use cases, but we’re yet to find a situation where Next has been the reason we couldn’t build something.
Developer Pros
CSS Support
Next.js ships with built-in CSS support. It’s easy to import CSS code from a JavaScript file, meaning there’s no need to waste time and money on third-party stylesheet services.
Fast Refresh
The built-in fast refresh feature automatically reloads a page every time new code is added. Our developers no longer need to switch tabs and click the refresh button to test changes. This saves the effort of reloading the page every time a change is made. This sounds mundane, but it’s a big headache if you’re making a lot of quick changes to a site’s layout.
Reusable components
Next.js allows page constructors to be grouped as components and reused. This saves a ton of time if you’re building a web page or application that has UI components that duplicate across different pages.
Cons of Next.js
Technical Cons
Routing
Next.js is not very flexible when it comes to routing. The default approach is page-based, where you specify whether to generate those pages server-side, client-side or static.
While this is good for simple applications, if you need something more complex, you’ll need to write a lot more code and make use of Node.js servers. These issues are being worked on, though, and they’re gradually getting fixed. We are confident that routing will be much less of an issue in the future.
Opinionated
Next.js is opinionated, so as a developer you have no choice but to do things their way.
We’ve listed this as a “con” but it fits into the “pros” section too. Teams that are looking to do some wild integrations may hit limitations on how their application needs to be written, forcing work arounds.
Business Cons
Finding Developers
While React is a very common JavaScript library that powers a large portion of modern web applications, it’s hard to find good, experienced programmers to write your application. React has become an entry point to development. It’s one of those technical skills that is (relatively) easy to learn the basics, but very difficult and time consuming to master.
Since Next.js is an extension of React, it’s an easy thing for new developers to throw on their CV without having a ton of experience building clean, well architectured applications with Next.
Hiring Next.js developers from Upwork, Freelancer, or any other contracting site is a huge gamble because there are so many novices saturating the market.
Should I Use Next.js for my Project?
The answer to this question is “it depends”. Is Next.js a great fit for your requirements? Do you need to build a highly scaleable application that is snappy for users, and is a dream for your development team to maintain? Or perhaps you upgrade your Shopify store to run as a headless implementation to unlock the SEO standards and huge traffic numbers you haven’t been able to achieve.
In these cases, yes, you should use Next.js for your project. We believe it’s the best frontend framework for most applications in 2022.
However, in saying that, there are cases to be made for using Vue, React, WordPress, Laravel, and a bunch of other great technologies. Coding languages and frameworks aren’t one-size-fits-all.
The only way we can answer this question conclusively is if you reach out to our team for a quick conversation to discuss your project. We’re a website design agency highly experienced with Next.js, and can field any questions you have about it being the right choice for your project.
In general, the benefits of Next.js far outweigh the limitations, and many of the disadvantages can be overcome when you hire Next.js developers. If you try to manage it all internally, you’ll probably spend excessive money and time, and it may not be as worthwhile.
Our team of Next.js specialists would love to assist you with your web app. Contact us today to speak to us about how we can help you.
Conclusion
Next.js helps our team build web apps that perform fast, are SEO-centric and fit our clients’ budgets. In this post, we’ve looked at how it works, some pros and cons and whether you should use it for your project.
Do you have any questions about Next.js, please feel free to leave them in the comments section below. We’ll respond with an answer in a day or so.
