Getting errors when tried to use useTranslations within client component #976

tnkshuuhei · 2024-04-03T15:23:42Z

tnkshuuhei
Apr 3, 2024

I'm trying to use next-intl within client component. then getting these errors

directory structure

.
├── README.md
├── abis
├── app
│   ├── [locale]
│   │   ├── account
│   │   ├── admin
│   │   ├── icon.svg
│   │   ├── layout.tsx
│   │   ├── login
│   │   └── page.tsx
│   ├── globals.css
│   ├── i18n.ts
│   ├── layout.tsx
│   ├── middleware.ts
│   ├── not-found.tsx
│   └── page.tsx
├── components
├── components.json
├── hooks
├── lib
├── messages
│   ├── en.json
│   └── jp.json
├── next-env.d.ts
├── next.config.js
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── tailwind.config.js
├── tsconfig.json

At first, I got this error when I try to use useTranslations within client components.

This can happen because:
You intended to render this component as a Server Component, the render
failed, and therefore React attempted to render the component on the client
instead. If this is the case, check the console for server errors.
You intended to render this component on the client side, but no context was found.
Learn more about this error here: https://next-intl-docs.vercel.app/docs/environments/server-client-components#missing-context

then I tried to to wrap children with NextIntlClientProvider but getting error

app/[locale]/layout.tsx

"use client";
...
import { NextIntlClientProvider, useMessages } from "next-intl";
import { notFound } from "next/navigation";

...

export default function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const messages = useMessages();

  return (
    <html lang={locale}>
      <NextIntlClientProvider messages={messages} locale={locale}>
        <body>
          <AuthCoreContextProvider ... >
            <WagmiProvider config={wagmiConfig} reconnectOnMount={true}>
              <QueryClientProvider client={client}>
                <RainbowKitProvider initialChain={wagmiConfig.chains[0]}>
                  <StateProvider>
                    <ApolloProvider client={apollo}>
                      <Header locale={locale} />
                      <Toaster />
                      {children}
                    </ApolloProvider>
                  </StateProvider>
                </RainbowKitProvider>
              </QueryClientProvider>
            </WagmiProvider>
          </AuthCoreContextProvider>
        </body>
      </NextIntlClientProvider>
    </html>
  );
}

app/middleware.ts

import createMiddleware from "next-intl/middleware";

export default createMiddleware({
  // A list of all locales that are supported
  locales: ["en", "jp"],

  // Used when no locale matches
  defaultLocale: "en",
});

export const config = {
  // Match only internationalized pathnames
  matcher: ["/", "/(jp|en)/:path*"],
};

app/i18n.ts

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

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

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

const createNextIntlPlugin = require("next-intl/plugin");

const withNextIntl = createNextIntlPlugin(
  /* Any configuration options here */
  "./app/i18n.ts"
);

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ["ipfs.io", "github.com", "gateway.pinata.cloud"],
  },
};

module.exports = withNextIntl(nextConfig);

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Getting errors when tried to use useTranslations within client component #976

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Getting errors when tried to use useTranslations within client component #976

Uh oh!

Uh oh!

tnkshuuhei Apr 3, 2024

At first, I got this error when I try to use useTranslations within client components.

then I tried to to wrap children with NextIntlClientProvider but getting error

Replies: 0 comments

tnkshuuhei
Apr 3, 2024