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

## Introduction

Recently I've been using [Next.js](https://nextjs.org/) 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`](https://nextjs.org/docs/api-reference/create-next-app) as opposed to [`create-react-app`](https://github.com/facebook/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`](https://nextjs.org/docs/advanced-features/static-html-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](https://www.gatsbyjs.com/) 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).*

1. **The `next.config.js` [`assetPrefix`](https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix) and [`basePath`](https://nextjs.org/docs/api-reference/next.config.js/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](https://dev.to/jameswallis/next-js-basepath-and-why-its-awesome-for-github-pages-and-static-sites-41ba) - 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.*

1. **[Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching#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.*

1. **[Internationalized (i18n) routing](https://nextjs.org/docs/advanced-features/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.*

1. **[Measuring Performance - `reportWebVitals`](https://nextjs.org/docs/advanced-features/measuring-performance)**.
    * 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](https://nextjs.org/docs/advanced-features/measuring-performance#sending-results-to-analytics). 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](https://dev.to/jameswallis/adding-google-analytics-to-any-next-js-app-46h1). I use `reportWebVitals` on [my personal website](https://dev.to/jameswallis/i-completely-rewrote-my-personal-website-using-dev-to-as-a-cms-2pje).*
    * Using the following function should provide more accurate metrics than plain Google Analytics usage:
```javascript
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](https://github.com/vercel/next.js/tree/canary/examples) that is full of examples. These show you how to use technologies such as [Tailwind CSS](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss), [TypeScript](https://github.com/vercel/next.js/tree/canary/examples/with-typescript) and various CMSs such as [Contentful](https://github.com/vercel/next.js/tree/canary/examples/cms-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!