Why You Should Start Using Next.js

Brief intro: React is a JavaScript Library and Next.js is a react framework.

I noticed recently that some developers don’t use some common features of Next.js that comes with little to no configuration, probably because its an overkill, they’re used to React.js or they might not have heard of it. We’ll go through them in a minute, but before that I’ll like to welcome developers who haven’t used Next.js to try it out and see the beauty of web development, Next.js is really worth the hype in all sense with over 82k starts and 17k fork, I can assure you that once you start using Next.js, there’s no going back. If react makes web development easy, Next.js makes it easier.

Back to the subject, this is not an introduction to Next.js per se, I’m just highlighting some features I feel you haven’t been using, and here are they.

1. Static File Serving: Incase you didn’t know, Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

2. Font Optimization: Since version 10.2, Next.js has built-in web font optimization. By default, Next.js will automatically inline font CSS at build time, eliminating an extra round trip to fetch font declarations. This results in improvements to First Contentful Paint (FCP) and Largest Contentful Paint (LCP).

3. jsconfig.json: One of my favorites, a common scenario is a react app is moving your ‘src’ folder to ‘component’, now you will have to start updating all your imports, but out of the box, Next.js takes away that problem.

Now you can paste the content in at the root of your project in a file called jsconfig.json and to import, what you’ll do is:

import HomeContainer from "@component/home";

like you’re importing a package, and if in the you change the folder, you only have to make the necessary change here.

4. Environment Variables: Since the release of Next.js 9.4, you have a more intuitive and ergonomic experience for adding environment variables. To add environment variables to the JavaScript bundle, open next.config.js at the root of your project and add the env config:

5. Image Optimization: The Next.js Image component, next/image, is an extension of the HTML <img> element, evolved for the modern web. It includes a variety of built-in performance optimizations to help you achieve good Core Web Vitals. These scores are an important measurement of user experience on your website, and are factored into Google's search rankings.

6. Measuring performance: Next.js Analytics allows you to analyze and measure the performance of pages using different metrics. You can start collecting your Real Experience Score with zero-configuration on Vercel deployments. There’s also support for Analytics if you’re self-hosting.

The rest of this documentation describes the built-in relayer Next.js Analytics uses. You can read more here.

That’s it for today, I really hope you join the unending list of developers benefitting from the effectiveness of Next.js.

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.