Why I Chose React + Next.js For My Website

This won't be a comparison or a smack-talk post to persuade you from other front end frameworks like Angular or Vue.js. Instead, I'll outline the positive aspects I found with Next.js that are not possible out of the box with React-based alternatives like Create React App. Everyone has their preference, but I prefer to use React.

In the past, I've always used Create React App, but without additional setup, it wasn't a good solution for a text-based website. There is evidence that some search engines are now able to crawl client-side Javascript web apps, but it's described as "It's not always perfect, and certainly not easy..." by Google's John Mueller.

With that in mind, let us go over the positives I found with Next.js.

Server-Side Rendering

Yep, Next.js builds a serverless file meant to run on an SSR equipped lambda, along with a client-side rendering file. On the initial page load, the rendering is offloaded to the server and served to the browser as HTML. Doing so leads to a low first meaningful paint time, and it also guarantees search engine's crawling the site have no issues.

Static HTML Prerendering

If your page doesn't require a service call to preload data, Next.js creates a flat and static HTML file. No need for server-side rendering or rendering the view client-side. Instead, a prerendered file is served, which makes the page load times super low.

Automatic Code Splitting

So, the first page is a prerendered view, but what about those client-side rendering files I mentioned. After the initial page loads, the other pages begin preloading. Client-side rendering takes over, and there are no page refreshes when a user clicks a link. Onto the next positive I found.

Simple Page Based Client-Side Routing

When working with Next.js, you put page containers into a "pages" folder in the root directory of your project. Take my about page for instance. I have an about.js file located in the /pages directory. Next.js automatically makes this a route found at /about.

Simple API Routing

API routing makes building an API into a Next.js project simple. Just create an "api/" folder inside the ".pages/" folder. A route is automatically mapped to "/api/*".

Here's an example function you could put into a file inside the /api folder.

export default (req, res) => {

  res.setHeader('Content-Type', 'application/json');

  res.statusCode = 200;

  res.end(JSON.stringify({ name: 'Nextjs' }));

};

I used this feature for my contact page API along with NodeMailer. I had a working API endpoint up in minutes.

CSS in JS

I've typically shied away from CSS in JS, but I'm beginning to like the practice. For now, I created a global SCSS file that I import at the top-level component of my site. This file contains universal rules for typography, grids, etc. I'm now working to componentize elements on the page. Allowing me to quickly scope my style rules and also limit the size and complexity of my stylesheets.

Even More to Consider

There's even more to explore. TypeScript, Customizable Babel, and Webpack Configurations. I won't go into too much detail in this post, but I added a few things to my Webpack config to help with inline SVG files and auto-prefixing.

In Conclusion

React with Next.js made creating this site not only more straightforward, but I also had more fun working on it. I have SSR, code splitting, static exporting for simple pages, page-based routing (even for API endpoints!), and scoped CSS in JS with plenty more to explore.

Deployment was just as accessible by utilizing Zeit.co's (the creators of Next.js) Now 2.0 platform. With a few simple commands in Terminal, you can have an SSL secured website running on servers around the world in a day's work.

You can find the Next.js documentation here, and also check out the Now platform. I'm sure both can accelerate and improve your React projects.

Tags