Why we did choose NextJS for our website and you should consider it too for next project

About a year ago we decided to redesign our website pracezarohem.cz and pracazarogiem.pl. Redesign was too extensive, so we decided to change the web system too. As mobile dev team we normally using react-native and php for backend. We primary use Symfony php framework but as mobile developers we are not very happy with php :) So we started searching for an alternative … and there NextJS did come to the rescue.

I write this from the point of view of person, who rid of the ugly PHP :)

There is 7 points which helps us to decide to choose NextJs:

1) Javascript, javascript, only the javascript

NextJs is modern Javascript framework, which completely supports ES6 notations, there is Babel under the hood, so you can't think about support of some JS features cross the browsers.

In comparations with symfony, you can do all web in javascript only. No more ugly twig templates without any in-code checks such as object types and variable names. No more dump php :)

If you know React, you are on the right place.

2) Maintained

NextJs is here from 2016 and get over 2000 contributors, so i believe that will be continue in future too. So you don't have to worry about future of your project.

3) Speed

NextJs is presenting self as “tech on the edge”, so it uses all the possible concepts for making the web fast — minify code, http 2/3, chuns, caching, etc. — all in the box without annoying setup.

3) Team

We are small team, which consist of 5 Devs. Most of us are react-native developers, so we can use almost same tech for web as for mobiles and there is possibility of reuse between code and app.

4) Fast dev

“Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.” — taken from web https://nextjs.org/

So just run yarn run dev and can happily code.

5) Lots of build-in features

Internationalisation, multi-domain, Server-side rendering, caching, url routing, image optimalisation, etc. More on https://nextjs.org/

6) SSR (Server-side render)

SEO — marketing mantra of the thing which nobody actually never seen, but we all know that something like this is exists. :)

If you can't get html from the web server, you never get organic visitors. A few years before it was big pain of JS framework for web development.

NextJS have it build-in with no config, which is very handy.

Bonus: Fuckups or features?

We use NextJs about 1 year and in our jurney we were facing some troubles:

Dynamics data for SSR

sometimes we forget to use getServerSideProps or in child component we not set initial state. As result we broke SSR and get empty HTML page from the server

Image optimalisation is cost

When we tried to use image optimalistion all look good until we deploy it to our test server and looks to the metrics, CPU did almost double the consuption.

Strict pages structure

You have to use predefined directory structure for pages to make it works. Which i was fighting a little, but then i had to admit that is necessary.

Thanks for reading!