Hello, my name is Youssef, I am a front-end developer in AnyMind’s AnyFactory team and in this blog I’d like to discuss the differences between working with React.js and Next.js. Both of which we use here at AnyMind. React has been around since 2013 and was developed internally at Facebook. Next.js’ initial release was in 2016 as an open source project. Perhaps calling both of them a front-end framework is a bit of a misnomer. React.js is more of a javascript library and Next.js is more of a React based development framework. A bit like comparing a knife and a toolbox perhaps? Maybe comparing Next.js to Create-React-App app comes a bit closer. CRA is a React scaffolding app that hides the dependencies and configurations from the developer so that they can speed up the development process without worrying about things like bundling, development servers and autoprefixing. Next.js is more of a development framework based on React and built on top of Node.js. Let’s dive a bit deeper into the differences.
Create-react-app (☆ 90.2k)
As mentioned, CRA hides the configuration from the user so they can get to developing faster! The downside of this is that there is no straightforward way to make a change in the configuration. You have to be satisfied with what you get out of the box. There is a solution called ejecting, which basically just unpacks all the configuration files that were hidden for you. It defeats the purpose of using CRA over plain React and this action is not reversible so this is a last resort option.
CRA was developed with fast bootstrapping in mind and out of the box it does not support things like server-side-rendering. Everything you make with CRA is client-side rendering only. Meaning, the website that is built using CRA does not contain all the content on build time. When you load the website up is when the framework will go out to look for the content and put all the HTML elements in their place. Conversely, server-side rendered apps have their content already finalized on the server before it reaches the client. This is very helpful when creating SEO reliant websites because the search engine crawlers have an easier time indexing site content that was already available due to the server side rendering.
Defining routes for your CRA application can be done by installing a routing library (react-router) and making use of their API. The routing library has been around for a while, it’s API is mature and fairly flexible. The nice thing about this library is that it easy to reason about. No complicated setup necessary and the documentation is clear.
For deployment, CRA is pretty straightforward, it defines a yarn build command to let you make a build of your code which you can then take to whatever server you like and have it point to the build’s index.html file for example. The easiest way to deploy according to the CRA documentation is to install Vercel’s serve npm package and have it serve your CRA build. The only caveat is when you make use of client-side routing. If, for example, you want to support having your user navigate to /product/41/edit and make use of the react-router package you will run into issues if you make use of a static file server. This will require some server configuration that you can read about here.
Next.js (☆ 73.2k)
Owned and maintained by Vercel, Next.js has very quickly gained in popularity. The reason Next.js became so popular so fast is that it facilitated server-side rendering (SSR) for developers and built upon an already well-known JS library (React). When developing e-commerce websites or other customer facing websites you want your data to be available to the user quickly and to be indexable by search engine crawlers and Next.js helps you do just that.
Besides SSR, if your use case is to have static content, like a blog, Next.js helps you write that too. You write your pages and code as normal and then at build time the framework creates HTML pages for you, that you can then deploy. This is called static site generation (SSG). Because these two techniques give users the possibility to prebuild the content on the pages, sites created with Next.js are very fast! First paints time difference between CRA and Next.js can be as big as 87%^1.
Next.js has a file-system based router built on the concept of pages. This means that Next.js adds a pages directory for you in the project structure and files contained therein will define what you’re routing will become. For example the file: pages/blog/first-post.jswill have the this route: /blog/first-post. The downside of using Next.js is that it is not flexible in terms of using other routing approaches. You will have to work with what it gives you.
For deploying, Vercel has a recommended way of deploying your Next.js project by registering with them and making use of their hosting, but you can basically host anywhere that can run a Node.js server. When you run yarn build, the framework will build and optimize your files and create a .next/ folder that contains the files you need to deploy on a Node server. Running yarn start on your production server, with the right environment variables will then set-up your site for you and you’re good to go.
If you don’t want to run your site on a Node.js server you can also ‘next export‘ your Next.js project into HTML files, which can then be run stand-alone, anywhere you want. With this export option you can do basically the same thing as when you deploy on Node.js server, however the Next.js documentation states that:
next export is intended for scenarios where none of your pages have server-side or incremental data requirements (though statically-rendered pages can still fetch data on the client side).
In other words, you lose some of the benefits of deploying on a Node.js server like Incremental Static Generation and Regeneration and there are some other caveats. Essentially the recommendation is to just deploy onto a Node.js server unless you have a very specific use case as to not deploy onto there.
How we use CRA & Next.js at AnyFactory
The first project we started on in AnyFactory is the AnyFactory Platform. A cloud manufacturing platform that enables the design and creation of products. The idea is that brands can register with us to develop their products on our platform and have manufacturing and distribution handled by us. On the other hand, manufacturing parties can register with us to be matched with manufacturing orders and establish trust with potential customers.
Because this is a ‘gated’ application, meaning the user needs to log in to access our platform, there is no real need for us to invest in SEO compliant techniques or frameworks. Search engine crawlers will not be able to bypass our login screen. Important for us was to get a proof-of-concept up and running as quickly as possible. For this reason we built the AnyFactory Platform app with the Create-React-App utility and continued development from there.
More recently we launched PopBox, an e-commerce site where content creators can sell their merchandise and apparel with their own branding. Contrary to the AnyFactory platform, this site needs good discoverability so it is important to have a good SEO compliant website. A lot of the shopping on PopBox is done via mobile so the content needs to load fast. Next.js comes with pre-rendered html and less JS than a CRA app so our page speeds benefit from this. Our data is coming from a Shopify store and we deploy our project using Google Cloud. At the moment we are looking at ways to deliver content to our app even faster, but perhaps that will be discussed on our blog here at a later time.
Summary
If you are (still?) reading this and wondering which framework should you use for your project; let’s summarize what we discussed:
- Bootstrap something quickly without worrying about configurations and build servers? CRA!
- E-commerce or other non-gated app that needs good SEO? Next.js!
- Flexibility of choosing your own routing mechanism? CRA!
- Speed? Performance? Next.js!
- Wanting to come work with us at AnyFactory? Both!
I hope, with this, I have been able to give you some insight into which framework you should use in which situation. Hit me up at: youssef at anymindgroup.com if you have any questions, complaints or just want to say hi. For now, I hope it was beneficial, thank you for reading! 👋
