---
title: "Next.js"
description: "Compose Playstack server contracts, React bindings, and route adapters into Next.js applications without moving product policy into the framework."
tags: ["frameworks","nextjs","react","composition"]
---

Playstack treats Next.js as an application edge. Portable packages own authentication, accounts, validation, events, feeds, and other product behavior; Next.js decides where those capabilities enter through server rendering, route handlers, React providers, and application lifecycle.

[Start with the Next.js guide](/docs/frameworks/nextjs/getting-started) for a minimal authentication composition, then add only the capability adapters your application uses.

## Available package layers

| Need                        | Portable package                                                     | Next.js or React edge                                                                                                                                    |
| --------------------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Authentication and sessions | [`@playstack/auth`](/docs/packages/identity/auth)                    | `@playstack/auth-authjs`, [`@playstack/auth-next`](/docs/packages/identity/auth-next), and [`@playstack/auth-react`](/docs/packages/identity/auth-react) |
| Account selection           | [`@playstack/accounts`](/docs/packages/identity/accounts)            | [`@playstack/accounts-react`](/docs/packages/identity/accounts-react)                                                                                    |
| Error reporting             | [`@playstack/errors`](/docs/packages/foundation/errors)              | [`@playstack/errors-react`](/docs/packages/foundation/errors-react)                                                                                      |
| Analytics and consent       | [`@playstack/analytics`](/docs/packages/events-operations/analytics) | [`@playstack/analytics-react`](/docs/packages/events-operations/analytics-react)                                                                         |
| Audience signup and preferences | [`@playstack/audiences`](/docs/packages/communication/audiences) | [`@playstack/audiences-react`](/docs/packages/communication/audiences-react)                                                                              |
| In-app notification inbox   | [`@playstack/notifications`](/docs/packages/communication/notifications) | [`@playstack/notifications-react`](/docs/packages/communication/notifications-react)                                                                  |
| Feeds and sitemaps          | [`@playstack/feeds`](/docs/packages/content-intelligence/feeds)      | [`@playstack/feeds-next`](/docs/packages/content-intelligence/feeds-next)                                                                                |
| Content transforms          | [`@playstack/content`](/docs/packages/content-intelligence/content)  | [`@playstack/content-next`](/docs/packages/content-intelligence/content-next) for explicit Pages and App Router document lookup.                          |
| Shared validation           | [`@playstack/validation`](/docs/packages/foundation/validation)      | Use the same schemas in forms, server actions, and route handlers.                                                                                       |

All `@playstack/*` packages in an application should use the same fixed version.

## App Router and Pages Router

The adapters describe their actual router boundary rather than claiming universal Next.js support:

- `@playstack/auth-next/pages` provides Pages Router `getServerSideProps` session handoff and protection.
- `@playstack/auth-next/app` validates optional or required sessions in Server Components and route handlers while accepting application-owned redirect or response behavior.
- `@playstack/content-next/pages` supplies static paths, static props, and server-side props; `@playstack/content-next/app` supplies static params and document lookup for direct or promised route params.
- `@playstack/analytics-react/next-pages` observes completed Pages Router navigation; `@playstack/analytics-react/next-app` observes committed pathname and search-parameter changes.
- `@playstack/feeds-next` produces App Router-compatible `GET` and `HEAD` handlers using Web `Request`, `Response`, and streams.
- `@playstack/auth-authjs` bridges Auth.js callbacks to the portable authentication service and is not tied to one router.
- Audience and notification React providers work beneath either router and call application-owned routes; they do not expose signed audience tokens or establish inbox authorization.
- React providers work beneath either router. Server-side authorization remains mandatory regardless of client navigation guards.

## A common composition

```text
Auth.js callbacks ----> @playstack/auth-authjs ----> @playstack/auth
Next server boundary -> @playstack/auth-next -----> safe session view
React tree ----------> @playstack/auth-react -----> application HTTP routes
Next content route --> @playstack/content-next ---> @playstack/content
Route handlers ------> @playstack/feeds-next -----> @playstack/feeds
```

Keep provider SDKs, cookies, environment loading, and database clients in the application composition root. Playstack adapters accept those boundaries or structural callbacks; they do not create hidden global clients.

## Continue by capability

After the initial composition, use the [package catalog](/docs/packages) for complete configuration, persistence, event, and bridge contracts. A package page is canonical when a framework guide and an API detail appear to overlap.

## Optional application UI

[Chakra](/docs/packages/ui/chakra), [App UI](/docs/packages/ui/app-ui) and [Admin UI](/docs/packages/ui/admin-ui) add themes, controlled application compositions and the initial scoped members section. These are independent of auth/backend adoption. The host owns routes, data, mutations and authorization; Next Client Components hold callbacks and the Chakra system. See [Application interfaces](/features/application-ui).