How to pass custom html attributes in Next.js?

Question

When I pass following attributes, Next.js raise warning. Is it a way to avoid?

<div
    className="col-lg-6"
    data-anima="fade-bottom"
    data-time={1000}
></div>

and the warning message:

next-dev.js?3515:24 Warning: Extra attributes from the server: style
    at div
    at div
    at div
    at section
    at main
    at Home
    at Layout (webpack-internal:///./components/Layout.tsx:11:26)
    at AppProvider (webpack-internal:///./tikexModule/AppContext.tsx:24:26)
    at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:13:3)
    at MyApp (webpack-internal:///./pages/_app.tsx:68:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20740)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23199)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:149:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:675:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:797:27)

You mean, you want to assign the animation & javaScript properties to it? — Srinivas Murthy. N.A, Jul 11 '22 at 03:06
Simply adding a data attribute to an element would not cause that warning by itself. What library are you using that requires those data attributes in the first place? — juliomalves, Jul 11 '22 at 22:17
parallax.js is used: https://pixelcog.github.io/parallax.js/ — János, Jul 12 '22 at 04:26
If I remove `data-` custom html parameters, warning disappear. But still, this is not a solution. — János, Jul 16 '22 at 14:45

score 0 · Answer 1 · answered Oct 31 '22 at 15:26

This should work on same page, if used on another page for e.g. slug then unfortunately that will disappear upon page refresh.

For example:

HTML element code:

<div
    id="myId"
    className="col-lg-6"
    data-anima="fade-bottom"
    data-time={1000}
></div>

Your component code:

const querySelector = document?.querySelector("div[id='myId']");
const time = querySelector?.getAttribute("data-time");

console.log("%c time:", "font-size:24px;background-color:yellow;color:red;", time);

How to pass custom html attributes in Next.js?

1 Answers1