Quickstart

Start the Next.js dev server by running:

Terminal

npm run dev

This command will start your Next.js application at http://localhost:3000. This is all you need to do if you plan to deploy to Vercel, Netlify, or similar.

Cloudflare Worker Setup

If you are using JSandy to develop for Cloudflare Workers, launch two terminal windows to run the frontend and backend separately:

Terminal

# Terminal 1: Frontend
npm run dev     # Available on http://localhost:3000
 
# Terminal 2: Backend
wrangler dev    # Available on http://localhost:8080

These commands will start your:

Frontend on http://localhost:3000
Backend on http://localhost:8080

To let your frontend know about your backend on a separate port, adjust your client:

lib/client.ts

import type { AppRouter } from "@/server"
import { createClient } from "@jsandy/rpc"
 
export const client = createClient<AppRouter>({
  // 👇 Add our port 8080 cloudflare URL
  baseUrl: "http://localhost:8080/api",
})

import type { AppRouter } from "@/server"
import { createClient } from "@jsandy/rpc"
 
export const client = createClient<AppRouter>({
  // 👇 Add our port 8080 cloudflare URL
  baseUrl: "http://localhost:8080/api",
})

How it works

Your frontend runs as a standard Next.js application
Your backend runs in Wrangler, Cloudflare's development environment
API requests from your frontend are automatically routed to the correct backend URL