how to use it in non page settings?

[ch930410]

Is your feature request related to a problem? Please describe.

I am currently using Axios and I would like to create a pop-up in reject. The text is in multiple languages, so how should I write it

Describe the solution you'd like

I don't know if there is a writing style like $t ('message. ok ')?

Describe alternatives you've considered

I don't know if there is a writing style like $t ('message. ok ')?

[amannn]

This might be relevant: https://next-intl.dev/blog/translations-outside-of-react-components

I'll move this to a discussion since it's a usage question.

[Andrew1326]

To expand on what @amannn linked — here's a concrete example of how to use next-intl translations inside an Axios interceptor (outside of React components):

Setup: Create a translation helper

// lib/i18n/getTranslation.ts
import { createTranslator } from 'next-intl';
import { getLocale, getMessages } from 'next-intl/server';

// For server-side usage (API routes, server actions, etc.)
export async function getServerTranslator(namespace?: string) {
  const locale = await getLocale();
  const messages = await getMessages();
  return createTranslator({ locale, messages, namespace });
}

Option 1: Client-side Axios interceptor (most common)

Since Axios interceptors run on the client, you can't use server-only APIs. Instead, pass the translation function from a React context:

// lib/api.ts
import axios from 'axios';

const api = axios.create({ baseURL: '/api' });

// Store a reference to the translate function
let translateFn: ((key: string) => string) | null = null;

export function setTranslateFn(t: (key: string) => string) {
  translateFn = t;
}

api.interceptors.response.use(
  (response) => response,
  (error) => {
    const message = translateFn
      ? translateFn(`errors.${error.response?.status || 'unknown'}`)
      : error.message;
    
    // Show your toast/popup with the translated message
    toast.error(message);
    return Promise.reject(error);
  }
);

export default api;

Then in your root layout or a provider component:

'use client';
import { useTranslations } from 'next-intl';
import { setTranslateFn } from '@/lib/api';
import { useEffect } from 'react';

export function ApiTranslationProvider({ children }: { children: React.ReactNode }) {
  const t = useTranslations('api');

  useEffect(() => {
    setTranslateFn((key: string) => t(key));
  }, [t]);

  return <>{children}</>;
}

Option 2: Server-side (API routes, server actions)

// In a server action or API route
import { getServerTranslator } from '@/lib/i18n/getTranslation';

export async function myServerAction() {
  const t = await getServerTranslator('messages');
  
  // Now use t('ok'), t('error'), etc.
  return { message: t('ok') };
}

Messages file

{
  "api": {
    "errors": {
      "401": "Please log in to continue",
      "403": "You don't have permission",
      "404": "Not found",
      "500": "Server error, please try again",
      "unknown": "Something went wrong"
    }
  },
  "messages": {
    "ok": "Success"
  }
}

The key takeaway: there's no global $t() function like Vue's vue-i18n. In Next.js with next-intl, you either use the useTranslations hook (client components) or createTranslator (outside React).