Next.js —Where have you been all my life?
How Next.js kept me writing React — in production.
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 :
- Dynamic pages — with server side rendered meta tags
- React for interactivity after the page loads
- Lighthouse score above 80%
- Easy build and deployment process
- 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!
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!