The `@verida/account-web-vault` package doesn't work in a Next.js application by default

[andy-verida]

Issue

When implementing Verida SSO on a Next.js app, we install the @verida/account-web-vault dependency. Upon running the application, there's an error loading the Sora font used by the login modal.

Workaround

Update the Next.js configuration to support loading static font files.

• Install file-loader

yarn add -D file-loader

• In the file next.config.mjs

const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          publicPath: '/_next/static/fonts/',
          outputPath: `${isServer ? '../' : ''}static/fonts/`,
        },
      },
    });

    return config;
  }
}

Some solutions

• Create an instruction for Next.js users
• Create a dedicated @verida/account-web-vault-nextjs
• How to identify a Next.js application and handle it in the code (not sure we can do that)