Next.js Features

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.

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 utilized next export, assets prefix, 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 been 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 that 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 analyze 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 to your own analytical service. They supply an example of this for use with Google Analytics.