---
title: "Use Next.js when React pages need a server · Agent Wranglers"
url: https://agentwranglers.se/playbook/stack/web-frameworks/nextjs
updated: 2026-10-21
licence: "All rights reserved"
---

# Use Next.js when React pages need a server

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers). Updated 2026-10-21.

- Level: Recommended
- Chapter: [Web frameworks](https://agentwranglers.se/playbook/stack/web-frameworks)
- Rule: Use Next.js when a React app needs pages rendered on the server, search engine traffic or server code next to the screens.
- Cost: Open source. MIT licence, and it runs on any Node server. Hosting on Vercel, the company behind it, is optional and paid.
- How: Next.js 1.0 came out in October 2016, and version 16.4.2 shipped in October 2026. Its support policy keeps the current major in Active LTS and the previous one in Maintenance LTS for two years. Today that means 16.x, and 15.x until 21 October 2026. It is used by 20.6% of developers in the 2026 Stack Overflow survey, with about 41 million weekly downloads. The licence is MIT, and it runs on any Node server, so you are not tied to one host. Choose something else when the app is a screen behind a login with no search traffic. Then React with Vite is smaller and simpler. Server pages meet [Send the content in the HTML](https://agentwranglers.se/playbook/website/seo/server-side-rendering).
- Check: The installed Next.js major is listed as Active LTS or Maintenance LTS on the Next.js support policy page, and `next build` passes in the build.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### TypeScript example

```tsx
// app/orders/[id]/page.tsx
export default async function OrderPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const order = await fetch(`https://api.example.com/orders/${id}`).then(response => response.json());
  return <h1>Order {order.number}</h1>;
}
```

### Python example

```python
SUPPORTED_NEXT_MAJORS = {15, 16}

def is_next_supported(installed_version: str) -> bool:
    return int(installed_version.split(".")[0]) in SUPPORTED_NEXT_MAJORS
```

## Sources

- [Next.js docs](https://nextjs.org/docs)
- [Next.js support policy](https://nextjs.org/support-policy)

## Related rules

- [Send the content in the HTML](https://agentwranglers.se/playbook/website/seo/server-side-rendering) in Website

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/stack/web-frameworks/nextjs">Agent Wranglers software choices playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Use Vite to build and serve the front end](https://agentwranglers.se/playbook/stack/web-frameworks/vite)
- Next: [Use Express for a Node.js server](https://agentwranglers.se/playbook/stack/web-frameworks/express)
- [Web frameworks](https://agentwranglers.se/playbook/stack/web-frameworks)