A webpack loader that automatically adds data attributes to your React components in Next.js.
npm install @dyad-sh/nextjs-webpack-component-taggerA webpack loader for Next.js that automatically adds data-dyad-id and data-dyad-name attributes to your React components. This is useful for identifying components in the DOM, for example for testing or analytics.
``bash`
npm install @dyad-sh/nextjs-webpack-component-taggeror
yarn add @dyad-sh/nextjs-webpack-component-taggeror
pnpm add @dyad-sh/nextjs-webpack-component-tagger
Add the loader to your next.config.js file:
`js
/* @type {import('next').NextConfig} /
const nextConfig = {
webpack: (config) => {
config.module.rules.push({
test: /\.(jsx|tsx)$/,
exclude: /node_modules/,
enforce: "pre",
use: '@dyad-sh/nextjs-webpack-component-tagger',
});
return config;
},
};
module.exports = nextConfig;
`
The loader will automatically add data-dyad-id and data-dyad-name to all your React components.
The data-dyad-id will be a unique identifier for each component instance, in the format path/to/file.tsx:line:column.
The data-dyad-name will be the name of the component.
Bump it to an alpha version and test in Dyad app, eg. "version": "0.0.1-alpha.0",
Then publish it:
`sh`
cd packages/@dyad-sh/nextjs-webpack-component-tagger/ && npm run prepublishOnly && npm publish
Update the package version in the nextjs-template repo in your personal fork.
Update the src/shared/templates.ts to use your fork of the next.js template, e.g.
`
githubUrl: "https://github.com/wwwillchen/nextjs-template",
Run the E2E tests and make sure it passes.
Then, bump to a normal version, e.g. "0.1.0" and then re-publish. We'll try to match the main Dyad app version where possible.