Bando Documentation
Bando with Next.js
Consume Bando content on the server using Server Components.
Bando + Next.js
If you already know Next.js, you can consume Bando directly from a Server Component.
This is useful when you want to fetch content during server-side rendering without exposing privileged credentials to the browser.
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>
);
What is happening?
First, we ask Bando for documents from the postscollection.
The filter ensures that only published posts are returned, while sorting puts the most recent ones first.
Then we use the result normally in React:
posts.map((post) => (
<article key={post.id}>
{post.data.title}
</article>
))
Why use the server?
The server can keep the token out of the code delivered to the browser. This is especially important when the credential has privileged permissions.