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

PublishedJanuary 26, 2021

•7 min read•View as Markdown

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

James Wallis

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

I built an advanced Dev.to dashboard with historic data using Next.js and Azure Functions 📈

Do you ever watch your view count rise and wonder which posts are being read the most? I know I did. That is one reason why I chose to develop my own Dev.to analytics dashboard to display historical data such as view, reaction and follower increase ...

Apr 6, 20217 min read

I built an advanced Dev.to dashboard with historic data using Next.js and Azure Functions 📈

Using TypeScript Project References to share common code

Ever wondered if you can share interfaces, types and functions between TypeScript projects? I'm currently developing a project consisting of two separate TypeScript applications, one being a React.js dashboard and the other an Azure Function app writ...

Mar 30, 20214 min read

Using TypeScript Project References to share common code

Using getStaticProps and getStaticPaths with TypeScript - Next.js

My personal website is built on Next.js and uses both the getStaticProps and getStaticPaths functions to dynamically generate the /blog/ and /portfolio/ pages at build time. While updating both methods to use their proper TypeScript types, following ...

Mar 24, 20215 min read

Using getStaticProps and getStaticPaths with TypeScript - Next.js

The easiest way to download SVGs from a website

Usually, when adding icons to a website, I'll use React-icons. There are times, however, when I prefer to copy an exact SVG from a website. Downloading an SVG isn't as easy as downloading an image on a website. Fortunately, SVG Export extracted them ...

Mar 23, 20213 min read

The easiest way to download SVGs from a website

I completely rewrote my personal website using Dev.to as a CMS

The final weekend of January 2021 was uneventful in comparison with other years - in the UK we were in full lockdown due to the Coronavirus. It was, however, the perfect opportunity to completely rewrite my personal website. Why? I decided to redesig...

Feb 3, 20219 min read

I completely rewrote my personal website using Dev.to as a CMS

James Wallis's blog on Hashnode

8 posts

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 🤩

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).

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.

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.

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.

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.

Command Palette

Comments

More from this blog

Introduction

Features you should check out 🤩

Bonus

Final words