Gabriel MGFC-DEV
Gabriel MGFC-DEV

Reputation: 39

Error acessing route with next-intl after link click

I have a next.js aplication that works perfectly without any error, but after I add the next-intl to handle the i18n when I click a link that redirects me to another page, it returns an error.

error:

    Only plain objects can be passed to Client Components from Server Components. Classes or other objects with methods are not supported.
  <... as={{$$typeof: ..., render: ...}} href=... variant=... color=... startContent=... radius=... className=... children=...>
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 ⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  {$$typeof: ..., render: function y}
                          ^^^^^^^^^^
    at stringify (<anonymous>) {
  digest: '302182442'
}
 GET /pt/busca?segmento=1 500 in 439ms

code of the component with the link:

 "use client";

import { Button } from "@nextui-org/react";
import { Link } from "@/i18n/routing";

// Define o tipo Segmento
interface Segmento {
  id_segmento: number;
  segmento_descricao: string;
}

interface SegmentoProps {
  segmentos: Segmento[];
}

export default function BuscaSegmento({ segmentos }: SegmentoProps) {
  return (
    <div className="mx-2 my-3 rounded-md bg-primary text-primary-foreground">
      <h1 className="py-3 text-center">SEGMENTOS</h1>
      <div className="grid grid-cols-2 gap-3 py-2 md:flex md:flex-col">
        {segmentos.map((segmento) => (
          <Button
            key={segmento.id_segmento}
            as={Link}
            href={`/busca?segmento=${segmento.id_segmento}`}
            radius="sm"
            size="md"
            variant="faded"
            color="primary"
            className="mx-5 my-2"
          >
            {`Linha ${segmento.segmento_descricao}`}
          </Button>
        ))}
      </div>
    </div>
  );
}

I already tried to wrap the link with the button, tried to create a separated component for it, but none of this work

I'm begining to work with i18n handling and I need a little help to fix this issue

Upvotes: 0

Views: 20

Answers (0)

Related Questions