[Dúvida] Como faz um componente no nextjs que o valor dele vem de um api

"use client" import { PersonalitiesProps } from "@/@types/personalities" import { useEffect, useState } from "react" const Personalities = () => { const [apiData, setApiData] = useState<PersonalitiesProps | null>(null) useEffect(() => { const feachData = async () => { try { const res = await fetch("http://localhost:8000/api/v1/personalidades", { method: "GET", headers: { "Content-Type": "application/json" } }) const result = await res.json() console.log(result) setApiData({ data: result }) } catch (error) { console.error(error) } } feachData() }, []) // TODO - CRIAR COMPONENT SEPARADO TANTO DE TITULO QUANTO DE TEXTO console.log(apiData) return ( <section> {apiData && apiData.data && apiData.data.map(nomes => ( <div key={nomes.nome}> <h1> {nomes.nome} </h1> </div> ))} {apiData && apiData.data && apiData.data.map(personalidades => ( <div key={personalidades.id}> <h2>{personalidades.nome}</h2> <p>{personalidades.historia}</p> </div> ))} </section> ) } export default Personalities

Oi!

Pra criar os componentes separados, é só fazer dois novos, um pro título e outro pra descrição.

// components/Title.tsx
import React from 'react';

interface TitleProps {
  text: string;
}

const Title: React.FC<TitleProps> = ({ text }) => {
  return <h1>{text}</h1>;
};

export default Title;

// components/Description.tsx
import React from 'react';

interface DescriptionProps {
  text: string;
}

const Description: React.FC<DescriptionProps> = ({ text }) => {
  return <p>{text}</p>;
};

export default Description;

Agora, no teu componente Personalities, é só importar esses novos e usar assim:

// components/Personalities.tsx
import React, { useEffect, useState } from 'react';
import Title from './Title';
import Description from './Description';
import { PersonalitiesProps } from "@/@types/personalities";

const Personalities = () => {
  const [apiData, setApiData] = useState<PersonalitiesProps | null>(null);

  // ... teu código de fetch aqui ...

  return (
    <section>
      {apiData && apiData.data && apiData.data.map(personalidade => (
        <div key={personalidade.id}>
          <Title text={personalidade.nome} />
          <Description text={personalidade.historia} />
        </div>
      ))}
    </section>
  );
};

export default Personalities;

Usei personalidade.id pra chave (key) de cada div. Isso deve dar um jeito no problema das chaves duplicadas que tá te pegando. É importante que cada elemento no map tenha uma chave única pro React se virar direitinho.

Confirma que cada id de personalidade é único. Se ainda tiver dando erro, dá uma conferida nos dados que tão vindo da API pra garantir que não tem id repetido.

Valeu!