Using TypeConf with Next.js

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
│   └── values.config.ts
├── src/
└── next.config.js

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/values.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 SDK:

npm install @typeconf/react-sdk

Then generate the config and types:

npx @typeconf/typeconf@latest 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 { getLocalJSONConfig } from "@typeconf/react-sdk/server";
import { ButtonSettings } from "@/configs/types/all";

export default function Component() {
  const config: ButtonSettings = getLocalJSONConfig("configs/out/configs.json");
}

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 { getLocalJSONConfig } from "@typeconf/react-sdk/server";
import { ButtonSettings } from "@/configs/types/all";

// other code

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const config: ButtonSettings = getLocalJSONConfig("configs/out/configs.json");

  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
}