Next.js Discord

Discord Forum

tRPC + supabase with Nextjs

Answered
Wuchang bream posted this in #help-forum
Open in Discord
Wuchang breamOP
"I'm seeking assistance in integrating Supabase with tRPC and the Next.js app router. Any guidance on this matter would be greatly appreciated."
Answered by Ray
import { createServerClient } from '@supabase/ssr' this one
View full answer

16 Replies

Wuchang breamOP
Like to use supabase i need to create a supabaseClient, which depends which type of client you need to create like for client component , server component , route handler https://supabase.com/docs/guides/auth/server-side/creating-a-client. so i am confused which client should be createad so that i can add supabaseClient to my tRPC context
export const createTRPCContext = async (opts: {
  headers: Headers;
  cookieStore: ReadonlyRequestCookies;
}) => {
  const supabase = serverClient(opts.cookieStore); // which supabase client to use

  return {
    db,
    ...opts,
    supabase,
  };
};
@Ray use the server one
Wuchang breamOP
Thanks for replying, like the client for server component or route handler because both are for the server right?
Wuchang breamOP
You can see both the clients at https://supabase.com/docs/guides/auth/server-side/creating-a-client supa docs
Ray
you don't need the browser one with trpc
Wuchang breamOP
I will be using tRPC on browser too
Ray
unless you need to use subscribe the real time change on the table
Wuchang breamOP
Like I'll be using the tRPC server client to query data from a react server component.
So should I go with the supabase route handler client and add it to my context?
Ray
import { createServerClient } from '@supabase/ssr' this one
Answer
Wuchang breamOP
Thanks 😊