Business logic
with Supabase
and Next.js

Work with Supabase in a familiar Next.js paradigm. Add business logic in services implemented with PostgREST or Prisma.

GitHub
Made for Next.js

Develop with a unified API

A consistent API is exposed as a Next.js catch all API Route. Implement services with PostgREST or Prisma.

// Fetch a single record by id
export const FetchSingle = ({ id }) => {
const { data: post } = useSWR(`/api/posts/${id}`);
return (...);
};
// Fetch a single record by id
export const FetchSingle = ({ id }) => {
const { data: post } = useSWR(`/api/posts/${id}`);
return (...);
};

Get one

Fetch a single record by id

// Fetch a page of records
export const FetchPage = ({ skip, limit }) => {
const { data: posts } = useSWR(
`/api/posts?${qs.stringify({ $skip: skip, $limit: limit })}`
);
return (...);
};
// Fetch a page of records
export const FetchPage = ({ skip, limit }) => {
const { data: posts } = useSWR(
`/api/posts?${qs.stringify({ $skip: skip, $limit: limit })}`
);
return (...);
};

Get page

Fetch a page of records

// Fetch filtered records
export const FetchFiltered = ({ foo }) => {
const { data: posts } = useSWR(
`/api/posts?foo=${foo}`
);
return (...);
};
// Fetch filtered records
export const FetchFiltered = ({ foo }) => {
const { data: posts } = useSWR(
`/api/posts?foo=${foo}`
);
return (...);
};

Filter

Fetch filtered records

// Fetch records filtered by properties of a relation
export const FetchFilteredOnRelation = ({ email }) => {
const { data: posts } = useSWR(
`/api/posts?user.email=${email}`
);
return (...);
};
// Fetch records filtered by properties of a relation
export const FetchFilteredOnRelation = ({ email }) => {
const { data: posts } = useSWR(
`/api/posts?user.email=${email}`
);
return (...);
};

Filter on relations

Fetch records filtered by properties of a relation

// Fetch a single record by id
export const FetchSingle = ({ id }) => {
const { data: post } = useSWR(`/api/posts/${id}`);
return (...);
};
// Fetch a page of records
export const FetchPage = ({ skip, limit }) => {
const { data: posts } = useSWR(
`/api/posts?${qs.stringify({ $skip: skip, $limit: limit })}`
);
return (...);
};
// Fetch filtered records
export const FetchFiltered = ({ foo }) => {
const { data: posts } = useSWR(
`/api/posts?foo=${foo}`
);
return (...);
};
// Fetch records filtered by properties of a relation
export const FetchFilteredOnRelation = ({ email }) => {
const { data: posts } = useSWR(
`/api/posts?user.email=${email}`
);
return (...);
};
// Fetch a single record by id
export const FetchSingle = ({ id }) => {
const { data: post } = useSWR(`/api/posts/${id}`);
return (...);
};
// Fetch a page of records
export const FetchPage = ({ skip, limit }) => {
const { data: posts } = useSWR(
`/api/posts?${qs.stringify({ $skip: skip, $limit: limit })}`
);
return (...);
};
// Fetch filtered records
export const FetchFiltered = ({ foo }) => {
const { data: posts } = useSWR(
`/api/posts?foo=${foo}`
);
return (...);
};
// Fetch records filtered by properties of a relation
export const FetchFilteredOnRelation = ({ email }) => {
const { data: posts } = useSWR(
`/api/posts?user.email=${email}`
);
return (...);
};