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? — Bhushan
– Bhushan, Commented Jul 11, 2022 at 3: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
– juliomalves, Commented Jul 11, 2022 at 22:17
If I remove data- custom html parameters, warning disappear. But still, this is not a solution. — János
– János, Commented Jul 16, 2022 at 14:45

Shaze · Accepted Answer · 2022-10-31 15:26:04Z

-1

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);

answered Oct 31, 2022 at 15:26

Shaze

1,0051 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass custom html attributes in Next.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related