Build / Next.js AI news app
How to build an AI news app with Next.js.
Use Synorb as the source-grounded content layer. Next.js owns the UI and server route. Synorb returns cited Manifests the app can render as news cards, newsletter items, research tiles, or team briefings.
Architecture
Keep Synorb calls server-side.
Next.js server route
/api/newsReads
SYNORB_API_KEY and SYNORB_SECRET from server envCallsSynorb REST with stream_ids, home_domains, tag_names, days, and page_size
Next.js client UI
Cited news cards
Receivesnormalized rows, pagination, usage, cache timestamp
Never seesSynorb credentials or raw backend secrets
Route shape
Normalize the feed before the browser sees it.
The route can map Synorb's REST response into a small app-owned contract. That keeps the UI stable even as you add Streams, tags, or layouts.
type NewsItem = {
id: string;
headline: string;
summary: string;
sourceUrl: string;
sourceName: string;
publishedDate: string;
significance?: string;
tags?: string[];
};
Build prompt
Paste this into your coding agent.
Next.js AI news app prompt
Use with Cursor, Codex, Claude Code, Windsurf, Replit, or another coding agent.
Related
Choose the right context layer.
Real-time web data
Why the app should receive structured, source-grounded updates instead of raw search snippets.
Agent search API
When to use web search, and when a maintained feed is the better production shape.
Start