As part of Next.js Conf 2023, the team at Vercel released Next.js 14. The huge headline feature was...
That's right, the headline feature is no new features!
This may sound underwhelming at first, but is incredibly good news for the stability of Next.js. This release comes with a huge number of performance and stability improvements—such as Server Actions being marked as stable. This means we can finally start promoting this fantastically simple way of authenticating users—entirely server-side!
_12
export default async function Page() {
_12
const signIn = async () => {
_12
'use server'
_12
supabase.auth.signInWithOAuth({...})
_12
}
_12
_12
return (
_12
<form action={signIn}>
_12
<button>Sign in with GitHub</button>
_12
</form>
_12
)
_12
}
With Server Components, fetching data in Next.js became as simple as:
_10
export default async function Page() {
_10
const { data } = await supabase.from('...').select()
_10
return ...
_10
}
With Server Actions, you can now place mutation logic alongside the Server Components responsible for fetching data and rendering the page:
_10
export default async function Page() {
_10
const { data } = await supabase.from('...').select()
_10
_10
const createNote = async () => {
_10
'use server'
_10
await supabase.from('...').insert({...})
_10
}
_10
_10
return ...
_10
}
To hear more about our thoughts on Next.js Conf and the release of Next.js 14, check out our Twitter space. Yuri, Alaister, Terry and myself talk through how we use Next.js at Supabase and what we personally found most exciting about Next.js Conf and the release of Next.js 14.
Yes, it is! So much so that Guillermo Rauch shouted us out in the keynote!
Since the release of the App Router—launched as beta with Next.js 13—we have been working closely with the team at Vercel to ensure that Supabase is fully compatible with every part of Next.js.
So for the App Router, that's:
And for the Pages Router:
So why does it require work on the Supabase side to make it compatible with Next.js?
By default, supabase-js uses localStorage to store the user's session. This works well for client-side apps, but will fail when you try to use supabase-js in a Server Component, as there is no concept of 'localStorage' on the server.
To do this, we need to configure supabase-js to use cookies instead of localStorage when running on the server. But this code is a little verbose to ask people to duplicate across every app they build with Supabase:
_19
const supabase = createClient(supabaseUrl, supabaseAnonKey, {
_19
auth: {
_19
flowType: 'pkce',
_19
autoRefreshToken: false,
_19
detectSessionInUrl: false,
_19
persistSession: true,
_19
storage: {
_19
getItem: async (key: string) => {
_19
cookieStore.get(key)
_19
},
_19
setItem: async (key: string, value: string) => {
_19
cookieStore.set(key, value)
_19
},
_19
removeItem: async (key: string) => {
_19
cookieStore.remove(key)
_19
},
_19
},
_19
},
_19
})
That takes care of the server-side pieces of Next.js, but since we recommend securing your apps with Row Level Security (RLS) policies, you can safely access your user's session client-side too. Therefore, we need to tell the browser how access that cookie too:
_21
const supabase = createClient(supabaseUrl, supabaseAnonKey, {
_21
auth: {
_21
flowType: 'pkce',
_21
autoRefreshToken: true,
_21
detectSessionInUrl: true,
_21
persistSession: true,
_21
storage: {
_21
getItem: async (key: string) => {
_21
return parse(document.cookie[key])
_21
},
_21
setItem: async (key: string, value: string) => {
_21
document.cookie = serialize(key, value)
_21
},
_21
},
_21
removeItem: async (key: string) => {
_21
document.cookie = serialize(key, '', {
_21
maxAge: 0,
_21
})
_21
},
_21
},
_21
})
That is a lot of very confusing code! So we decided to create a package called @supabase/ssr that does all of this for you. Then we took it one step further and created a Next.js and Supabase Starter Template, so you can just focus on building your awesome app! 🚀
Check out my Next.js Conf talk to see this starter template in action!
One command:
_10
npx create-next-app@latest -e with-supabase
The landing page will guide you through the process of creating a Supabase project and configuring your environment variables.
Build in a weekend on a Friday night! Scale to millions!
As you probably know, we love memes, so we are signing off with one about the least controversial commands coming out of Next.js Conf: