Povel Croona, Learning Designer

11 September 2020

4 Reasons to Learn Next.js in 2020

Next.js, a React framework, has been on the rise as businesses keep moving or branching out to digital. It addresses the hurdles of regular React.js apps while keeping things fast and simple. Here are the reasons to learn Next.js in 2020.

Learn Next.js For: Single-Page Applications

Next.js is, well, the next step in single-page applications. Whatever the user does, they receive the feedback in the same window. The website or application does not refresh or jump to a different page, similarly to how Uber does not make you load new pages when ordering the taxi.

Single-page applications, as mentioned in the preview, come with a few caveats of their own. They mostly stem from the fact that the SPA keeps deleting content and replacing it with new content. A section of the app that is not currently on the screen may be harder or impossible to reach (or recap later). We’ll be looking at these challenges below.

Learn Next.js For: Search Engine Optimization

If you try to really simplify the Search Engine Optimization, it is about improving your website’s perception by Google. It analyzes (“crawls”) all pages of your website to assess the technical quality (does it load fast? Are there any meaningless redirects?), the relevance of the content within a certain topic, and its presentation (table of contents, Q&A, etc.). Google crawls all pages. See the issue here?

React.js solutions required pretty awkward workarounds, such as hindering the key single-page application advantage by making pages redraw. Another notable option is mirroring SPA content with identical HTML-based pages. Most of the crutches, however, have room for hiccups that will ultimately lead to a lower Search Engine Optimization Score. If only you’d learned Next.js...

Next.js comes with multiple options to get a passable SEO score in the first place and then improve it. It allows you to assign meta tags for each individual page; make the website prerendered, server-side or dynamically rendered for Google’s crawlers; automatically generate the sitemap. All those features and more will enable your website to pass all Google SEO checks.

Here's a SEO report example for Beetroot Academy (note that our website is not a SPA)

Learn Next.js For: Code Splitting

Key performance advantage of single-page applications is that they render in chunks. As the user’s device does not receive the irrelevant parts of the code (i.e. all other pages), individual pages load faster than they otherwise would. The catch is that this feature, code splitting, does not come with vanilla Create React App. You’ll need something on top of that (or should I say under that?), such as a boilerplate. It takes extra effort and not necessarily leads to the best result available. 

Next.js splits the JavaScript code into chunks out of the box. You get much lower load results: manifold.co lowered CRA Boilerplate’s load time of 1.5 seconds down to 0.2 seconds with a Next.js code-splitting implementation. Apart from the improved user experience (which improves visit time, retention, and conversions), lower load times improve your website’s SEO standing with Google. Perhaps you can please everyone after all. 

Code splitting, however, does not end on the page level (route-level splitting). In fact, you can split a component into multiple chunks. This works best for hidden pieces of the page, such as displayed messages or other feedback from clicking a button. 

Learn Next.js For: Versatility

In some cases, you would want a static website over a single-page application. For example, Samsung Internet (a Chromium browser baked into Samsung’s mobile devices) has JavaScript disabled by default. Imagine how awkward it is to have a SPA phone case store in an Android-centric country not to load on Samsung Galaxy devices. 

The CPA workarounds are rather awkward and are not really workarounds. You can simply host the same store on a different domain—a version that does not depend on JavaScript to function. The internal confusion, as well as varying SEO score among other things, make this frustrating to say the least.

Someone who learned Next.js would simply do the following:

next build && next export

npm run build

That’s it. You now have a static HTML version of your single-page application, as in it prerenders all pages to HTML. The killer feature, however, is that you can have only some of the pages prerendered (such as the section with Samsung phone cases). Here’s the relevant piece of Next.js documentation on that.

If you want to pick up or brush up your Javascript skills before picking up the Next.js framework, we’ve got a Front-End Development course just for that. You’ll be learning HTML, CSS, and Javascript essentials with online materials and evening classes. Our next group starts on November 30.