https://github.com/wpcodevo/nextjs-react-query-supabase

In this article, you will learn how to use Supabase with React Query in the new Next.js app directory, focusing on both client and server components. Additionally, you will learn how to leverage the Supabase CLI for performing database migrations and seeding data with dummy content for testing.
https://github.com/wpcodevo/nextjs-react-query-supabase

nextjs nextjs14 postgresql react-query reactjs supabase supabase-js

Last synced: 4 months ago
JSON representation

In this article, you will learn how to use Supabase with React Query in the new Next.js app directory, focusing on both client and server components. Additionally, you will learn how to leverage the Supabase CLI for performing database migrations and seeding data with dummy content for testing.

• Host: GitHub
• URL: https://github.com/wpcodevo/nextjs-react-query-supabase
• Owner: wpcodevo
• Created: 2024-01-15T19:17:54.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-01-17T13:19:36.000Z (about 1 year ago)
• Last Synced: 2024-09-28T11:01:11.960Z (4 months ago)
• Topics: nextjs, nextjs14, postgresql, react-query, reactjs, supabase, supabase-js
• Language: TypeScript
• Homepage: https://codevoweb.com/using-react-query-with-supabase-in-next-js-app-router/
• Size: 77.1 KB
• Stars: 4
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Using React Query with Supabase in Next.js App Router

In this article, you will learn how to use Supabase with React Query in the new Next.js app directory, focusing on both client and server components. Additionally, you will learn how to leverage the Supabase CLI for performing database migrations and seeding data with dummy content for testing.

![Using React Query with Supabase in Next.js App Router](https://codevoweb.com/wp-content/uploads/2024/01/Using-React-Query-with-Supabase-in-Next.js-App-Router.webp)

### Topics Covered

- Bootstrap the Next.js 14+ Project

- Install the Necessary Dependencies

- Create a Project on Supabase

- Setup Supabase in the Next.js App Router

  - Initialize and Perform Migrations with the Supabase CLI

  - Generate the Database Types with the Supabase CLI

- Set Up React Query in the Next.js App Router

- Create the Supabase Client

- Create a Hook to Fetch Data

- Create a Hook to Mutate Data

- Using Supabase and React Query on the Client

  - Fetching Data in a Client Component

  - Mutating Data in a Client Component

  - Render the Components in a Page File

- Using Supabase and React Query on the Server

  - Create the Supabase Server Client

  - Prefetch Data on the Server

- Conclusion

Read the entire article here: [https://codevoweb.com/using-react-query-with-supabase-in-next-js-app-router/](https://codevoweb.com/using-react-query-with-supabase-in-next-js-app-router/)