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-name>.config.ts
├── src/
└── next.config.js
You can create multiple config files.

​
Define Your Schema

In configs/main.tsp: 
model NotificationConfig {
  email: boolean;
  push: boolean;
}

model UserSettings {
  theme: string;
  notifications: Record<NotificationConfig>;
}

​
Define Your Values

In configs/user-settings.config.ts: 
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: 
npm install @typeconf/react-sdk
Then generate the config and types: 
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: 
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: 
// 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 (
    <html lang="en">
      <body>
        <TypeconfProvider config={config}>
          {children}
        </TypeconfProvider>
      </body>
    </html>
  );
}
Then in the component you can use the useTypeconf hook: 
import { useTypeconf } from "@typeconf/react-sdk";
import { ButtonSettings } from "@/configs/types/all";

export default function Component() {
  const config: ButtonSettings = useTypeconf();
  // rest of the component
}