Framework examples
Keep the API key on the server everywhere below-the SDK is designed for Server Components, loaders, and API routes, not browser bundles.
Next.js (App Router)
Use in Server Components, Route Handlers, or generateStaticParams. Never import the SDK in client components.
app/blog/page.tsx
// app/blog/page.tsx - Server Component
import { NexoFlow } from "nexoflow-sdk"
const nf = new NexoFlow({
apiKey: process.env.NEXOFLOW_API_KEY!,
revalidate: 60,
})
export default async function BlogPage() {
const { data } = await nf.posts.list({ limit: 12 })
return (
<main>
{data.posts.map((post) => (
<article key={post.slug}>
{post.featuredImageUrl && (
<img src={post.featuredImageUrl} alt={post.title} />
)}
<a href={`/blog/${post.slug}`}><h2>{post.title}</h2></a>
<p>{post.excerpt}</p>
</article>
))}
{data.pagination.hasMore && (
<a href={`/blog?page=${data.pagination.page + 1}`}>Next page</a>
)}
</main>
)
}app/blog/[slug]/page.tsx
// app/blog/[slug]/page.tsx - single post + SSG
import { NexoFlow, NexoFlowError } from "nexoflow-sdk"
import { notFound } from "next/navigation"
const nf = new NexoFlow({ apiKey: process.env.NEXOFLOW_API_KEY! })
export async function generateStaticParams() {
return await nf.posts.slugs()
}
export default async function PostPage({ params }: { params: { slug: string } }) {
try {
const { data: post } = await nf.posts.get(params.slug, { styled: true })
return (
<article>
<h1>{post.title}</h1>
{post.contentStyles && (
<style dangerouslySetInnerHTML={{ __html: post.contentStyles }} />
)}
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</article>
)
} catch (err) {
if (err instanceof NexoFlowError && err.isNotFound) notFound()
throw err
}
}Nuxt 3
server/api/posts.ts
// server/api/posts.ts
import { NexoFlow } from "nexoflow-sdk"
const nf = new NexoFlow({ apiKey: process.env.NEXOFLOW_API_KEY! })
export default defineEventHandler(async () => {
const { data } = await nf.posts.list({ limit: 20 })
return data
})pages/blog.vue
<!-- pages/blog.vue -->
<script setup>
const { data: blogData } = await useFetch("/api/posts")
</script>
<template>
<article v-for="post in blogData.posts" :key="post.slug">
<NuxtLink :to="`/blog/${post.slug}`">
<h2>{{ post.title }}</h2>
</NuxtLink>
<p>{{ post.excerpt }}</p>
</article>
</template>SvelteKit
src/routes/blog/+page.server.ts
// src/routes/blog/+page.server.ts
import { NexoFlow } from "nexoflow-sdk"
import { NEXOFLOW_API_KEY } from "$env/static/private"
const nf = new NexoFlow({ apiKey: NEXOFLOW_API_KEY })
export async function load() {
const { data } = await nf.posts.list({ limit: 20 })
return { posts: data.posts, pagination: data.pagination }
}Astro
src/pages/blog.astro
---
// src/pages/blog.astro
import { NexoFlow } from "nexoflow-sdk"
const nf = new NexoFlow({ apiKey: import.meta.env.NEXOFLOW_API_KEY })
const { data } = await nf.posts.list({ limit: 20 })
---
<html>
<body>
{data.posts.map((post) => (
<article>
<a href={`/blog/${post.slug}`}><h2>{post.title}</h2></a>
<p>{post.excerpt}</p>
</article>
))}
</body>
</html>Remix
app/routes/blog.tsx
// app/routes/blog.tsx
import { json } from "@remix-run/node"
import { useLoaderData, Link } from "@remix-run/react"
import { NexoFlow } from "nexoflow-sdk"
const nf = new NexoFlow({ apiKey: process.env.NEXOFLOW_API_KEY! })
export async function loader() {
const { data } = await nf.posts.list({ limit: 20 })
return json(data)
}
export default function Blog() {
const { posts } = useLoaderData<typeof loader>()
return (
<main>
{posts.map((post) => (
<article key={post.slug}>
<Link to={`/blog/${post.slug}`}><h2>{post.title}</h2></Link>
<p>{post.excerpt}</p>
</article>
))}
</main>
)
}Express / Fastify
server.ts
import express from "express"
import { NexoFlow } from "nexoflow-sdk"
const app = express()
const nf = new NexoFlow({ apiKey: process.env.NEXOFLOW_API_KEY! })
app.get("/api/posts", async (req, res) => {
const { data } = await nf.posts.list({ limit: 20 })
res.json(data)
})
app.listen(3000)Edge runtimes (Cloudflare Workers, Vercel Edge)
The SDK uses globalThis.fetch and AbortSignal.timeout-both available natively on edge.
worker.ts
export default {
async fetch(request: Request, env: Env) {
const nf = new NexoFlow({ apiKey: env.NEXOFLOW_API_KEY })
const { data } = await nf.posts.list({ limit: 5 })
return Response.json(data)
},
}TypeScript
Responses are fully typed. Import shapes individually when you need them in your app code:
types.ts
import type {
Post,
PostListItem,
Category,
Author,
Tag,
Pagination,
ApiResponse,
RateLimitInfo,
} from "nexoflow-sdk"Requirements
- Node.js 18+ (native
fetchandAbortSignal.timeout) - Works with Next.js, Nuxt, SvelteKit, Astro, Remix, Express, Fastify, Angular (server-side), Cloudflare Workers, Deno, and Bun
Links & license
- NexoFlow dashboard - create a project and copy an API key
- npm package - version history and repository link (see the npm sidebar for GitHub)
- SDK overview · Errors
Licensed under the MIT License.
