nextjs-plugin-jsx-loc

A Next.js plugin that adds location data attributes to JSX elements for debugging and development purposes.

Installation

npm install @builder.io/nextjs-plugin-jsx-loc
# or
yarn add @builder.io/nextjs-plugin-jsx-loc
# or
pnpm add @builder.io/nextjs-plugin-jsx-loc

Usage with Next.js

Add the plugin to your next.config.js:

const { withJsxLoc } = require('@builder.io/nextjs-plugin-jsx-loc');

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = withJsxLoc({
  // Optional: specify custom include/exclude patterns
  // include: [/src\/components/],
  // exclude: [/node_modules/, /test/]
}, nextConfig);

Or with TypeScript (next.config.mjs):

import { withJsxLoc } from '@builder.io/nextjs-plugin-jsx-loc';

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withJsxLoc({
  // Optional configuration
}, nextConfig);

Turbopack Support

This plugin works with both webpack (default) and Turbopack in Next.js applications. When you use the plugin with Turbopack, it automatically configures the necessary loaders through the turbopack.rules configuration.

To use with Turbopack in development:

# After adding the plugin to next.config.js
next dev --turbo

For production builds with Turbopack (experimental):

# Requires Next.js 15.3.0+
next build --turbo

Usage with Turborepo

For a Turborepo setup, make sure each Next.js app in your monorepo includes the plugin in its Next.js configuration.

// apps/web/next.config.js
const { withJsxLoc } = require('@builder.io/nextjs-plugin-jsx-loc');

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = withJsxLoc({}, nextConfig);

How It Works

The plugin adds a data-loc attribute to JSX elements that contains the relative file path and line number:

// Input: src/components/Button.tsx
export function Button() {
  return <button>Click me</button>;
}

// Output (during development):
export function Button() {
  return <button data-loc="src/components/Button.tsx:2">Click me</button>;
}

This allows you to identify where components are defined when inspecting the DOM.

Features

• Adds source location information to JSX elements
• Works with both .jsx and .tsx files
• Skips processing of node_modules
• Preserves source maps
• Compatible with Next.js 12+ including Turbopack
• Compatible with Turborepo monorepo setups
• No configuration required

Options

• include: RegExp or array of RegExp patterns to include specific files (optional)
• exclude: RegExp or array of RegExp patterns to exclude specific files (optional, defaults to /node_modules/)

License

MIT