CODEWITHSUNDEEP
next.jsnext.js13i18nextnext-intl
Thomas A
Thomas A

Reputation: 53

Next-intl bug useTranslations Client component return Object key

I get an error when I want to use next-intl's useTranstions in a component client, it always returns the key. But in component servers it works perfectly.

I put you my code I do not understand where the error comes from

ModalPaymentMethod.tsx:

import { useTranslations } from "next-intl";

export const ModalPaymentMethod = () => {
  const t = useTranslations("PaymentMethod");
  console.log(t("trigger"));

  return (
    <AlertDialog>
      <AlertDialogTrigger className="bg-gradientPrimary hover:shadow-sm hover:shadow-default/90 text-gray-100 shadow hover:bg-defaultbutton/90 font-poppins font-medium p-2 rounded-2xl">
        Payment Method {t("trigger")}
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>
            What payment methods are available?
          </AlertDialogTitle>
          <AlertDialogDescription>
            <p>
              The site uses the stripe payment gateway, no payment information
              passes through the website. It is therefore possible to pay via
              PayPal or credit card.
            </p>
            <div className="flex flex-row items-center justify-center gap-8">
              <FaCcStripe className="h-6 w-6" />
              <FaPaypal className="h-6 w-6" />
              <CiCreditCard1 className="h-6 w-6" />
            </div>
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Close</AlertDialogCancel>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
};

en.json

  "PaymentMethod": {
    "trigger": "Payment Method",
    "title": "What payment methods are available?",
    "description": "The site uses the stripe payment gateway, no payment information passes through the website. It is therefore possible to pay via PayPal or credit card.",
    "test": "test"
  },

i18n.ts

import { notFound } from "next/navigation";
import { getRequestConfig } from "next-intl/server";

// Can be imported from a shared config
export const locales = ["en", "fr"];

export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`./messages/${locale}.json`)).default,
  };
});

next.config.js

/** @type {import('next').NextConfig} */
const createNextIntlPlugin = require('next-intl/plugin');

const withNextIntl = createNextIntlPlugin();

const nextConfig = {
    images: {
        remotePatterns: [
            {
                protocol: "https",
                hostname: "utfs.io",
                port: "",
                pathname: "/**",
            },
            {
                protocol: "https",
                hostname: "avatars.githubusercontent.com",
                port: "",
                pathname: "/**",
            },
        ],

    },
    reactStrictMode: false,
    webpack: (config) => {
        config.resolve.alias.canvas = false;

        return config;
    },
}

module.exports =
    withNextIntl(nextConfig)

Thank you in advance for your help

Upvotes: 1

Views: 329

Answers (0)

Related Questions