Use Client Components work but Server Components dont work..

[atilladeniz]

Error: useLocale is not callable within an async component. Please refer to https://next-intl-docs.vercel.app/docs/environments/server-client-components#async-components

I have done the Tutorial like https://tolgee.io/js-sdk/integrations/react/next/app-router I also copy the same liek the example.. but everytime on server components it not work..

import dynamic from "next/dynamic"
import Image from "next/image"
import { notFound } from "next/navigation"

import OssyFactsBadge from "@/components/shared/OssyFactsBadge"

import ossyData from "../../../../lib/data/ossyapioffline.json"
import { Ossy } from "../../../../types/ossyproducts"

const ProductImages = dynamic(() => import("../components/ProductImages"))

const RandomProductGrid = dynamic(
  () => import("../components/RandomProductGrid")
)

async function getProduct(handle: string): Promise<Ossy | undefined> {
  const products: Ossy[] = ossyData as Ossy[]
  return products.find((product) => product.handle === handle)
}

export async function generateStaticParams() {
  const products: Ossy[] = ossyData as Ossy[]
  return products.map((product) => ({
    handle: product.handle,
  }))
}

export async function generateMetadata({
  params,
}: {
  params: { handle: string }
}) {
  const product = await getProduct(params.handle)
  if (!product) {
    return {
      title: "Produkt nicht gefunden",
      description: "Das angeforderte Produkt konnte nicht gefunden werden.",
    }
  }
  return {
    title: product.title,
    description:
      product.desc?.find((d) => d.lang === "de")?.desc ||
      "Beschreibung nicht verfügbar",
  }
}

export default async function DetailPage({
  params,
}: {
  params: { handle: string }
}) {
  const product = await getProduct(params.handle)

  if (!product) {
    notFound()
  }

  const bgColor = product.hexColor ? `bg-[${product.hexColor}]` : "bg-red-100"

  return (
    <>
      <div
        className={`absolute top-0 left-0 w-full ${bgColor} -z-10 h-[50dvh]`}
      ></div>
      <div className="flex flex-col items-center">
        {product.options
          ?.filter((option) => option.value === "1kg")
          .map((option, index) => (
            <div key={index}>
              {option.imageSrc && (
                <Image
                  src={option.imageSrc}
                  alt={product.title || ""}
                  width={676}
                  height={565}
                  priority={true}
                />
              )}
            </div>
          ))}
      </div>

      <div className="-mt-16">
        <OssyFactsBadge />
      </div>

      <div className="flex flex-col gap-24">
        <div className="flex flex-col gap-6 justify-center items-center">
          <p className="text-6xl uppercase font-config">{product.title}</p>
          <p className="max-w-md text-base text-center">
            {product.desc?.find((d) => d.lang === "de")?.desc ||
              "Beschreibung nicht verfügbar"}
          </p>
        </div>

        <div className="flex flex-col items-center">
          <ProductImages product={product} />
        </div>
      </div>

      <div className="flex flex-col gap-24">
        <div className="flex flex-col gap-6 justify-center items-center">
          <p className="text-6xl uppercase font-config">Zutaten</p>
          <p className="max-w-md text-base text-center">
            Zutaten: Tabak, Melasse, Glycerin, Aroma <br />
            Nikotin: 0,05 % <br />
            Nur für Erwachsene
          </p>
        </div>
      </div>

      <div className="mt-24 mb-12">
        <RandomProductGrid />
      </div>
    </>
  )
}

[stepan662]

Hey, you are right! There are some breaking changes in next-intl package. I'll update it to work with newest one.
In mean time, you can try to use next-intl@3.2.3, seems like that one is working.

[atilladeniz]

It works for me with next-intl@3.2.3

[stepan662]

Here is the updated docs and if you install the newest package, it should work https://tolgee.io/js-sdk/integrations/react/next/app-router