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!
_12export 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:
_10export 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:
_10export 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.
Is Supabase compatible with 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?
Configuring Supabase to use Cookies
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:
_19const 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:
_21const 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!
How do I get started?
One command:
_10npx 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!
Meme zone
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: