Warning: Prop `className` did not match - Next.js

[tutods]

I'm using the AOS on my Next.js project, and after the problems with scrolls, I have another one. When I load the page I received the error on the detailed description, where the only thing different is the aos-init on className. Anyone already have this problem?

This is:

• Bug

Specifications

• AOS version: ^3.0.0-beta.6
• OS: macOS
• Browser: Firefox, Chrome, Safari

Detailed Description

Warning: Prop `className` did not match. Server: "mx-auto mb-4 w-fit rounded-full px-4 py-1 text-xs font-bold uppercase text-zinc-50/80 shadow-sm ring-1 ring-zinc-50/60 aos-init" Client: "mx-auto mb-4 w-fit rounded-full px-4 py-1 text-xs font-bold uppercase text-zinc-50/80 shadow-sm ring-1 ring-zinc-50/60"

[tutods]

Does anyone have any idea how to fix this in the Next 13?

[tomlschmidt]

When and how do you call AOS.init()? AOS is adding the class aos-init during initialization. At hydration, Next.js then experiences a mismatch between the server and client. I'm not that experienced with Next.js, but I'm guessing that's the problem. A possible solution might be calling AOS.init() in an effect. More information on the issue, you can find here: https://nextjs.org/docs/messages/react-hydration-error

[tutods]

I handle the AOS.init() in a "use client" component:

'use client';

import AOS from 'aos';
import type { ReactNode } from 'react';
import { useEffect } from 'react';

import 'aos/dist/aos.css';

export const AosInit = ({ children }: { children: ReactNode }) => {
  useEffect(() => {
    AOS.init({
      anchorPlacement: 'top-bottom',
      mirror: true,
      offset: -100,
      once: false,
    });
  }, []);

  return <>{children}</>;
};

[tutods]

After that only call this component in my layout:

[renovatt]

I have the same problem using Next.js 13+, did you manage to solve it?

[tutods]

Hi @renovatt, no. Already try a few things, but no success.

[renovatt]

I also can't understand it, because I'm using it in other projects and I don't have this problem, I've already updated all the dependencies and nothing works, I removed some providers around it and also without success. I can not understand. @tutods

[tutods]

Thanks @renovatt

[dwalks12]

I was able to solve this by following tutods method but importing it into my layout file like this:

const AosInit = dynamic(() => import('./<path>/AOSInit'), { ssr: true });

(Remember to export AOSInit as default)

[VernSG]

It seems like you're encountering a warning about a prop mismatch related to the className attribute when using AOS (Animate on Scroll) in your Next.js project. This warning typically occurs when the className generated on the server-side rendering (SSR) doesn't match the one generated on the client-side. This can happen if there's a difference in how components are rendered between server and client.

One common approach to address this is to ensure that components are rendered consistently on both the server and client sides. You might want to check if there are any dynamic or conditional rendering that could cause differences between SSR and client-side rendering. Additionally, you can use libraries like react-async-script to load AOS dynamically on the client side, which might help mitigate this issue.

[renovatt]

I was able to solve this by following tutods method but importing it into my layout file like this:

const AosInit = dynamic(() => import('./<path>/AOSInit'), { ssr: true });

(Remember to export AOSInit as default)

It didn't work for me, I had to disable it by setting it to false.

const AosInit = dynamic(() => import('@/providers/aos-provider'), {
ssr: false,
})