What is Next.js?
Next.js is an open-source React front-end development web framework created by Vercel that enables functionality such as server-side rendering and generating static websites for React-based web applications.
Next.js is a framework born in heaven. It ships with:
- Best SEO practices
- Caching and Automatic Static Optimization built-in
- Fully server-rendered pages
- 100% React support
- Lambda function support (API routes)
- Fine tweak your webpack/babel config if needed
- And much more!
It abstracts away all those performance and development setups you need with a typical React app and allows you to focus only on what matters – your business logic code.
I had my first experience with Next.js 2 years ago when it was very young.
But Next.js 9.5 was released this year with so many features. And I think it’s safe to say that it is one of the most powerful tools available in the web development ecosystem, especially if you’re a React developer.
I run codedamn (a platform for developers to learn to code) myself on Next.js. There’s a massive performance boost to the site compared to your regular React app.
If you’re a React developer in 2020, one of the best skills you can learn is Next.js. Here are some benefits it offers you as a developer:
- Definitely an emerging technology – more job opportunities and possibilities
- Server rendered pages means better performance – more clients for you
- SEO for your websites baked in – search engines love you
- All the benefits of having a server in place – API routes, dynamic content fetching, and stale-while-revalidate feature (oh I love this one)
- Great technical skill on your résumé
Some Next.js features I’m excited about
Next.js is evolving really fast. They deprecate old functionalities and introduce shiny new things all the time.
As of today, I’m super interested in the framework as a whole, but here are some of my top picks:
#1 Stable Incremental Static Regeneration
Simply speaking, this feature allows you to generate static content dynamically. Wait, what? Let’s see a quick example:
Say you have a blog website (like this one) with a lot of articles. When somebody visits
[link] is anything), you want to serve them the static page as fast as you can.
But it is possible that you don’t want to create all static pages at build time because it would take you a lot of time. In a few cases, this isn’t possible at all at build time.
Also, sometimes your content might change, like a quick blog edit – so you don’t really want a completely static page forever either. So what’s the solution?
Using Next.js 9.5+, now you can generate static pages dynamically to the dynamic path and refresh them.
This means that once Next fetches that particular URL, it’ll save it as a static page and serve it statically whenever somebody visits the path. At the same time, it’ll be open to accepting new paths dynamically.
Not only can you do this, with a revalidate parameter, you can also actually specify that Next.js should update your static pages once every X seconds in the background if there’s any change!
#2 Webpack 5 Support
Next.js is heading towards Webpack 5 support too. This is exciting as Webpack 5 brings in some sweet performance and bundle optimizations and drops support for deprecated things in webpack 4, making the core lighter.
That means your Next.js apps will be faster than ever and more robust.
#3 Dropping of getInitialProps
I personally didn’t like the concept of having a single function execute on both environments – getInitialProps.
Thankfully, Next.js figured out that there’s a much better solution available and they brought in getServerSideProps and getStaticProps as two great methods with good names.
getServerSideProps, as the name suggests, allows you to inject props in your Next.js page from the server itself. And
getStaticProps allows Next.js to still create static outputs at build time.
getStaticProps combined with incremental static regeneration is a killer feature in my opinion. You get the many benefits of a dynamic backend without having a dynamic backend.
#4 Persistent Caching for Page Bundles
Next.js now also supports persistent caches for pages that are not changed. Before, when you shipped a new Next.js app, Next.js would throw out the whole app and the user had to download all the CSS/JS again, even if those bundles were unchanged.
In the latest version of Next.js released last week, our friends at Vercel introduced persistent caching which is again an absolutely great thing to have performance-wise.
#5 Out of the box support for Sass Modules and TypeScript
Next.js has long offered great support for TypeScript out of the box. But recently they added module-based support for Sass as well.
This means that your styles can now be written in Sass, local to your modules, with caching and revalidation – all managed by Next.js internally.
Seems like they really want you to develop the best products focusing only on the business logic.