Why I chose React + Next.js for My Next Website
This is not your regular React vs Vue.js vs Angular comparison. We have enough of those from people much more involved in the subject.
Let’s just say everyone has their own preference. I prefer React over other libraries and frameworks for building user interfaces. And after I explain why, maybe you too will switch to React, if you don’t use it already.
A few months ago I was a looking for a boilerplate or a starter kit for React. I yearned for something simple and dependable. After a long and thorough search I found what I was looking for. It’s a framework called Next.js.
It had a bunch of stars on GitHub, which is always a big plus for me. This means the project presumably has a future and a community you can turn to, if you need help.
Right on top of the readme file you will find a link to learnnextjs.com. A short tutorial that teaches you how to use Next.js in about an hour. I don’t mean an introduction, you can genuinely start building your app. It’s awesome!
Why Next.js?
I find Next.js is much simpler and effective than its alternatives.
Create React App has even more stars on GitHub and promises no build configuration. Still, it’s not as simple as it looks. You need to learn client-side routing, page layout and so on; not to even mention server rendering.
Not with Next.js, you love working with it in a matter of hours.
More and more people like Vue, even if it’s still inferior to React and Angular in some aspects. Because it’s straightforward you can get the most done with it in the shortest amount of time. For me, Next.js closed this gap between React and Vue, sykrocketing React to the top.
Vue seems like a good alternative, what about Angular?
Both are chart-topping frameworks, with excellent support, performant and future-proof. But I wouldn’t choose either one over React coupled with Next.js.
Vue
I have always perceived Vue as the most appropriate for entry-level apps and websites. Even still, as I wrote a couple of paragraphs before, React in combination with Next.js is effortless. A child’s play one might say.
To be fair, React isn’t that hard to start with. It has a slightly steeper learning curve, but it pays off in the end.
Considering this, React has the upper hand. It’s more mature, reliable, and backed by a larger community and Facebook.
Angular
Angular has always been a serious and grown-up framework in my head, but I wouldn’t choose it. Simply put, I don’t like it.
Even though Typescript is optional, you are kind of forced to use it. And the whole framework seems overly complicated for no apparent reason. For the worst part, I don’t seem to find any advantage to make it worthy of the trouble you need to go through.
Next.js features
Here are some cool features Next.js brings to the table taken from learnnextjs:
- Server-rendered by default (Yay!)
- Automatic code splitting for faster page loads
- Simple client-side routing (page based)
- Webpack-based dev environmet which supports Hot Module Replacement (HMR)
- Able to implement with Express or any other Node.js HTTP server
- Customizable with your own Babel and Webpack configurations
Let me explain this features a bit.
App is split into chunks and server rendered, resulting in blazing load times. SEO is of no concern even for search engines, that don’t support client-side rendering.
Router solution and webpack is already taken care of. Then there is Hot Module Replacement (HMR), which saves you valuable developer time by only updating what’s changed. Ultimately it improves developer experience (DX).
How it made my life easier
Whenever I started working on a new project I had to setup up a bunch of dependencies and scripts to get everything up and running. I had to do things like installing node-sass, setting up watchers, writing npm scripts…
Even before I started actually developing the app, I had to manage dozens of dependencies. Next.js made it possible to skip this boring chore I encountered every single time. It made it possible to start any project in a matter of minutes.
Styling
Next.js comes with a built-in CSS support called styled-jsx. I have to admit, I didn’t use it till recently as it couldn’t compete with other similar solutions like styled-components or JSS. But recently they released version 2, which is a hefty improvment over the first one and has great potential.
Here are the features they listed:
- Full CSS support, no tradeoffs in power
- Runtime size of just 3kb (gzipped, from 12kb)
- Complete isolation: Selectors, animations, keyframes
- Built-in CSS vendor prefixing
- Very fast, minimal and efficient transpilation
- High-performance runtime-CSS-injection when not server-rendering
- Future-proof: Equivalent to server-renderable “Shadow CSS”
- Source maps support
- Dynamic styles and themes support
- CSS Preprocessing via Plugins
What you need to know is, that it’s remarkably fast, flexible, and best of all, it just fits with the idea of JSX and React. Oh, and you don’t need to setup anything, it’s all there.
However, if you would still like to use your old CSS preprocessor, you can. I somewhat forgot about LESS, SASS, PostCSS and CSS-Modules, but if you still fancy them, you can certainly use them.
As an alternative to styled-jsx I would recommened Material-UI-Next. An infamous library of React components that implement Google’s Material Design. It uses beforementioned JSS, is highly adaptable, and future-proof.
I am using it now on a new project and so far I am loving it.
Webpack
Every import you declare gets bundled and served with each page automatically. That means pages never load unnecessary code.
You can even analyze bundles and further optimize loading time with lazy loading modules.
Routing
Routing is simple and straightforward with an option of prefetching pages for maximum performance. You don’t need to install any dependencies for the router to work.
People used to React Router or other similar routers may experience little difficulties at first, but it’s actually simple. It’s just a different approach, which is in my opinion pretty easy to get the hang of.
Instead of specifying routes and all the route related stuff, you add a page to the pages directory, which in return makes the page URL available. This is super simple, but what if you want something more tricky?
You install a server, preferably Express, and specify custom routes in the server configuration. This way you can have all kinds of routes you want and clean URLs.
Deployment
Next.js allows you to export your app into a static HTML app as long as it doesn’t need to generate dynamic pages at runtime. Pretty awesome, right?
Deploying your app is pretty magical; not only because you are finally going live, but also because of the way you do it. You build your entire application with one command and deploy it to their global hosting with another.
This option is available, if you have ZEIT now hosting. I recommend using it, if you are planning to work with Next.js as it makes it ridiculously easy to deploy.
Conclusion
There are many more details I didn’t mention. We just glanced over the ones that matter the most to me.
I never liked React as much as I do before I found Next.js. It just seems natural when I am working working with React & Next. It’s how it should have been from the beginning.
For me it’s the only right way to build user interfaces. It has made me love React.
Before you go…
Thanks for reading!
If you enjoyed this article, please hold down the clap button below 👏 to help others find it. The longer you hold it, the more claps you give!
And do not hesitate to share your thoughts in the comments below.
Hello React - React Training for JavaScript Beginners
☞ http://bit.ly/2KeGNux
React for visual learners
☞ http://bit.ly/2ICgzfJ
The Complete Web Development Tutorial Using React and Redux
☞ http://bit.ly/2yRFM67
Suggest:
☞ JavaScript for React Developers | Mosh
☞ Getting Closure on React Hooks
☞ Web Development Tutorial - JavaScript, HTML, CSS
☞ Javascript Project Tutorial: Budget App
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch