feat!: Remove default of now={new Date()} from NextIntlClientProvider for usage with format.relativeTime (preparation for dynamicIO)

[amannn]

tldr; — Are you using format.relativeTime in Client Components? If not, you can skip this.

---

If you've used format.relativeTime in Client Components previously, you might have relied on a default of now={new Date()} being set on NextIntlClientProvider:

'use client';

function Component({date}) {
  const format = useFormatter();

  // Uses a global `now` by default
  format.relativeTime(date);
}

In preparation for dynamicIO and ppr, the default for now on NextIntlClientProvider has now been removed. Note however that if you're configuring a now value in i18n/request.ts, this is still inherited by NextIntlClientProvider.

Therefore, if you just want to restore the previous behavior, you can do so in i18n/request.ts:

import {getRequestConfig} from 'next-intl/server';
 
export default getRequestConfig(async () => {
  return {
    // Use this consistently in Server- and Client Components
    now: new Date()
 
    // ...
  };
});

However, if you want to prepare for upcoming rendering features in Next.js already, the relative time formatting docs now suggest to always provide now explicitly based on useNow():

import {useNow, useFormatter} from 'next-intl';
 
function FormattedDate({date}) {
  const now = useNow();
  const format = useFormatter();
 
  // Provide `now` explicitly based on `useNow()`
  format.relativeTime(date, now);
}

If you don't provide now globally, this has a few benefits:

1. Enables granular caching with PPR
2. Allows client-side components to render an updated value
3. You can still provide now globally if relevant, e.g. for consistent results when running tests

Learn more in the docs for useNow.

---

Resolves #1464

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-intl-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2024 1:47pm
next-intl-example-app-router	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2024 1:47pm
next-intl-example-app-router-without-i18n-routing	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2024 1:47pm