---
title: Rendering content based on device
description: Learn how to render different content based on the user agent in your Middleware.
url: /kb/guide/rendering-content-based-on-device
canonical_url: "https://vercel.com/kb/guide/rendering-content-based-on-device"
published: 2025-11-03
last_updated: 2025-11-11
authors: DX Team
related:
  - /docs/routing-middleware
  - /docs/routing-middleware/api
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---
<!-- docsgraph:related -->
## Related pages

> **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below.

- [Getting Started](https://vercel.com/docs/routing-middleware/getting-started?from=related) — Learn how you can use Routing Middleware, code that executes before a request is processed on a site, to provide speed a
- [Proxy and Routing](https://vercel.com/docs/platforms/multi-tenant-platforms/middleware-and-routing?from=related) — Resolve tenants and route requests by subdomain, custom domain, or path using Next.js Proxy on Vercel.
- [Next.js](https://vercel.com/docs/frameworks/full-stack/nextjs?from=related) — Vercel is the native Next.js platform, designed to enhance the Next.js experience.
- [Serving Static Files](https://vercel.com/docs/platforms/multi-tenant-platforms/serving-static-files?from=related) — Serve tenant-specific static files like robots.txt, sitemap.xml, and llms.txt dynamically using route handlers.
- [Backend for Frontend](https://nextjs.org/docs/app/guides/backend-for-frontend?from=related) — Learn how to use Next.js as a backend framework
- [userAgent](https://nextjs.org/docs/pages/api-reference/functions/userAgent?from=related) — The userAgent helper extends the Web Request API with additional properties and methods to interact with the user agent
- [Node.js](https://vercel.com/docs/functions/runtimes/node-js?from=related) — Learn how to use the Node.js runtime to create functions and deploy Node.js servers on Vercel.
- [Modifying request headers](https://vercel.com/kb/guide/modify-request-headers?from=related) — Learn how to modify request headers in your Middleware.
- [Filtering query parameters](https://vercel.com/kb/guide/filter-query-parameters?from=related) — Learn how to filter query parameters in your Middleware.
- [Adding a response header](https://vercel.com/kb/guide/add-response-header?from=related) — Learn how to add a response header in your Middleware.
- [Using the crypto Web API to redirect requests with a unique token](https://vercel.com/kb/guide/use-crypto-web-api?from=related) — Learn how to use the Crypto Web API in your Middleware.
- [How to serve documentation for agents](https://vercel.com/kb/guide/how-to-serve-documentation-for-agents?from=related) — Learn how to serve markdown to agents and HTML for humans from the same URL

Full cross-link map for this page: [/kb/guide/rendering-content-based-on-device.graph.md](/kb/guide/rendering-content-based-on-device.graph.md)
<!-- /docsgraph:related -->


The following example shows how to render different content based on the user agent in your Middleware.

Your `middleware` file should be placed at the root of your project. If you are using the `src` directory, the file should be placed in the `src` directory.

```js
import { NextResponse, userAgent } from 'next/server';

// Set pathname were middleware will be executed
export const config = {
  matcher: '/',
};

export default function middleware(request) {
  // Parse user agent
  const { device } = userAgent(request);

  // Check the viewport
  const viewport = device.type === 'mobile' ? 'mobile' : 'desktop';

  // Update the expected url
  request.nextUrl.pathname = `_viewport/${viewport}`;

  // Return rewritten response
  return NextResponse.rewrite(request.nextUrl);
}
```
```ts
import { NextResponse, userAgent } from 'next/server';
import type { NextRequest } from 'next/server';

// Set pathname were middleware will be executed
export const config = {
  matcher: '/',
};

export default function middleware(request: NextRequest) {
  // Parse user agent
  const { device } = userAgent(request);

  // Check the viewport
  const viewport = device.type === 'mobile' ? 'mobile' : 'desktop';

  // Update the expected url
  request.nextUrl.pathname = `_viewport/${viewport}`;

  // Return rewritten response
  return NextResponse.rewrite(req.nextUrl);
}
```

## More resources

- [Middleware](/docs/routing-middleware)
  
- [Middleware API](/docs/routing-middleware/api)