Working with Next.js is absolutely great. I firmly believe Next.js will be the foundation for a growing number of web applications for the foreseeable future. And I noticed that something is missing.

A friend to run with

Next.js itself is the best framework I have ever used to build web application. But there are some things almost every web application needs that a framework just can't provide. Some examples are Analytics, Feature Toggling, Cron Jobs, Event Tracking and so on.

The traditional solution to this problem space has been to use different SaaS-tools, each solving a different piece of the puzzle. But sometimes the pieces just don't connect with Next.js or with each other. Hard to integrate. And having to use many different services can get quite costly pretty quickly.

HappyKit wants to be your one-stop-shop which offers the most common things any web application needs out of the box. Interconnected, easy to use, quick to integrate and built specifically for Next.js.

Think of HappyKit as the "control center" for your application.

Innovation

One of the biggest innovations Next.js has brought along is that it made it possible to write code for the server and the client in the same project and even in the same file.

The existing npm ecosystem either offers packages for the client or the server. In some cases isomorphic packages can run on either side. But they are almost never written in a way where data is expected to flow from the server to the client, while including both sides.

HappyKit's tools are designed for Next.js specifically, so they can take full advantage of these capabilities. The prime example of this is Feature Toggling. As with most other Feature Toggling solutions: You can call something like useFlags() on the client to load the latest feature flags. But with HappyKit, you will be able to preload the feature flags on server-rendered pages using getServerSideProps. You can then pass them to the client as props. This allows you to get perfect server-side rendering where the server-generated markup matches the initial render on the client exactly. On the client, you'll then call useFlags(props.initialFlags) to rehydrate what the server provided. And the client will sync the flag state from thereon out.

Another example of HappyKit's tight integration with Next.js is HappyKit Analytics. HappyKit Analytics is a dead-simple analytics service specifically built for Next.js. The vast majority of current analytics services are integrated using a tiny snippet added to HTML which loads a much bigger suite later on. This slows your application down and causes an extra HTTP request. HappyKit Analytics comes as an npm package which is only 1kB as it reuses the Next.js router. No additional HTTP request to load a large analytics suite. Just a single kilobyte. Thanks to the tight integration with Next.js, HappyKit Analytics not only tracks which paths your traffic is going to, but it can further show you your most popular paths. To give a more practical example: HappyKit Analytics tracks page views of paths like /blog/foo and /blog/bar, but it can also track page views per underlying route like /blog/:slug. This allows you to get low level and high level insights without configuring anything.

Feature Flags and Analytics are just two examples of HappyKit's great pairing with Next.js. This coupling gives you big advantages over traditional solutions. We can do similar things for Performance Metrics, Event Tracking and other services. I look forward to explore these more as HappyKit grows.

Bundled

Imagine you open up HappyKit and visit the stats of one of the posts on your blog. Let's say you're viewing the stats for /blog/trip-to-california. For this route, you see how much traffic it received. That's pretty normal for any analytics service. But thanks to the Next.js integration, you can further see how much traffic blog posts under /blog/:slug receive in general. Maybe you were trying out a different blog layout. You also see which Feature Flags were enabled on this page, and the distribution of viewers who were shown each version of your layout. Maybe you were using server-side rendering to preload the feature flags. The Performance-section shows you how long server-side rendering took for this blog post, and the number of times the requests succeded/failed. Did you build a call-to-action into your blog post? You can log each newsletter signup using HappyKit Events. The same page showing you all the other information will then also show you the most recent events, and the top events fired there.

Motivation

As HappyKit grows, more and more tools will end up in its toolbox. The benefit of having interconnected, purpose-built services and aggregating the information seamlessly drives me to make HappyKit the ideal companion for Next.js.

Build less. Make more.

HappyKit is free for your personal projects. Start here.

There will likely be a paid plan for teams later on. For now I'm focused on building the best possible tools to get sophisticated users and your immensely helpful feedback.

Follow my journey building HappyKit on Twitter: @dferber90.