@typestyles/next
Advanced tools
Next.js integration for typestyles with full support for App Router, Pages Router, and React Server Components.
npm install @typestyles/next typestyles
# or
pnpm add @typestyles/next typestyles
# or
yarn add @typestyles/next typestyles
Import getRegisteredCss in your root layout to inject styles during SSR:
// app/layout.tsx
import { getRegisteredCss } from '@typestyles/next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
const css = getRegisteredCss();
return (
<html lang="en">
<head>{css && <style dangerouslySetInnerHTML={{ __html: css }} />}</head>
<body>{children}</body>
</html>
);
}
Wrap your pages with the stylesheet component:
// pages/_app.tsx
import { TypestylesStylesheet } from '@typestyles/next';
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return (
<TypestylesStylesheet>
<Component {...pageProps} />
</TypestylesStylesheet>
);
}
The package provides multiple approaches for RSC support:
Import getRegisteredCss in your root layout - this works in both Server and Client Components:
// app/layout.tsx
import { getRegisteredCss } from '@typestyles/next';
export default function RootLayout({ children }) {
const css = getRegisteredCss();
return (
<html>
<head>{css && <style dangerouslySetInnerHTML={{ __html: css }} />}</head>
<body>{children}</body>
</html>
);
}
For complex cases with dynamic styles, create a client component wrapper:
// 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 && <style id="typestyles" dangerouslySetInnerHTML={{ __html: css }} />}
</>
);
}
Then use it in your layout:
// app/layout.tsx
import { TypestylesProvider } from '@/components/TypestylesProvider';
export default function RootLayout({ children }) {
return (
<html>
<body>
<TypestylesProvider>{children}</TypestylesProvider>
</body>
</html>
);
}
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 / <head> (Next.js Metadata does not provide a supported hook for arbitrary <style> payloads).
import { getTypestylesMetadata } from '@typestyles/next/server';
import { Home } from './Home';
const css = await getTypestylesMetadata(<Home />);
// Pass `css` into your layout <style> or streaming head pipeline.
To ship a static typestyles.css and avoid client-side <style> injection (uses typestyles/build under the hood):
buildTypestylesForNext before next build to emit CSS (and optional manifest).import './typestyles.css').withTypestylesExtract from @typestyles/next/build.withTypestylesExtract sets NEXT_PUBLIC_TYPESTYLES_RUNTIME_DISABLED via next.config env (works with webpack and Turbopack) and adds webpack DefinePlugin for __TYPESTYLES_RUNTIME_DISABLED__ on client bundles when webpack runs. Example app: examples/next-app.
During next dev, keeping the client runtime enabled avoids tying every style tweak to a pre-build extraction step. In production, disable injection so the browser loads one cacheable stylesheet.
// next.config.mjs
import { withTypestylesExtract } from '@typestyles/next/build';
const base = {
/* your config */
};
export default process.env.NODE_ENV === 'production' ? withTypestylesExtract(base) : base;
You still typically generate typestyles.css before production builds (CI or prebuild). The example app uses this pattern.
Returns all currently registered CSS as a string. This is the simplest way to get styles for SSR.
import { getRegisteredCss } from '@typestyles/next';
const css = getRegisteredCss();
Collect styles from a React component tree. Useful when you need explicit control over style collection.
import { collectStylesFromComponent } from '@typestyles/next/server';
import { YourComponent } from './YourComponent';
const css = await collectStylesFromComponent(<YourComponent />);
Same as collectStylesFromComponent — renders the given element on the server and returns registered CSS. Use when you want a dedicated name for “CSS for this subtree.”
import { getTypestylesMetadata } from '@typestyles/next/server';
import { Home } from './Home';
const css = await getTypestylesMetadata(<Home />);
A React component that renders typestyles CSS. Works with Pages Router.
import { TypestylesStylesheet } from '@typestyles/next';
<TypestylesStylesheet>
<YourApp />
</TypestylesStylesheet>;
// app/page.tsx
import { styles } from 'typestyles';
const button = styles.component('button', {
base: {
padding: '12px 24px',
backgroundColor: '#0066ff',
color: 'white',
border: 'none',
borderRadius: '6px',
cursor: 'pointer',
},
});
export default function Home() {
return (
<main>
<button className={button()}>Click me</button>
</main>
);
}
// app/tokens.ts
import { tokens } from 'typestyles';
export const colors = tokens.create('color', {
primary: '#0066ff',
secondary: '#64748b',
});
export const spacing = tokens.create('space', {
sm: '8px',
md: '16px',
lg: '24px',
});
// app/page.tsx
import { styles } from 'typestyles';
import { colors, spacing } from './tokens';
const card = styles.component('card', {
base: {
padding: spacing.md,
backgroundColor: colors.primary,
borderRadius: '8px',
},
});
export default function Page() {
return <div className={card()}>Hello World</div>;
}
// app/layout.tsx
import { tokens } from 'typestyles';
import { getRegisteredCss } from '@typestyles/next';
const darkTheme = tokens.createTheme('dark', {
base: {
color: {
background: '#1a1a1a',
text: '#ffffff',
},
},
});
export default function RootLayout({ children }) {
const css = getRegisteredCss();
return (
<html className={darkTheme.className}>
<head>{css && <style dangerouslySetInnerHTML={{ __html: css }} />}</head>
<body>{children}</body>
</html>
);
}
global.fontFace() registers @font-face like any other TypeStyles global. For Next’s pre-build extraction (buildTypestylesForNext), prefer fonts under public/fonts/ and a root-relative url('/fonts/…') in src so Node does not need to resolve binary imports.
For Vite, you can use import file from './font.woff2?url' and url(\${file}`) format('woff2')` so production CSS points at hashed assets.
See the Fonts guide in the TypeStyles docs (docs/content/docs/fonts.md, route /docs/fonts on the docs site).
If you see a flash of unstyled content, ensure getRegisteredCss() is called in the layout and styles are injected before the body renders.
Make sure typestyles is installed in your project:
npm install typestyles
Ensure you have "moduleResolution": "bundler" or "node" in your tsconfig.json.
MIT
FAQs
Next.js integration for typestyles SSR
We found that @typestyles/next demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub Actions checkout now blocks risky pull_request_target checkouts by default to help prevent pwn request supply chain attacks.
Product
Socket now supports Custom Roles and Repository Access Permissions so organizations can control who can access specific repositories and actions.
Product
Socket MCP now lets AI assistants review org alerts, investigate threats using the Socket threat feed, and inspect package files in addition to dependency scoring.