Next.js

Compose Playstack server contracts, React bindings, and route adapters into Next.js applications without moving product policy into the framework.

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 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`	`@playstack/auth-authjs`, `@playstack/auth-next`, and `@playstack/auth-react`
Account selection	`@playstack/accounts`	`@playstack/accounts-react`
Error reporting	`@playstack/errors`	`@playstack/errors-react`
Analytics and consent	`@playstack/analytics`	`@playstack/analytics-react`
Audience signup and preferences	`@playstack/audiences`	`@playstack/audiences-react`
In-app notification inbox	`@playstack/notifications`	`@playstack/notifications-react`
Feeds and sitemaps	`@playstack/feeds`	`@playstack/feeds-next`
Content transforms	`@playstack/content`	`@playstack/content-next` for explicit Pages and App Router document lookup.
Shared validation	`@playstack/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

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 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, App UI and 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.