如何修复NextJS中next-intl的useFormatter不是函数错误？

核心原因 #

你的BlogComponent是异步函数组件，但React Hook（包括useFormatter）严格要求只能在同步的函数组件或自定义Hook中调用，异步组件返回的是Promise，不符合React组件的执行规则，导致Hook调用失效。

解决方案 #

根据你的组件类型（Client/Server Component），选择对应的修改方式：

1. 如果是Client Component（需要交互，需添加'use client'指令） #

将组件改为同步函数，数据从父组件或服务器端传递：

'use client';
import { useFormatter } from 'next-intl';

export default function BlogComponent({ blog }: { blog: Blog; }) {
  const format = useFormatter();

  const dt = format.dateTime(blog.pubDate, {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  });

  return <div>{dt}</div>;
}

2. 如果是Server Component（Next.js 13+ App Router，无交互需求） #

使用服务器端的格式化函数formatDateTime替代客户端Hook，支持异步组件：

import { formatDateTime, getMessages } from 'next-intl/server';

export default async function BlogComponent({ blog }: { blog: Blog; }) {
  const messages = await getMessages();
  const dt = formatDateTime(blog.pubDate, {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    messages,
  });

  return <div>{dt}</div>;
}

3. 额外配置检查 #

确保你的Next.js项目已正确配置next-intl的国际化上下文：
在根布局layout.tsx中添加Provider（App Router）：

import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';

export default async function RootLayout({ children }) {
  const messages = await getMessages();
  return (
    <html>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

内容的提问来源于stack exchange，提问作者delete