Since there’s a lot of what’s nexts, let’s take a look at frontend frameworks. We’ve got the trinity of React, Angular and Vue, but the question remains the same. What’s next?
There are a couple of possible answers but I’ll pretend that Next is the one while giving an honorable mention to svelte that seems to be gaining some momentum.
Next over React?
The main issues we’ve had with React are pretty straightforward and general:
- Everyone makes a different folder structure
- Everyone uses a different router, styling method, build setup ...
- Server Side Rendering (SSR) is a huge pain
Next solves this a bit - how?
Folder structure bonanza
Everyone has their favorite way to set up the folder structure of a React application - the only truly constant folder is the /components folder. This is problematic because it makes the review of many projects difficult and any existing solutions might be hard (i.e. ugly) to implement in a different folder setup.
Next does not solve this any more than the famous create-react-app did. One thing it does do, though, is the separation of the page components into a separate fixed folder called /pages - this makes the whole system much clearer by default.
From there on, while we’re still on our own, we at least have a central point.
A nice set of defaults
Even more problematic is the fact that everyone has a different set of libraries they like to use. Maybe we could go as far as to say a favorite “stack” inside React. Let’s take a look at some of Next’s defaults.
There’s a ton of styling options - the one that Next includes (styled-jsx) is a very nice one since it:
- Allows you to write CSS in CSS. Not in quasi-css like many css-in-js libraries. You are able to copy paste your ad-hoc creations from the developer console to your code as-is.
- Supports a ton of plugins to write in any advanced css flavor you like - LESS, SASS, etc.
- Is a part of a React component (can of course be imported, if you prefer to keep your css outside) and can adapt to rendering changes - you can, for instance, change the actual css of the component when the props are changed.
- Is local by default - you can repeat all of your general class names and they won’t drip out of the component. It can be selectively made global as well, if necessary, by adding a simple tag.
As mentioned before - NextJS has its own router. Not to go into too much detail, it’s necessary for it to have it in order to make SSR work and does not stop there - for example, it allows for automatic code-splitting, as per their docs:
This is an excellent feature that minimizes the code loaded per specific page.
The routing might be a bit clunky at first, compared to your favorite react-ultrastar-router, but it does bring a lot to the table.
Avoiding a ton of cryptic webpack configuration, Next has its own build system that can be heavily customized while remaining relatively simple to figure out. It allows for custom webpack snippets and many more interesting configuration options that allow you to create a blueprint for all of your projects that anyone can understand pretty fast.
It can build a static page, it can build an SSR page. That’s pretty much all you need.
This is the main feature. This has always been a huge pain to manage with React applications and while there were some options none of them come close to how Next manages this. Once you adapt to the setup, server-side rendering is easily extendable and can cater to any desire. There’s a giant library of examples for Next.js that cover pretty much everything you’d like to implement.
Next also includes a fair number of goodies that can either be used or ignored but are really nice to have on speed dial. Here is a couple of the most notable ones:
- Prefetching - further optimize navigation by prefetching pages before they are clicked
- Export to a static app - you can use Next without SSR as well. It simplifies the code and keeps the option of SSR open for later development.
I’ve found that using Next is a breeze. It doesn’t fight you too much on the configuration front, it’s probably the best and easiest way of managing SSR and it brings a sensible set of defaults to the table.
I must note that this only skims the surface of Next - for any additional questions & comments & inquiries & threats regarding this article feel free to contact me.
Written by: Adam Giacomelli
Follow him on GitHub https://github.com/adamgiacomelli