A custom date formatting hook for date-fns in next.js apps written in TypeScript.

use-date-formatting.ts

import {
  format,
  formatDistance,
  formatDistanceStrict,
  formatRelative,
} from 'date-fns';
import {useRouter} from 'next/router';
import {useEffect, useState} from 'react';

const noop = () => {};

type LocalizedDateFn<T> = (locale?: Locale) => T;

// TODO: Figure out why `format` has to be cast to `any` to avoid a ts(2349) error.
const localizedFormat: LocalizedDateFn<typeof format> = locale => (
  date,
  format,
  options = {}
) => (format as any)(date, format, {...options, locale});

const localizedFormatDistance: LocalizedDateFn<
  typeof formatDistance
> = locale => (date, baseDate, options = {}) =>
  formatDistanceStrict(date, baseDate, {...options, locale});

const localizedFormatDistanceStrict: LocalizedDateFn<
  typeof formatDistanceStrict
> = locale => (date, baseDate, options = {}) =>
  formatDistanceStrict(date, baseDate, {...options, locale});

const localizedFormatRelative: LocalizedDateFn<
  typeof formatRelative
> = locale => (date, baseDate, options = {}) =>
  formatRelative(date, baseDate, {...options, locale});

export function useDateFormatting() {
  const {defaultLocale, locale} = useRouter();
  const [loading, setLoading] = useState(true);
  const [dateFnsLocale, setDateFnsLocale] = useState<Locale>(undefined);
  useEffect(() => {
    const importLocale = async () => {
      const dateFnsLocales = await import('date-fns/locale');
      setDateFnsLocale(dateFnsLocales[locale]);
    };
    locale !== defaultLocale
      ? importLocale().then(() => setLoading(false))
      : setLoading(false);
  }, [defaultLocale, locale]);
  return {
    format: !loading ? localizedFormat(dateFnsLocale) : noop,
    formatDistance: !loading ? localizedFormatDistance(dateFnsLocale) : noop,
    formatDistanceStrict: !loading
      ? localizedFormatDistanceStrict(dateFnsLocale)
      : noop,
    formatRelative: !loading ? localizedFormatRelative(dateFnsLocale) : noop,
  };
}