Skip to main content

​
Overview

The sync route handlers provide in-memory slide state synchronization between the presenter’s deck and the notes viewer on a phone or second screen. The presenter’s deck POSTs slide changes, and the notes viewer polls via GET to stay in sync. Important: State lives in server memory — designed for next dev or single-server deployments. It won’t persist across serverless function invocations.

​
Setup

Re-export the handlers as your API route: 
// app/api/nxs-sync/route.ts
export { GET, POST } from 'nextjs-slides/sync';
Then configure syncEndpoint on both SlideDeck and SlideNotesView: 
// app/slides/layout.tsx
<SlideDeck
  slides={slides}
  speakerNotes={notes}
  syncEndpoint="/api/nxs-sync"
>
  {children}
</SlideDeck>

// app/notes/page.tsx
<SlideNotesView 
  notes={notes} 
  syncEndpoint="/api/nxs-sync" 
/>

​
GET Handler

Retrieves the current slide state.

​
Response

Returns JSON with the current slide number and total slides: 
{
  "slide": 3,
  "total": 12
}

​
Usage

The SlideNotesView component polls this endpoint every 500ms to stay synchronized with the presenter’s deck.

​
POST Handler

Updates the current slide state.

​
Request Body

Send JSON with slide number and/or total slides: 
{
  "slide": 5,
  "total": 12
}
Both fields are optional — you can update just slide, just total, or both.

​
Response

Returns the updated state: 
{
  "slide": 5,
  "total": 12
}

​
Usage

The SlideDeck component POSTs to this endpoint whenever you navigate with keyboard (arrow keys or spacebar).

​
How Sync Works

  1. Presenter navigates → SlideDeck POSTs { slide, total } to /api/nxs-sync
  2. Notes viewer polls → SlideNotesView GETs from /api/nxs-sync every 500ms
  3. Notes update → Phone displays notes[slide - 1] from the notes array
The in-memory state (stored in currentSlide and totalSlides variables) persists for the lifetime of the Node.js process.

​
Production Considerations

For serverless deployments (e.g., Vercel), requests may hit different function instances, causing sync to be unreliable. Consider using a shared data store (Redis, Vercel KV, etc.) if you need production sync. For development and single-server presentations, the in-memory approach works perfectly.

Build docs developers (and LLMs) love

Get started for freeTalk to us