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

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 exportassetPrefix 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.comexample.fr) and subpath routing (example.com/enexample.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 also haven’t used reportWebVitals but in the future I’ll add it to my Google Analytics article.

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

from Tumblr https://generouspiratequeen.tumblr.com/post/641485411257139200

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s