React Router v7 changed how we think about data loading and server rendering. Loaders, actions, nested routes — it's an elegant model for building full-stack React apps. But when it's time to add a blog? You're back to the same old choices. Option A: Integrate a headless CMS. Configure webhooks. Handle caching. Map external schemas to your app's types. Hope the API doesn't change. Option B: Build it yourself. Database models, API routes, markdown parsing, draft states, SEO tags, an editor UI. Days of work for a feature that feels like it should be solved. **Neither option respects your time.** ## Modularity Over Repetition The real problem isn't that blogs are hard. It's that we keep rebuilding the same solved problems. Auth systems, dashboards, content management — these features get reimplemented in every project, with the same patterns, the same bugs, the same technical debt. What if blog functionality was a **module**? Not a template. Not a service. A typed, full-stack feature that drops into your React Router app and respects its conventions. This is what [Better Stack](https://www.better-stack.ai/) enables. A blog plugin that provides database schemas, API handlers, React components, SEO metadata, and SSR loaders — integrated with your existing stack, not bolted on top. Let's build it. ## Prerequisites Your React Router project needs: * **[shadcn/ui](https://ui.shadcn.com/)** installed with CSS variables enabled * **[Sonner](https://ui.shadcn.com/docs/components/sonner)** `` for notifications * **[TailwindCSS v4](https://tailwindcss.com)** configured * **[@tanstack/react-query](https://tanstack.com/query)** installed ## Step 1: Install Better Stack Install the core package with a database adapter. We'll use Prisma in this guide, but Better Stack supports multiple adapters: * **`@btst/adapter-prisma`** — For Prisma ORM (PostgreSQL, MySQL, SQLite, CockroachDB) * **`@btst/adapter-drizzle`** — For Drizzle ORM * **`@btst/adapter-kysely`** — For Kysely query builder * **`@btst/adapter-mongodb`** — For MongoDB * **`@btst/adapter-memory`** — For development and testing ```bash npm install @btst/stack @tanstack/react-query @btst/adapter-prisma ``` ## Step 2: Create the Backend Instance Set up `lib/better-stack.ts` with the blog plugin: ```ts import { betterStack } from "@btst/stack" import { blogBackendPlugin } from "@btst/stack/plugins/blog/api" import { createPrismaAdapter } from "@btst/adapter-prisma" import { PrismaClient } from "@prisma/client" const prisma = new PrismaClient() const { handler, dbSchema } = betterStack({ basePath: "/api/data", plugins: { blog: blogBackendPlugin() }, adapter: (db) => createPrismaAdapter(prisma, db, { provider: "postgresql" }) }) export { handler, dbSchema } ``` One configuration. Full CRUD API. Database schema. Type safety. ## Step 3: Create the API Route React Router uses file-based routing. Create a catch-all route for Better Stack: ```ts import { handler } from "~/lib/better-stack" import type { LoaderFunctionArgs, ActionFunctionArgs } from "react-router" export async function loader({ request }: LoaderFunctionArgs) { return handler(request) } export async function action({ request }: ActionFunctionArgs) { return handler(request) } ``` Your blog API is live. Posts, tags, CRUD operations — all handled. ## Step 4: Generate the Database Schema Run the CLI to generate Prisma schema additions: ```bash npx @btst/cli generate --config=lib/better-stack.ts --orm=prisma --output=prisma/schema.prisma ``` Apply the migration: ```bash npx prisma migrate dev --name add-blog ``` ## Step 5: Set Up the Client Create `lib/better-stack-client.tsx` for client-side routing and data fetching: ```tsx import { createStackClient } from "@btst/stack/client" import { blogClientPlugin } from "@btst/stack/plugins/blog/client" import { QueryClient } from "@tanstack/react-query" const getBaseURL = () => typeof window !== 'undefined' ? (import.meta.env.VITE_BASE_URL || window.location.origin) : (process.env.BASE_URL || "http://localhost:5173") export const getStackClient = (queryClient: QueryClient) => { const baseURL = getBaseURL() return createStackClient({ plugins: { blog: blogClientPlugin({ apiBaseURL: baseURL, apiBasePath: "/api/data", siteBaseURL: baseURL, siteBasePath: "/pages", queryClient: queryClient, seo: { siteName: "My Blog", author: "Your Name", twitterHandle: "@yourhandle", locale: "en_US", defaultImage: `${baseURL}/og-image.png`, }, }) } }) } ``` ## Step 6: Configure React Query Create a query client utility: ```ts import { QueryClient, isServer } from "@tanstack/react-query" function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: isServer ? 60 * 1000 : 0, refetchOnMount: false, refetchOnWindowFocus: false, retry: false }, dehydrate: { shouldDehydrateQuery: () => true } } }) } let browserQueryClient: QueryClient | undefined = undefined export function getOrCreateQueryClient() { if (isServer) { return makeQueryClient() } if (!browserQueryClient) browserQueryClient = makeQueryClient() return browserQueryClient } ``` Add the provider to your root: ```tsx import { QueryClientProvider } from "@tanstack/react-query" import { getOrCreateQueryClient } from "~/lib/query-client" import { Outlet } from "react-router" export default function App() { const queryClient = getOrCreateQueryClient() return ( ) } ``` ## Step 7: Import Plugin Styles Add the blog CSS to your stylesheet: ```css @import "@btst/stack/plugins/blog/css"; ``` ## Step 8: Create the Layout Provider Set up React Router-specific overrides: ```tsx import { Outlet, Link, useNavigate } from "react-router" import { BetterStackProvider } from "@btst/stack/context" import type { BlogPluginOverrides } from "@btst/stack/plugins/blog/client" const getBaseURL = () => typeof window !== 'undefined' ? (import.meta.env.VITE_BASE_URL || window.location.origin) : (process.env.BASE_URL || "http://localhost:5173") type PluginOverrides = { blog: BlogPluginOverrides } export default function Layout() { const navigate = useNavigate() const baseURL = getBaseURL() return ( basePath="/pages" overrides={{ blog: { apiBaseURL: baseURL, apiBasePath: "/api/data", navigate: (href) => navigate(href), uploadImage: async (file) => { // Implement your image upload logic // e.g., upload to S3, Cloudinary, R2 return "https://example.com/uploads/image.jpg" }, Link: ({ href, children, className, ...props }) => ( {children} ), } }} > ) } ``` ## Step 9: Create the Page Handler This route handles all blog pages with SSR data loading: ```tsx import type { Route } from "./+types/index" import { useLoaderData } from "react-router" import { dehydrate, HydrationBoundary, QueryClient, useQueryClient } from "@tanstack/react-query" import { getStackClient } from "~/lib/better-stack-client" import { normalizePath } from "@btst/stack/client" export async function loader({ params }: Route.LoaderArgs) { const path = normalizePath(params["*"]) const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1000 * 60 * 5, refetchOnMount: false, retry: false } } }) const stackClient = getStackClient(queryClient) const route = stackClient.router.getRoute(path) if (route?.loader) await route.loader() const dehydratedState = dehydrate(queryClient) return { path, dehydratedState, meta: route?.meta?.() } } export function meta({ loaderData }: Route.MetaArgs) { return loaderData.meta } export default function PagesIndex() { const { path, dehydratedState } = useLoaderData() const queryClient = useQueryClient() const route = getStackClient(queryClient).router.getRoute(path) const Page = route && route.PageComponent ? :

