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
│   └── <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
}