How to use buffer in my nextjs

[18121A05L2]

Summary

I was build a project based on Zeroknowledge proofs

for that i need to use @aztec/bb.js package in my frontend

but i was facing the following error buf.writeBigUInt64BE is not a function

for this i have tried to modify my nexjs config file to the below , but still i was facing that issue

import type { NextConfig } from "next";
import webpack from "webpack"; // Import webpack

const nextConfig: NextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback, // Preserve existing fallbacks
        buffer: require.resolve("buffer"),
      };

      config.plugins.push(
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
        })
      );
    }

    return config;
  },
};

export default nextConfig;

Additional information

No response

Example

[icyJoseph]

I see, IIRC, for client/browser code, this buffer is used https://github.com/feross/buffer to have node/browser compatibility, and as this issue points out, feross/buffer#318, Buffer.prototype.writeBigUInt64BE is undefined in that implementation. The issue also points out at the chain of imports IIRC.

You could polyfill the missing support for BigInt I guess, or change to try to keep the usage of this API server side exclusive -

[CoderDeltaLAN]

Context

• Next.js (App Router)
• Front-end needs @aztec/bb.js and uses Buffer
• Error: buf.writeBigUInt64BE is not a function (browser/client)

Why
In the browser you don’t have Node’s Buffer. The polyfill (feross/buffer) does not implement BigInt write methods (writeBigUInt64BE, etc.). So calling them on the client fails even if you alias buffer and inject Buffer with ProvidePlugin.

Fix (choose one)

A) Run Buffer logic on the server (recommended)

1. Move the code that writes to Buffer into a Route Handler/Server Action.
2. Return plain data (e.g. Uint8Array or hex) to the client.

// app/api/proof/route.ts
export async function POST(req: Request) {
  // server-only: real Node Buffer available
  const buf = Buffer.allocUnsafe(8);
  buf.writeBigUInt64BE(BigInt(123));
  return new Response(buf.toString('hex'));
}

B) Use Web APIs on the client (no Buffer)
Use ArrayBuffer + DataView#setBigUint64 which works in modern browsers.

function u64beToBytes(n: bigint) {
  const ab = new ArrayBuffer(8);
  const view = new DataView(ab);
  view.setBigUint64(0, n, false); // false = big-endian
  return new Uint8Array(ab);
}
// usage
const bytes = u64beToBytes(BigInt(123));

C) If you must polyfill Buffer in the client (not ideal)
You can alias and inject, but BigInt writers still won’t exist. Replace those calls with helpers like in B.

// next.config.js
const webpack = require('webpack');
module.exports = {
  webpack(config) {
    config.resolve.fallback = { ...(config.resolve.fallback || {}), buffer: require.resolve('buffer/') };
    config.plugins.push(new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }));
    return config;
  },
};

Notes

• feross/buffer issue about missing BigInt writers: writeBigUint64BE isn't defined, but writeBigUInt64BE is feross/buffer#318
• Web API DataView#setBigUint64: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64
• If a dependency pulls Node-only code into the client, keep its usage server-side or provide a browser-safe path.

If this fixes it, please Mark as answer so others can find it.

[icyJoseph]

Actually here option B would've been the only thing needed, just needed to try out how to polyfill it into the Buffe polyfill itself.

if (!Buffer.prototype.writeBigUInt64BE) {
  Buffer.prototype.writeBigUInt64BE = function (value, offset = 0) {
    if (typeof value !== 'bigint') {
      throw new TypeError('value must be a BigInt');
    }
    if (offset < 0 || offset + 8 > this.length) {
      throw new RangeError('offset out of range');
    }

    const view = new DataView(new ArrayBuffer(8));
    view.setBigUint64(0, value, false); // false = big-endian
    const bytes = new Uint8Array(view.buffer);
    for (let i = 0; i < 8; i++) {
      this[offset + i] = bytes[i];
    }
    return offset + 8;
  };
}

Something like that, idk -