React Query with Next.js 14 App Router 📦

Learn how to use TanStack Query[0] (fka React Query) with the new Next.js 14 App Router to manage data fetching from Supabase.

- Supabase and Next.js 14: https://supabase.com/blog/supabase-is-now-compatible-with-nextjs-14?utm_source=youtube&utm_medium=social&utm_campaign=react-query&utm_content=z4l_ue0hvmo
- Read @gc_psk's blog post: https://makerkit.dev/blog/saas/supabase-react-query

Presented by Thor Schaeff (@thorwebdev https://go.thor.bio/x)

[0] https://tanstack.com/query/latest

## Chapters
00:00 Intro
00:42 Create a new Next.js app
01:45 Install the required dependencies
02:30 Create a React Query client provider in the root layout
04:30 Set up a client component for the query client provider
07:37 Create a Supabase client
10:55 Set up the environment variables
11:54 Create database types from a remote project
13:15 Import the types and provide them to the client
14:24 Create a hook to fetch data
15:30 Organizing queries in a query folder
19:50 Construct the React Query from supabase-js query
20:24 Use the query in a next.js page
23:44 Make env variables available in client components
24:28 Create Row Level security policy
25:23 Next time: Advanced Next.js Server Rendering (SSR)