Connecting Metamask to Next.js

When it comes to Web3 applications, the process is often the same: You go to the website and you wait for your Metamask account to be recognized. Often you will get a splash screen, reload it a couple of times. If you are lucky it might connect quickly but you will still have to wait for data associated with your wallet to be fetched.

In web3 we want users to own their data and this is important. It is something you must keep in mind when building a web3 application or protocol. Due to this constraint, Metamask works by injecting an ethereum property on the window object. This means that applications must wait on the window object before fetching any data related to the connected user.

The problem with waiting to load data...

Frameworks like Next.js and Svelte Kit are able to seamlessly blend server and client code. This allows for a variety of data fetching strategies that improves user experience by leaps and bounds. However, waiting on the window object to start doing any fetching inevitably leads to a feeling of slowness compared to an application that can prefetch its data.

Since privacy is a core value of the Web3 space, projects are been hesitant to save data outside of the blockchain. However, there is still a benefit to querying data from the blockchain before our application hits the browser. Let's explore how we can respect users' privacy while getting the nice benefits of pre-loading data on the server.

Wen connect?

Wen connect is a relatively new library I built to keep my web3 applications performant. It's tiny at around 5kb minified. By comparison, the whole comes in at 229.6kb when minified. Wen's purpose is not to replace the Moralis SDK but it aims at being a super optimized way to build Web3 apps. Let's see how we can use it in Next.js

We will be using an example repo that I built to help you get started faster. Let's explore the big parts.

Setting up

You can deploy your own right away if you prefer to skip the explainer.

Wen relies on a battery included React context. We'll be adding it to a custom _app.tsx file (more details):

import { WenProvider } from 'wen-connect';

function MyApp({ Component, pageProps }) {
  const config = { ssr: true }
  return (
    <WenProvider config={config}>
      <Component {...pageProps} />
    </WenProvider>
  )
}

Here we are passing the ssr boolean prop to the context to indicate we want to enable Wen's capacities that make available a Metamask address in getServerSideProps. After this, we will add the JWT token capacities that Wen relies on. Let's add this code in pages/api/wen.ts

export { WenConnect as default } from "wen-connect";

We also have a WEN_SECRET environment variable inside our .env.local or .env file that is used to encrypt the JWT. Once this setup is done, we now have full access to connecting our users to Metamask with hooks:

import { useConnect } from "wen-connect";

const { connect, disconnect } = useConnect();

We can also read client-side our user address:

import { useWen, getSession } from "wen-connect";

const component = () => {
  const { connect, disconnect, wallet } = useWen(props.session);

  return <>{wallet.address}</>;
};

And even more importantly, we can get access inside getServerSideProps to the user's address:

import { useWen, getSession } from "wen-connect";

export default function Demo(props: Props) {
  const { connect, disconnect, wallet } = useWen(props.session);

  return <>{wallet.address}</>;
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  return {
    props: {
      session: getSession(context),
    },
  };
};

New patterns for Web3

Those methods are built in the library with one goal in mind: Improve UX and accessibility of applications built on blockchains. Those patterns include:

  • delivering content at the edge
  • Making permission-based dashboards
  • protecting member-based routes without having loading screens

I will be publishing examples of those patterns gradually over at Web3 examples.

Wrapping up:

Wen Connect is my humble attempt at making it easy to incorporate Metamask into your application. This library is far from mature. My humble goal is to make it the best way to integrate web3 identity inside Jamstack applications. For updates on this library or new content on this blog, follow me on Twitter