Duplicate today classes when calendar is pre-rendered with Next.js 15

[franciscolourenco]

When using RDP with Next.js 15, the page is pre-rendered at build time, applying the "today" classname on the day of the build. After the calendar is loaded in the client, an additional "today" classname is applied on today's date. At this point, two "today" days are displaying in the calendar.

Switching between months corrects the problem, but until then, two "today" dates are displayed.

To reproduce

'use client'

import { DayPicker } from "react-day-picker";
import "react-day-picker/style.css";

export default function App() {
  return <DayPicker mode="single" />;
}

Actual Behavior

The day in which the app was built is incorrectly displayed as today, alongside today's date.

Expected Behavior

The day in which the app was built should loose the classnames when the calendar is mounted on the client.

Screenshots

[rodgobbi]

@franciscolourenco Perhaps this is a hydration bug on the Next.js side.

I don't have in-depth experience with SSR and Next.js, so it would be great if more details could be shared to help debug the issue.
I'd assume if the HTML element served to the client has class equal to X, and on the client it renders with class equal to Y, the framework should sync the DOM back to the correct state.
But I don't know if this would be considered a hydration error.
cc @gpbl

To solve the issue now, a possible workaround would be to force the today prop to a value far in the past during build time, so the today class is never rendered in the output and only on the client side.

[gpbl]

This is an interesting case. Probably, @franciscolourenco expected this class to be unique within the calendar. However, when rehydrated, DayPicker just adds the today class, creating a duplicate "today".

I think the best option would be to skip server-side rendering for the DayPicker component: https://nextjs.org/docs/pages/guides/lazy-loading#with-no-ssr

// components/DayPickerWrapper.tsx
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/dist/style.css';

export default function DayPickerWrapper(props: any) {
  return <DayPicker {...props} />;
}

// pages/your-page.tsx or any component
import dynamic from 'next/dynamic';

const DayPickerNoSSR = dynamic(() => import('@/components/DayPickerWrapper'), {
  ssr: false,
});

export default function YourPage() {
  return (
    <div>
      <h1>Select a Date</h1>
      <DayPickerNoSSR />
    </div>
  );
}

What do you think @franciscolourenco - is SSR of the calendar a requirement for you?