Why We Use Next.js at Colorful Dots
Next.js is a minimalistic framework for server-rendered React applications.
Next.js was open-sourced 25th October 2016. The company behind Next is called ZEIT. Next.js is backed by ZEIT which is stable and is also very active in the open-source world. Next is not going away any time soon and it’s most likely here to stay.
Keep It Simple
Whenever we begin working on a new project we have to setup up some initial boilerplate code, a bunch of dependencies and scripts to get everything up and running. A majority of these prerequisites have nothing to do with your product or services “core” concept. Additionally, we refuse to bill our clients for our initial development setup time. In other words, we need to hit the ground running as fast as possible to provide our laser sharp focus on your project and nothing else, or else we’re not making money.
Next.js keeps it simple by significantly decreasing our initial development environment setup times to just a few minutes. This process often would take hours or longer using other frameworks.
Universal Webpack and Next Plug-ins
With the recent release of Next.js 5 (Canary) we can now leverage the amazingly powerful Next Plug-ins. This eliminates the complexities of manually configuring Webpack in earlier versions of Next.js and makes it simple for us to use SCSS/SASS or LESS in our projects. There are several plug-ins to assist with nearly any type of project. For example, if your project and team is comfortable using TypeScript, we can simply enable the plug-in for TypeScript and Next will interpret and render our code as such. It’s truly powerful!
Here’s what a common next.config.js configuration would look for using TypeScript with Next.js before Next 5 (Canary).
Here’s what our next.config.js looks like now with Next 5 (Canary) and the next-typescript plug-in:
As you can see, less code is needed and it’s easier to setup, maintain and read.
Styling
Next.js comes with a built-in CSS support called styled-jsx. Although we primarily use SCSS and with next.js, the implementation is ridiculously simple to setup.
Next supports the following styling plugins:
@zeit/next-css@zeit/next-sass@zeit/next-less
All we have to do is make some adjustments to our next.config.js file and install one of the dependencies above. In our example below, we'll use SASS:
Now, we’re able to use SASS’s powerful functions and features within our Next.js project.
Additionally, here are some styling features out of the box with Next.js:
- Full CSS support, no trade-offs 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
Routing
When comparing Next’s routing with other popular frameworks like Create-React-App, which is Client-Side only, unless extended, we find Next to be the best for a couple of reasons.
Routing is simple and straightforward with an option of prefetching pages for maximum performance. We don’t need to install any dependencies for the router to work.
In order to navigate to a given route inside of Next.js, we can simply create a page.js inside the Pages/ directory and that's it. Although if we want to handle more complex dynamic routing, we tend to favor using a mixture of Express server and next-routes, which is two extra dependencies and a couple of lines of code. the combination of Express and Next Routes make it simple to route to any route dynamically. Every route will be easily accessible and clean.
JavaScript Only
Unlike Create-React-App we do not have to have mixed file extensions in our code base. Everything is .js and this may not seem like a big deal, but for us it is. It eliminates code context switching. It allows our JavaScript developers to focus on what they're best at, working in JavaScript.
SEO
Since Next.js ships as a Server-Side Rendering Application, we no longer have to worry about not having our pages crawled by search engines or social bots such as Facebook, Twitter, and others. This isn’t a post about comparing Create-React-App or any other frameworks to Next.js, but we are using Create-React-App as our primary example.
Create-React-App is Client-Side only (unless extended), which means that when your users share your websites page(s), the social feeds will not be rendering your dynamic content and important dynamic page titles, descriptions, and page images. For our team at Colorful Dots, working with Create-React-App has only created headaches when it comes time to launching our applications into production. Next.js allows us to focus on our clients core features and concepts and brings great enjoyment and momentum to our development team. Everybody wins!
Performance
Next has significant performance benefits. Here are some highlights below:
- Eliminates the need for the client to download code by having the HTML ready in the response.
- Provides users with an initial render view while loading other the code in the background.
- Automatic code splitting for faster page loads.
- Hot Module Replacement (HMR)
Next.js Examples
Next.js has created an enormous library of examples with third-party libraries such as Express, Firebase, Redux, GraphQL, Apollo, Internationalization & localization (i18n), Dotenv, and many many others. We encourage you to checkout the full list of ever-growing Next.js examples.
Final Thoughts
We covered only a small portion of the benefits and features of using Next.js, a simple and powerful Universal React Framework. We have been using Next.js in development and production since its inception in 2016. We’ve tried to incorporate other frameworks such as Create-React-App, Meteor, and many others, but nothing has made development so pleasurable, powerful, and efficient as Next.js.
We strongly encourage you to contact us if you or your team is considering moving away from another bloated monolithic framework on an existing project or if you are considering starting a new project with Colorful Dots.
Let’s Build Your “Next” Application!
If you’d like to learn more about our services, technologies, or our development process, please contact us for a free quote!
