SDKs & Guides
Next.js
Use ChowAPI with Next.js
Fetch food nutrition data in Server Components, API Routes, and client-side with React Query.
Prerequisites
- Node.js 18+
- Next.js 14+ project
- ChowAPI key (free at chowapi.dev/signup)
Installation
1
No install needed
# Just use the built-in fetch API — no SDK required2
Add your API key to .env.local
.env.local
CHOWAPI_KEY=chow_live_YOUR_KEYCode examples
Search foods (Server Component)
Fetch food data at request time in a Server Component.
app/foods/page.tsx
const API_BASE = 'https://api.chowapi.dev/v1'
export default async function FoodPage() {
const res = await fetch(`${API_BASE}/search?q=chicken+breast&limit=5`, {
headers: { 'Authorization': `Bearer ${process.env.CHOWAPI_KEY}` },
})
const { results } = await res.json()
return (
<ul>
{results.map(food => (
<li key={food.id}>
{food.name} - {food.nutrients.calories} cal,
{food.nutrients.protein_g}g protein
</li>
))}
</ul>
)
}Barcode lookup (API Route)
Create an API route that proxies barcode lookups.
app/api/barcode/route.ts
import { NextResponse } from 'next/server'
const API_BASE = 'https://api.chowapi.dev/v1'
export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const code = searchParams.get('code')
if (!code) {
return NextResponse.json({ error: 'Missing barcode' }, { status: 400 })
}
const res = await fetch(`${API_BASE}/barcode/${code}`, {
headers: { 'Authorization': `Bearer ${process.env.CHOWAPI_KEY}` },
})
const food = await res.json()
return NextResponse.json(food)
}Next.js Pattern
Client-side search with React Query
Use React Query for debounced, cached food search on the client.
components/FoodSearch.tsx
'use client'
import { useQuery } from '@tanstack/react-query'
import { useState } from 'react'
const API_BASE = 'https://api.chowapi.dev/v1'
async function searchFoods(query: string) {
const res = await fetch(`${API_BASE}/search?q=${encodeURIComponent(query)}&limit=8`, {
headers: { 'Authorization': `Bearer ${process.env.NEXT_PUBLIC_CHOWAPI_KEY}` },
})
return res.json()
}
export function FoodSearch() {
const [query, setQuery] = useState('')
const { data, isLoading } = useQuery({
queryKey: ['food-search', query],
queryFn: () => searchFoods(query),
enabled: query.length >= 2,
staleTime: 60_000, // Cache results for 1 minute
})
return (
<div>
<input value={query} onChange={e => setQuery(e.target.value)}
placeholder="Search foods..." />
{isLoading && <p>Searching...</p>}
{data?.results.map(food => (
<div key={food.id}>{food.name} - {food.nutrients.calories} cal</div>
))}
</div>
)
}