NextJS13 — How can I use a custom hook in a server component?

Question

The goal for me is to retrieve some data from the server component then use a hook to store that data into local storage. I made a custom hook called useSettings that stores the data into local storage after the server component Pages gets the data from setSettings function.

export default async function Pages({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  const headersList = headers();
  const settings = await setSettings({ host: headersList.get('host') });

  const clientSettings = useSettings()

  return <div className="text-lg font-bold">HELLO WORLD</div>;
}

When I try the above, I get this error:

_shared_hooks_useSettings__WEBPACK_IMPORTED_MODULE_3___default(...) is not a function

This is what my useSettings hook component looks like:

'use client';

export default function useSettings() {
    console.log(window.location)
    console.log("HELLO")


    return <div className=""></div>
}

I understand this error is coming from the fact that the Page server component is reading useSettings() as a server function, but since useSettings is a client component, there is no way the Page component would find it.

Is there a way to embed a working custom client hook component inside of a server component?

EDIT: This is a working work-around. Since anything inside the return statement eventually spits it out on the client side, this works. But it's ugly and I'm sure there is a better way

export default async function Pages({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  const headersList = headers();
  const settings = await setSettings({ host: headersList.get('host') });

  return (
    <div className="text-lg font-bold">
      HELLO WORLD
      <div className="hidden">
        <UseSettings settings={settings} />
      </div>
    </div>
  );
}

NextJS13 — How can I use a custom hook in a server component?

0 Answers0