> ## Documentation Index
> Fetch the complete documentation index at: https://docs.typeconf.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Using TypeConf with Next.js
> Learn how to use TypeConf in your Next.js projects
This guide shows you how to integrate TypeConf into your Next.js project for
type-safe configuration management.
### Video Guide
## Configuration Structure
Create your configuration files in a dedicated directory:
```
your-nextjs-project/
├── configs/
│ ├── main.tsp
│ └── .config.ts
├── src/
└── next.config.js
```
You can create multiple config files.
## Define Your Schema
In `configs/main.tsp`:
```typescript theme={null}
model NotificationConfig {
email: boolean;
push: boolean;
}
model UserSettings {
theme: string;
notifications: Record;
}
```
## Define Your Values
In `configs/user-settings.config.ts`:
```typescript theme={null}
import { UserSettings } from "./types/all.js";
const config: UserSettings = {
theme: "light",
notifications: {
promo: {
email: true,
push: false,
},
alerts: {
email: true,
push: true,
},
},
};
export default config;
```
## Generate Config and Types
First install the React SDK:
```bash theme={null}
npm install @typeconf/react-sdk
```
Then generate the config and types:
```bash theme={null}
npx @typeconf/typeconf build configs
```
## Using in Next.js Server Components
Typeconf React SDK provides both server and client side helpers.
Here's how to use it in a server component:
```typescript theme={null}
import { readConfig } from "@typeconf/react-sdk/server";
import { ButtonSettings } from "@/configs/types/all";
export default function Component() {
// Path to your config without extension
const config: ButtonSettings = readConfig("configs/user-settings");
}
```
### Client-side Usage
For client-side configuration you need to add a provider to the layout:
```typescript theme={null}
// app/layout.tsx
import { TypeconfProvider } from "@typeconf/react-sdk";
import { readConfig } from "@typeconf/react-sdk/server";
import { ButtonSettings } from "@/configs/types/all";
// other code
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
// Path to your config without extension
const config: ButtonSettings = readConfig("configs/user-settings");
return (
{children}
);
}
```
Then in the component you can use the `useTypeconf` hook:
```typescript theme={null}
import { useTypeconf } from "@typeconf/react-sdk";
import { ButtonSettings } from "@/configs/types/all";
export default function Component() {
const config: ButtonSettings = useTypeconf();
// rest of the component
}
```