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.
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
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.