Warning: Prop `className` did not match.

I have been having this issue since last night, i did some research but couldn’t find any solution

I’m not using Material ui or Styled components

CustomLink

import { withRouter } from "next/router";
import Link from "next/link";
import React, { Children } from "react";
import cx from "classnames";

const ActiveLink = ({ router, children, ...props }) => {
  const child = Children.only(children);

  const className = cx(child.props.className, {
    [props.activeClassName]: router.asPath === props.as && props.activeClassName
  });

  delete props.activeClassName;

  return <Link {...props}>{React.cloneElement(child, { className })}</Link>;
};

export default withRouter(ActiveLink);

Nav.js

import "../../static/styles/Nav.scss";

const Nav = () => {
  return (
    <nav className="navbar">
      <Link
        href="/player?name=xXSARKURDZz&platform=psn"
        as="/player/psn/xXSARKURDZz"
        activeClassName="navbar__item-active"
      >
        <a className="navbar__item">Profile</a>
      </Link>

      <Link
        href="/gambit?name=xXSARKURDZz&platform=psn"
        as="/player/psn/xXSARKURDZz/gambit"
        activeClassName="navbar__item-active"
      >
        <a className="navbar__item">Gambit</a>
      </Link>
    
    </nav>
  );
};

export default Nav;

[Sergioamjr]

I fixed this issue editing my .babelrc file to

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      { "ssr": true, "displayName": true, "preprocess": false }
    ]
  ]
}

[diegomjasso]

The solution is here: https://stackoverflow.com/a/61621949/7741752