Next.JS is a javascript framework that allows developers to create server rendered react web apps also comes with other perks that make frontend development swift.
How I encountered Next.JS?
I am currently reworking on my own personal blog with React and Next.JS on the frontend and Express powering the backend.
So why am I redoing my blog from scratch? Before I could launch an MVP of the blog, I had to work on the SEO and also make it easier for web crawlers, which in turn helps with a great search engine score and indexing. I had two options:
- Write my own express server to serve my React app
- Use libraries like
prerender
andreact-snap
So I tried them all and the journey was not that fine:
-
When creating my own express server, I suffered from a
Babel
andwebpack
version inconsistency problem. This took me like forever, I was deleting theyarn.lock
file and also the node_modules over and over, I also tried thenpm
suggestions but nothing. -
When working with
prerender
andreact-snap
, it worked perfectly locally on my laptop but kept on failing myNetlify
build.
After all the hard work and almost a months time wasted on SSR, I kinda gave up and just launched my blog. On a particular day, I was listening to the Full Stack Radio Episode 99 where he was interviewing Tim Neutkens about next
, I took note of four words about next
,
...server rendered client applications...
. I quickly opened a new tab, visited next
website, that was my eureka moment.
Advantages of using Next
- Server Side Rendering out of the box Next handles SSR in such an easy way. Install, run your app, open your browser, you got SSR. Some advantages of SSR are rich link previews.
-
Static Exporting
Next also handles serving of static files. No need of extra libraries.
-
CSS in JS
Writing
CSS in JS
comes in built innext
, there is no need to install other
packages such asemotion
,JSS
and such. Fully customisable
It handles most parts automatically such as the SSR functionality but next
still allows customization over Babel
, webpack
, routing
and next-plugins
.
- Progressive Web Apps
Creating a PWA is way too easy with next
...Stat tuned as we will look into
next features
-
Ready for production
Next is super fast and it's optimised for smaller build size making your web
app size realy small and faster. -
Zero Setup
Next also handles most of your setup process such as file system, routing, hot code reloading and universal rendering.
Used by most known companies
Among the reasons why Stackshare is successful is
because developers like to know which stacks companies like Netflix use
to scale their application, so that we learn them, put them on our resumes and
maybe make a score on the interview.
- Handles static and dynamic sites
Next handles static and dynamic sites seamlessly no need to add extra
configarations.
- Smaller learning curve
You will still write React, you will not experience the Angular 1
and Angular
effect. Next handles somethings that will save you a lot of time such as routing but I will get more into details on the next article, Stay tuned
4
Disadvantages of Next
How is this framework so perfect? Well its not, it has its own flaws such as:
- Redux
Implementing Redux might be a hustle, especially during setup.
- Handles way too much
Next handles a lot of functionality that you might take for granted, if you do you might ignore looking into them while.
Note: If you are looking into using
next
, usereact-scripts
for a while until you have grasped important concepts especiallyrouting
So far those are the disadvantages I know, if you happen to know or face a couple more, please share so that I add them to this post. You can do so via comments or a twitter mention.
Summary
TL;DR;
In this post we were able to:
- Look into why I started to look into
next
- Advantages of
next
- Disadvantages of
next
Next
On the next part of the Next meets React
series we will work on a simple web app to grasp each and every next
features.
Disclaimer
Note(no bad blood): Why you should choose
next
is just my opinion, I have no problem with you handling SSR on your own nor do I have trouble with devs usingreact-scripts
.
Feedback
Providing feedback about this article will be highly appreciated. Reach out on twitter wachira_dev or on this platform through chat.
Top comments (6)
Nextjs repository provides a small but efficient example that shows how to wire redux inside an application of theirs. It didn't seem too difficult to me. Maybe because I had already worked on an isomorphic app.
I checked it out. I was able to setup and redux, everything went well, I rendered my articles pretty well from my API but when I view my page source, my articles aren't there, i am trying to retrace where I went wrong. Thanks for the suggestion.
To add, the next examples folder is filled with loads of examples on how to use redux, context, and all sorts of random plugins. It's is a really good developer experience.
I really liked that article. Good job!
Glad you like, stay tuned its a series
I would be interested in what was failing on your Netlify build, when you tried react-snap.