# @typestyles/next
Next.js integration for typestyles with full support for App Router, Pages Router, and React Server Components.
## Installation
```bash
npm install @typestyles/next typestyles
# or
pnpm add @typestyles/next typestyles
# or
yarn add @typestyles/next typestyles
```
## Requirements
- Next.js >= 13.0.0
- React >= 18.0.0
- typestyles >= 0.1.0
## Quick Start
### App Router (Recommended)
Import `getRegisteredCss` in your root layout to inject styles during SSR:
```tsx
// app/layout.tsx
import { getRegisteredCss } from '@typestyles/next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
const css = getRegisteredCss();
return (
{css && }
{children}
);
}
```
### Pages Router
Wrap your pages with the stylesheet component:
```tsx
// pages/_app.tsx
import { TypestylesStylesheet } from '@typestyles/next';
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return (
);
}
```
## React Server Components (RSC)
The package provides multiple approaches for RSC support:
### Option 1: Layout SSR (Simplest)
Import `getRegisteredCss` in your root layout - this works in both Server and Client Components:
```tsx
// app/layout.tsx
import { getRegisteredCss } from '@typestyles/next';
export default function RootLayout({ children }) {
const css = getRegisteredCss();
return (
{css && }
{children}
);
}
```
### Option 2: Client Component Provider
For complex cases with dynamic styles, create a client component wrapper:
```tsx
// components/TypestylesProvider.tsx
'use client';
import { getRegisteredCss } from 'typestyles/server';
import { useEffect, useState } from 'react';
export function TypestylesProvider({ children }) {
const [css, setCss] = useState('');
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
setCss(getRegisteredCss());
}, []);
return (
<>
{children}
{mounted && css && }
);
}
```
Then use it in your layout:
```tsx
// app/layout.tsx
import { TypestylesProvider } from '@/components/TypestylesProvider';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
### Option 3: Collecting from a specific component tree
`getTypestylesMetadata` (alias of `collectStylesFromComponent`) renders a React element on the server and returns the CSS registered during that render. Use it when you need CSS scoped to a subtree rather than the whole app. For App Router pages, injecting the result still belongs in `layout.tsx` / `` (Next.js `Metadata` does not provide a supported hook for arbitrary `