Next.js Discord

Discord Forum

Next.js 13, SSG + React-tabs + Supabase

Answered
Oak shoot sawfly posted this in #help-forum
Open in Discord
Oak shoot sawflyOP
I want to use react-tabs (https://www.npmjs.com/package/react-tabs) to add tabs to my statically generated pages.
However, because react-tabs utilizes useState, it necessitates "use client."

I'm receiving an error stating "async/await is not supported to use with 'use client' together" as I'm using supabase inside generateStaticParams() as specified here: https://supabase.com/blog/fetching-and-caching-supabase-data-in-next-js-server-components.

Can somebody advise me on how to properly incorporate tabs inside SSG pages?

Thanks in advance!
Answered by Oak shoot sawfly
Got help from supabase's discord.
Solved by making a client page and passing the data from the server component.
View full answer

4 Replies

Why you cant create this yourself
Or use something like headless UI or shadcn which looks way better than this
Oak shoot sawflyOP
Thanks for replying @DennisK
Isn't that the same thing? Implementing tabs by myself or other libs, it still require 'use client' which is incompatible with async/await inside generateStaticParams() function in the page.
Oak shoot sawflyOP
Got help from supabase's discord.
Solved by making a client page and passing the data from the server component.
Answer