Add file logging to next.js loader based on tanstack devtool console enhancer

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      "*.{ts,tsx}": {
        loaders: ["./sample-console-log.mjs"],
      },
    },
  },
};

export default nextConfig;

sample-console-log.mjs

import path from "node:path";

export default function (source) {
  const context = this.rootContext || process.cwd();
  const file = path.relative(context, this.resource);

  return source.replace(
    /console\.log\(/g,
    () => `console.log("%c[${file}] → ", "color: #03A9F4;", `
  );
}

here is how it is done with babel parser in the TanStack/devtools

https://github.com/TanStack/devtools/blob/main/packages/devtools-vite/src/enhance-logs.ts#L47