Next.js —Where have you been all my life?

How Next.js kept me writing React — in production.

Eshwaren M
Sep 10, 2019 · 3 min read
Image for post
Image for post

I almost gave up. My React SPA was great to code, but also completely useless. I had spent months to learn React, and a few more to convince the team to upgrade our Jquery powered front-end to React, all in the name of performance, better code re-usability, and future proofing.

We are an online news portal, so the site I was developing using React was more or less a blog. How hard can this be? A few routes, fetch some APIs, and voila! Not so fast. I shared the URL of my new shiny prototype to Facebook — nothing came up, no featured image, no proper title.

I realized Facebook will only scrap server side rendered meta tags. The only magic I can use at this point were pre-renderers. This complicates our build deployment processes, caching strategies and cost calculation. Also, Lighthouse didn’t show good scores. My heart broke.

Fortunately, I had more time. We didn’t upgrade our live site. No talk about this for a while. I continued to seek solutions. My new objectives were :

  1. Dynamic pages — with server side rendered meta tags
  2. React for interactivity after the page loads
  3. Lighthouse score above 80%
  4. Easy build and deployment process
  5. Easy local development

Not long after I Googled “Server side rendered React” , I found Next.js.

Here’s a good tutorial by Brad Traversy

📃 Dynamic pages

Yes. Like any other server-side rendered sites. But you build the components with React. Next.js hydrates components at production, so your HTML is ready and not in some bundle that the browser needs to execute. This is great for SEO, social media sharing, and caching. Plus, Next.js works well with Express. So I can write my APIs and do other more ‘server-like’ things in the same codebase!

💫 React for interactivity

Next.js can easily work out which components it should render server-side, and which ones should run in the browser. All the codes in componentDidMount still runs in the browser, and you rarely have to worry about this. The React package used is also not Next.js specific, so you get all the latest goodies like React Hooks!

⚡️ Performance

A lot of good magic goes into the compiling process. Next.js produces amazingly fast pages. I have never seen a Lighthouse score of less than 85% on any of my pages. A lot of modern performance best practices are included out of the box — no configuration needed. You can also load another page without reloading the browser by using components provided by Next.js. When you build your project, Next.js can turn pages without server side logic into static pages!

🔧 Build and deploy

Nothing complicated here! Just npm run build and a few seconds later, your production folder is ready, then just run npm start. There is also a popular service provided by the creators of Next.js called Zeit which does serverless deployment for Next.js projects.

💻 Local development

This is very common these days, but extremely important. Express and React can run in one local server. Hot reloading works like a charm and saves a ton of time. It just works!

In conclusion, I love Next.js and I encourage you to try it out!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store