# Next.js + Vercel (/docs/examples/nextjs-vercel)



This is the [Next.js example](/docs/examples/nextjs) with one change: instead of fetching the config over the network inside the middleware, it reads the datafile from [Vercel Edge Config](/docs/integrations/vercel). Edge Config is co-located with the middleware, so there is no network round-trip on every request.

The [Vercel integration](/docs/integrations/vercel) keeps your Edge Config in sync with the active tests, flags and audiences. Only the **active** state is synced, so the example falls back to a regular [`fetchConfig`](/docs/sdk/javascript#fetchconfig) for any other state (e.g. when testing a draft).

## Install [#install]

```bash
npm i @obelism/improve-sdk @obelism/improve-sdk-next @obelism/improve-sdk-react @vercel/edge-config
```

## Middleware [#middleware]

The only difference from the plain Next.js example is `getImproveConfig`: it loads the datafile from Edge Config with [`loadConfig`](/docs/sdk/javascript#loadconfig) when the state is `active`, and fetches it from the API otherwise.

```ts title="src/middleware.ts"
import { type NextRequest } from 'next/server'
import { get as getFromEdgeConfig } from '@vercel/edge-config'
import { type ImproveConfiguration } from '@obelism/improve-sdk/types'
import { ImproveServerSDK } from '@obelism/improve-sdk/server'
import { generateImproveNextMiddleware } from '@obelism/improve-sdk-next'

import { IMPROVE_CONFIG } from './app/improveConfig'

export const config = {
	matcher: '/',
}

const improveSdk = new ImproveServerSDK({
	...IMPROVE_CONFIG,
	token: 'xxxx-xxxx-xxxx-xxxx',
})

const improveMiddlewareHandler = generateImproveNextMiddleware({
	improveSdk,
	serverABtests: [
		{
			slug: 'startpage-visual',
			routeHandler: '/',
			options: [
				{ value: 'control', slug: '/' },
				{ value: 'variation', slug: '/variation' },
			],
		},
	],
})

const getImproveConfig = async () => {
	if (!!improveSdk.config) return

	// Only the active state is saved in edge config
	if (IMPROVE_CONFIG.state !== 'active') {
		return await improveSdk.fetchConfig()
	}

	const config = await getFromEdgeConfig(IMPROVE_CONFIG.environment)
	improveSdk.loadConfig(config as ImproveConfiguration)
}

export const middleware = async (request: NextRequest) => {
	await getImproveConfig()
	return improveMiddlewareHandler(request)
}
```

**Note:** the runnable example hardcodes the server `token` for brevity. In your own app load it from an environment variable so it never ends up in version control.

Everything else (the shared config, client provider, routes and analytics tracking) is identical to the [Next.js example](/docs/examples/nextjs).

## Source [#source]

<Cards>
  <Card title="View on GitHub" href="https://github.com/Obelism/improve-sdk/tree/main/examples/nextjs-vercel" description="Full source for this example" />

  <Card title="View live demo" href="https://nextjs-vercel.improve.obelism.studio" description="This example deployed and running" />

  <Card title="Vercel integration" href="/docs/integrations/vercel" description="Set up Edge Config syncing for your organization" />
</Cards>