5 built-in Next.js features you absolutely should check out

Introduction

Recently I've been using Next.js both at work and on after-work projects. Next.js is React framework that enables functionality such as server-side rendering and generating static websites. It has become my go-to technology when I'm building a frontend application, overtaking plain old React.

With Next.js you get many things out of the box such as built-in routing, automatic code splitting and it will even decide whether your app can be statically rendered or needs to be rendered server-side on every request - all of this without any configuration. In fact, when creating a new React application I default to using create-next-app as opposed to create-react-app.

During my time developing with Next.js I discovered a few features which are easy to miss when you're just getting started. Some of these features helped me solve some problems I was having with my application.

Features you should check out 🤩

1. Export your Next.js application into static HTML using next export.

   • Giving you the ability to run it without a running Node.js server while still being able to make data-fetching requests at build time using getStaticProps. This feature bridges the gap between Next.js and its longtime alternative Gatsby which is exclusively a static site generator.
   • I've used next export to host a Next.js site on GitHub Pages (although with issues that were solved with the subsequent feature).

2. The next.config.js assetPrefix and basePath options.

   • On its own assetPrefix allows you to prefix all URLs to assets, like images, so that you can use assets hosted on a CDN. While basePath provides the ability to host the app on the subpath of a domain such as https://domain.com/app-on-this-subpath.
   • In the past I've utilised next export, assetPrefix and basePath together to host a Next.js app on GitHub Pages - without assetPrefix and basePath you are unable to host a Next.js project on GitHub pages (without a custom domain) as it puts them on a subpath.

3. Incremental Static Regeneration.

   • A feature of getStaticProps which allows you to regenerate a static page while your app is running. It works by triggering a page rebuild in the background, which fetches updated page data, and replaces the existing HTML page with the newly generated one once the build has completed.
   • I haven't tried this feature but will in the future as it is a better alternative to completely rebuilding a static Next.js application each time data that it relies on changes.

4. Internationalized (i18n) routing.

   • If you're building a website that will be available in different countries, this feature is a game-changer. It makes supporting multiple languages simpler by enabling you to provide a list of supported locales which Next.js can read and automatically set up routing to ensure that users see the correct locale for their country. You can assign a default locale that will be used when no matching locale is detected for a user. Next.js supports both domain routing (example.com, example.fr) and subpath routing (example.com/en, example.com/fr) meaning it doesn't restrict how you plan to host your application.
   • If I ever decide to make my website multi-lingual or work on a global project, this is a feature I will definitely be using.

5. Measuring Performance - reportWebVitals.

   • Next.js contains a built-in relayer allowing you to analyse and measure the performance of your application. To activate this you use the built-in function reportWebVitals. Next.js calls reportWebVitals with a single metrics parameter, an object containing various properties such as an id, the startTime of a metric and a value which can be the duration of a metric. This function will be called when running on the client-side. In development, you can simply log out the values to easily measure the performance of your application. In production, however, you can use this function to send the metrics to your own analytical service. They supply an example of this for use with Google Analytics.
   • I haven't used reportWebVitals but in the future I'll add it to my Google Analytics article. I use reportWebVitals on my personal website.
   • Using the following function should provide more accurate metrics than plain Google Analytics usage:

export function reportWebVitals({ id, name, label, value }) {
  // Use `window.gtag` if you initialized Google Analytics as this example:
  // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_document.js
  window.gtag('event', name, {
    event_category:
      label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',
    value: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
    event_label: id, // id unique to current page load
    non_interaction: true, // avoids affecting bounce rate.
  })
}

Bonus

• The incredible amount of examples available in the Next.js GitHub repository.

  • If you haven't already stumbled onto them, the Next.js GitHub repository contains an examples directory that is full of examples. These show you how to use technologies such as Tailwind CSS, TypeScript and various CMSs such as Contentful with Next.js. You can use create-next-app to download an example.

  • When I am incorporating new technology into an existing Next.js application, the example directory is the first place I check for guidance on how to integrate it.

Final words

These are just a few of the features that Next.js includes that can automatically improve your application without having to install any external dependencies.

If you liked this article, hit the like button. Something I can do better? Leave a comment!

Thanks for reading!