Using Next.js

Please use at least version 1.6.0 of @spindl-xyz/attribution or @spindl-xyz/attribution-lite for this feature.

1. Add Next.js Code

Option 1) Using Rewrites as proxy

Add ingest route that using rewrites() method forwards the data to https://spindl.link/ in your next.config file


// next.config.js OR next.config.ts
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/ingest/:path*",
        destination: "https://spindl.link/:path*",
      },
    ];
  },
  // ...
}
module.exports = nextConfig

This should work! If you’re experiencing any issues, Option 2 is an alternative!

Option 2) Use Custom Middleware using App Router

If option 1 doesn’t work, you can write a custom middleware middleware.js/ts in your base directory (your app folder) to point /ingest url to our spindl.link hostname


import { NextResponse } from "next/server";
 
export function middleware(request: any) {
  const hostname = "spindl.link";
 
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set("host", hostname);
 
  let url = request.nextUrl.clone();
  url.protocol = "https";
  url.hostname = hostname;
  url.port = 443;
  url.pathname = url.pathname.replace(/^\/ingest/, "");
 
  return NextResponse.rewrite(url, {
    headers: requestHeaders,
  });
}
 
export const config = {
  matcher: "/ingest/:path*",
};

2. Configure Spindl SDK host with the proxy

Add host url to spindl configure object with the proxy host url


spindl.configure({
  sdkKey: "<your SDK API key here>",
  host: "https://your-host-url.com/ingest"
});

You can use the window.location.origin as part of host url but in SSR contexts like Next.js you may need to check if window is defined first


if (typeof window !== "undefined") {
  spindl.configure({
    sdkKey: process.env.NEXT_PUBLIC_SPINDL_SDK_KEY as string,
    host: `${window.location.origin}/ingest`,
  });
}