getTranslations is not supported on the client side?

[lynn1286]

Is it possible to design a function that can use next-intl on both the server and client side, I need to call an ajax request function on both the server and client side, and this function needs to use next-intl internally.

const marketing = async (params: IMarketingProps) => {
  const t = await getTranslations('Error');   //  <-  This function is not available on the client side, getTranslations does not support client-side calls.
  const queryParams = new URLSearchParams(params);
  const url = `/api/marketing?${queryParams.toString()}`;

  try {
    const response = await fetchWrapper.get(url, {
      next: { revalidate: 10 },
      _isReturnNativeResponse: true,
    });
    if (!response.ok) throw new Error(t('networkResponse'));

    const data = (await response.json()) as ResponseResult<IMarketingResponse>;
    return data;
  } catch (error) {
    if (error instanceof TypeError) {
      throw new Error(t('networkError'));
    }
    throw error;
  }
};

[amannn]

getTranslations works in Server Actions, is that what you're looking for? Otherwise you can consider saving the API response in React's state and using another React component that uses useTranslations to turn the API response into a human-readable message. The React component that turns the API response into a message can be used in all environments.