Documentação Bando

Bando com Next.js

Consome conteúdo do Bando no servidor usando Server Components.

Bando + Next.js

Se já conheces Next.js, podes consumir o Bando diretamente num Server Component.

Isto é útil quando queres buscar conteúdo durante o render no servidor sem expor credenciais privilegiadas ao browser.

app/page.tsx
import { bando } from "@/lib/bando";
import type { Post } from "@/types/post";
const { data: posts } =
await bando.collection<Post>("posts").findMany({
filters: {
published: true,
},
sort: "-createdAt",
});
return (
<main>
{posts.map((post) => (
<article key={post.id}>
{post.data.title}
</article>
))}
</main>
);;

O que está acontecendo?

Primeiro pedimos ao Bando os documentos da collectionposts.

O filtro garante que apenas posts publicados sejam retornados e a ordenação coloca os mais recentes primeiro.

Depois usamos o resultado normalmente no React:

TSX
posts.map((post) => (
<article key={post.id}>
{post.data.title}
</article>
))

Por que usar o servidor?

O servidor pode manter o token fora do código entregue ao browser. Isso é especialmente importante quando a credencial possui permissões privilegiadas.

Bando com Next.js | Bando