javascript / expert
Snippet
Zero-Allocation TypedArray Subarray View Slicing for Binary Frame Decoding in Next.js Middleware
This snippet showcases manipulating binary data buffers efficiently in Next.js Middleware using Uint8Array.prototype.subarray. Unlike slice, subarray creates a new TypedArray view over the existing ArrayBuffer without allocating new heap memory, enabling high-performance frame header parsing for incoming base64 payload headers.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export function parseBinaryHeader(uint8Buffer) {const magicHeader = uint8Buffer.subarray(0, 4);const payloadView = uint8Buffer.subarray(4);const isPNG = magicHeader.every((byte, i) => byte === [0x89, 0x50, 0x4e, 0x47][i]);return { isPNG, payload: payloadView };}export function middleware(request) {const headerHeader = request.headers.get('x-binary-payload');if (!headerHeader) return;const rawBytes = Uint8Array.from(Buffer.from(headerHeader, 'base64'));const { isPNG, payload } = parseBinaryHeader(rawBytes);if (!isPNG) return new Response('Invalid Format', { status: 400 });return NextResponse.next();}
nextjs
Breakdown
1
const magicHeader = uint8Buffer.subarray(0, 4);
Creates an overlapping TypedArray view slice without copying underlying byte memory.
2
const isPNG = magicHeader.every((byte, i) => byte === [0x89, 0x50, 0x4e, 0x47][i]);
Evaluates byte values directly through array iteration methods.