Upstash Vector & Next.js Example

Upstash Vector & Next.js Example is a starter repository from Upstash that shows how to connect the Upstash Vector JavaScript SDK to a Next.js App Router API route, then deploy the result to Vercel.

What is Upstash Vector & Next.js Example?

Upstash Vector & Next.js Example is a small Next.js project that demonstrates initializing an Upstash Vector index client and exposing it through a route handler. It takes two credentials as input — the Upstash Vector REST URL and REST token, supplied through environment variables — and produces a Next.js app whose /src/app/api/route.ts file exports a GET handler backed by that index. The example is maintained by Upstash and published in the Upstash Vector JS SDK repository, whose topics include upstash, upstash-sdk and vector.

Key Features

• Upstash Vector client initialization — the Index class is imported from @upstash/vector and constructed with the REST URL and token read from process.env, so no credentials are hardcoded in source.
• Next.js App Router route handler — the index lives inside /src/app/api/route.ts, which exports GET as an async function that returns the route response.
• Environment-variable configuration — a .env.local file holds UPSTASH_VECTOR_REST_URL and UPSTASH_VECTOR_REST_TOKEN; both are required before the dev server can talk to the index.
• npm-based local workflow — npm install installs dependencies and npm run dev starts the development server.
• Vercel deployment path — npm run deploy ships the app, after which the same environment variables are configured in the project and the app is redeployed to start using it on Vercel.

Who is it for?

• Next.js developers adding vector search: use the route handler as a working reference for constructing an Upstash Vector index inside the App Router instead of guessing at SDK wiring.
• Developers evaluating Upstash Vector: copy the two environment variables and the client snippet to confirm connectivity before building a larger ingestion or query pipeline.
• Teams deploying to Vercel: adopt the npm run deploy flow and environment-variable setup as the starting point for a serverless, vector-backed endpoint.

What can you do with Upstash Vector & Next.js Example?

• Prototype a vector-backed API endpoint: clone the repo, add your Upstash Vector credentials, and extend the exported GET handler with your own upsert or query logic.
• Learn the SDK surface: read the initialization snippet to see exactly which constructor options the Index client expects before writing production code.
• Validate a Vercel setup: deploy the example, set UPSTASH_VECTOR_REST_URL and UPSTASH_VECTOR_REST_TOKEN in the project, and confirm the deployed route can reach your index.

How does it work?

Install dependencies with npm install, create a .env.local file containing the two Upstash Vector variables, then run npm run dev to start the app locally. When you are ready to ship, run npm run deploy, set the same environment variables in your hosting project, and redeploy to use the app on Vercel.

Pros and cons

• Pro: the whole integration is one route file plus two environment variables, so it can be read and adapted in minutes.
• Pro: deployment to Vercel is scripted through npm run deploy.
• Con: the README shows only client initialization; the body of the GET handler is left as a placeholder comment, so no indexing or query examples are included.
• Con: there is no UI, page, or component code — the example is API-only.

FAQ

What does Upstash Vector & Next.js Example do?

It shows how to create an Upstash Vector Index client inside a Next.js App Router route handler and expose it as an HTTP GET endpoint, then deploy that app to Vercel with the vector credentials supplied as environment variables.

Which environment variables does it need?

Two: UPSTASH_VECTOR_REST_URL and UPSTASH_VECTOR_REST_TOKEN. Both are placed in a .env.local file for local development and must be set again in the Vercel project settings before the deployed app can reach the Upstash Vector index.

Where is the Upstash Vector client initialized?

In /src/app/api/route.ts. That file imports Index from @upstash/vector, constructs the client with the REST URL and token read from process.env, and exports an async GET function so the index is available to that route.

Does the example include a user interface?

No. The repository ships only the API route and the configuration steps, so there are no pages, components, or styling to reuse; you would add your own front end on top of the route handler.