> Agent-readable docs index: /llms.txt. Download /docs.zip to grep all markdown files locally.
---
title: Next.js Integration
sidebarTitle: Next.js
description: Use exported Framer components in a Next.js App Router project with SSR and client navigation.
icon: lucide:layout
---
# Next.js integration
This guide covers how to use Unframer's exported Framer components in a **Next.js App Router** project with server-side rendering, client navigation, and proper font loading.
## Setup
```bash
npx create-next-app@latest my-site --typescript --app
cd my-site
npm install unframer react@19 react-dom@19
npx unframer {projectId} --outDir ./src/framer
```
## Import styles globally
Add the Framer styles import to your root layout:
```tsx
// src/app/layout.tsx
import '../framer/styles.css'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
## Use components in pages
Framer components are **client components** (they use browser APIs for animations). Mark your pages with `'use client'` or wrap the Framer imports in a client component:
```tsx
// src/app/page.tsx
'use client'
import Header from '../framer/header'
import Hero from '../framer/hero'
import Footer from '../framer/footer'
export default function Home() {
return (
)
}
```
## Client-side navigation
Set up `UnframerProvider` in your layout so Framer's internal links use Next.js routing:
```tsx
// src/app/providers.tsx
'use client'
import { useRouter } from 'next/navigation'
import { UnframerProvider } from 'unframer'
export function Providers({ children }: { children: React.ReactNode }) {
const router = useRouter()
return (
{children}
)
}
```
```tsx
// src/app/layout.tsx
import '../framer/styles.css'
import { Providers } from './providers'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
## Dark mode
Toggle dark mode by adding the `dark` class to the `` element. If you use `next-themes`:
```tsx
// src/app/layout.tsx
import { ThemeProvider } from 'next-themes'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
The `dark` class activates all `--unframer-*` CSS variable dark values automatically.
## Disable Strict Mode
Next.js enables React Strict Mode by default. Disable it in `next.config.ts`:
```ts
// next.config.ts
const nextConfig = {
reactStrictMode: false,
}
export default nextConfig
```
## Multiple pages
Create additional routes by adding page files:
```
src/app/
├── page.tsx # Home (/)
├── about/
│ └── page.tsx # About (/about)
├── pricing/
│ └── page.tsx # Pricing (/pricing)
├── providers.tsx
└── layout.tsx
```
Each page imports the Framer components it needs. Shared components like Header and Footer go in the layout.
## Example project
See the [Next.js example app](https://github.com/remorses/unframer/tree/main/nextjs-app) for a complete working project. A live demo is deployed at [unframer-nextjs-app.vercel.app](https://unframer-nextjs-app.vercel.app/).