Back to API Overview
API
Installation
Get started with the Lightweight API client in your project.
1
Install the Package
Terminal
npm install lightweight-client2
Configure Your API Key
Finding Your API Key
- Go to your Lightweight dashboard
- Select your project
- Navigate to Settings → API
- Copy your API key
Add your API key to your environment variables:
.env.local
# .env.local (Next.js) or .env
LIGHTWEIGHT_API_KEY=your_api_key_hereSecurity Warning
Never expose your API key in client-side code. Always use environment variables and make API calls from server-side code.
3
Configure Images
Blog images are served from Vercel Blob Storage. Add the domain to your image configuration to display them properly.
next.config.js
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '*.public.blob.vercel-storage.com',
},
],
},
};
module.exports = nextConfig;4
Initialize the Client
import { LightweightClient } from 'lightweight-client';
// Initialize the client
const client = new LightweightClient(process.env.LIGHTWEIGHT_API_KEY);
// Now you can use the client methods
const posts = await client.getPosts(0, 10);Next.js Examples
Blog List Page
app/blog/page.tsx
// app/blog/page.tsx
import { LightweightClient } from 'lightweight-client';
export default async function BlogPage() {
const client = new LightweightClient(process.env.LIGHTWEIGHT_API_KEY!);
const { articles, pagination } = await client.getPosts(0, 10);
return (
<div>
<h1>Blog</h1>
<div className="grid gap-6">
{articles.map((post) => (
<article key={post.id}>
<h2>{post.headline}</h2>
<p>{post.metaDescription}</p>
<a href={`/blog/${post.slug}`}>Read more</a>
</article>
))}
</div>
</div>
);
}Single Post Page
app/blog/[slug]/page.tsx
// app/blog/[slug]/page.tsx
import { LightweightClient } from 'lightweight-client';
import { notFound } from 'next/navigation';
interface Props {
params: { slug: string };
}
export default async function PostPage({ params }: Props) {
const client = new LightweightClient(process.env.LIGHTWEIGHT_API_KEY!);
const post = await client.getPost(params.slug);
if (!post) {
notFound();
}
return (
<article>
<h1>{post.headline}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</article>
);
}API Route (Optional)
app/api/posts/route.ts
// app/api/posts/route.ts
import { LightweightClient } from 'lightweight-client';
import { NextResponse } from 'next/server';
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const page = parseInt(searchParams.get('page') || '0');
const client = new LightweightClient(process.env.LIGHTWEIGHT_API_KEY!);
const posts = await client.getPosts(page, 10);
return NextResponse.json(posts);
}