Route not found

return dehydratedState ? ( {Page} ) : Page } ``` ## Your Blog is Ready Navigate to `/pages/blog`. You now have: **Pages:** * `/pages/blog` — Blog homepage * `/pages/blog/drafts` — Draft management * `/pages/blog/new` — Create new posts * `/pages/blog/:slug` — Individual posts * `/pages/blog/:slug/edit` — Edit posts * `/pages/blog/tag/:tagSlug` — Tag filtering **Features:** * Server-side data loading with React Router loaders * SEO meta tags via React Router's meta function * Markdown editor with live preview * Draft/publish workflow * Tag management * Hydrated client state **API:** * `GET /api/data/posts` — List with filtering * `POST /api/data/posts` — Create * `PUT /api/data/posts/:id` — Update * `DELETE /api/data/posts/:id` — Delete * `GET /api/data/tags` — List tags ## Adding Sitemap Support Better Stack generates sitemaps from all registered plugins: ```ts import type { Route } from "./+types/sitemap.xml" import { QueryClient } from "@tanstack/react-query" import { getStackClient } from "~/lib/better-stack-client" import { sitemapEntryToXmlString } from "@btst/stack/client" export async function loader({}: Route.LoaderArgs) { const queryClient = new QueryClient() const stackClient = getStackClient(queryClient) const entries = await stackClient.generateSitemap() const xml = sitemapEntryToXmlString(entries) return new Response(xml, { headers: { "Content-Type": "application/xml; charset=utf-8", "Cache-Control": "public, max-age=0, s-maxage=3600", }, }) } ``` ## Adding Authorization Protect your blog with lifecycle hooks: ```ts import { blogBackendPlugin, type BlogBackendHooks } from "@btst/stack/plugins/blog/api" const blogHooks: BlogBackendHooks = { onBeforeListPosts(filter, context) { // Only admins can view drafts if (filter.published === false) { return isAdmin(context.headers as Headers) } return true }, onBeforeCreatePost(data, context) { return isAdmin(context.headers as Headers) }, onBeforeUpdatePost(postId, data, context) { return isAdmin(context.headers as Headers) }, onBeforeDeletePost(postId, context) { return isAdmin(context.headers as Headers) }, } const { handler, dbSchema } = betterStack({ plugins: { blog: blogBackendPlugin(blogHooks) }, // ... }) ``` ## The Bigger Picture React Router's loader/action pattern is brilliant for data flow. But it doesn't solve feature reuse. Every project still rebuilds the same CRUD, the same forms, the same patterns. Better Stack fills that gap. It provides **horizontal slices** — features that cut across data, API, and UI — designed to work with your framework's conventions, not against them. This isn't about generating boilerplate. It's about composing production-ready features from well-designed modules. The blog plugin respects React Router's mental model: loaders prefetch, components render, actions mutate. It just handles the implementation. Stop rebuilding infrastructure. Start building products. *** **Resources:** * [Full Installation Guide](https://www.better-stack.ai/docs/installation) — Complete setup instructions for all frameworks and adapters * [Better Stack Documentation](https://www.better-stack.ai/docs) * [Blog Plugin Reference](https://www.better-stack.ai/docs/plugins/blog) * [Database Adapters](https://www.better-stack.ai/docs/databases/adapters) — Detailed configuration for Prisma, Drizzle, Kysely, and MongoDB * [React Router Example Repository](https://github.com/better-stack-ai/better-stack/tree/main/examples/react-router)

React Router Posts

Command Palette