Hey there! Let's tackle your three questions one by one, with practical examples to make things clear.

1. Basic Setup: Translating Yup Error Messages with next-intl #

First, you'll need to have next-intl configured in your Next.js project (setting up locale files, wrapping your app with NextIntlProvider, etc.). Once that's done, here's how to hook it up with Yup:

Step 1: Define Translation Strings #

Create locale-specific files for your validation messages. For example:

// public/locales/en/validation.json
{
  "required": "{field} is required",
  "invalidEmail": "Please enter a valid email address",
  "minLength": "{field} must be at least {length} characters long"
}

// public/locales/es/validation.json
{
  "required": "{field} es obligatorio",
  "invalidEmail": "Por favor ingresa un correo electrónico válido",
  "minLength": "{field} debe tener al menos {length} caracteres"
}

Step 2: Use useTranslations in Your Form Component #

In your form component, fetch the translation function and pass it to Yup's validation rules:

import { useTranslations } from 'next-intl';
import * as Yup from 'yup';
import { Formik, Form, Field } from 'formik'; // Optional, but common with Yup

export default function AuthForm() {
  const t = useTranslations('validation');

  // Build your Yup schema with translated messages
  const validationSchema = Yup.object({
    email: Yup.string()
      .email(t('invalidEmail'))
      .required(t('required', { field: 'Email' })),
    password: Yup.string()
      .required(t('required', { field: 'Password' }))
      .min(8, t('minLength', { field: 'Password', length: 8 }))
  });

  return (
    <Formik initialValues={{ email: '', password: '' }} validationSchema={validationSchema}>
      {({ errors }) => (
        <Form>
          <Field name="email" type="email" />
          {errors.email && <span>{errors.email}</span>}
          
          <Field name="password" type="password" />
          {errors.password && <span>{errors.password}</span>}
          
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

2. SSR Scenario: Translating Yup Errors on the Server #

The good news is that next-intl is designed to work seamlessly with SSR, as long as you follow its standard setup:

Key Setup for SSR #

1. Wrap Your App with NextIntlProvider: Ensure your _app.tsx or _app.jsx uses the provider, passing locale and messages from page props:

// pages/_app.tsx
import { NextIntlProvider } from 'next-intl';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  const { locale, messages } = pageProps;
  return (
    <NextIntlProvider locale={locale} messages={messages}>
      <Component {...pageProps} />
    </NextIntlProvider>
  );
}

2. Fetch Messages in Server-Side Props: In your page component, use getServerSideProps or getStaticProps to fetch the appropriate locale messages and pass them to the app:

// pages/auth.tsx
import { getTranslations } from 'next-intl/server';
import AuthForm from '../components/AuthForm';

export async function getServerSideProps(context) {
  const locale = context.locale || 'en';
  // Fetch validation messages (and any other translation files you need)
  const validationMessages = await import(`../public/locales/${locale}/validation.json`);
  
  return {
    props: {
      locale,
      messages: {
        validation: validationMessages.default
      }
    }
  };
}

export default function AuthPage() {
  return <AuthForm />;
}

How It Works #

When the page renders on the server, useTranslations in your AuthForm component will automatically access the messages passed from getServerSideProps, so Yup's error messages will be correctly translated during SSR. No extra work is needed in the form component itself—just use useTranslations as you would in a client-side scenario.

3. Using Placeholders in next-intl Translation Strings #

Absolutely! Placeholders are a core feature of next-intl, and they work perfectly with Yup. As you saw in the earlier examples:

• Define placeholders in your translation files using curly braces ({field}, {length})
• Pass values for these placeholders when calling the t function

Example with Dynamic Values #

Suppose you have a dynamic field name (e.g., a form generated from an array of fields). You can dynamically pass the field name to the translation:

// For a dynamic field like "username"
const fieldName = 'Username';
Yup.string().required(t('required', { field: fieldName }));

You can also use more complex placeholders, like pluralization or date formatting, but for Yup error messages, simple value placeholders are the most common use case.

Hope this clears up all your questions! Let me know if you need further clarification on any part.

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