Example Launch w/Next.js

This is an example app that uses Reforge, TypeScript and Next.js.

What This App Showcases

This example demonstrates key Reforge SDK features for Next.js applications:

🏗️ Generated TypeScript Types

• Automatic type generation from your Reforge configuration using reforge generate --targets react-ts
• Type-safe feature flag access with full IntelliSense support
• Generated client types in src/app/types/ including:
  • reforge-client-types.d.ts - TypeScript declarations for your flags
  • reforge-client.ts - Type-safe React hooks and client wrapper

🌐 Server-Side Rendering (SSR) Data Extraction

• Context initialization with user attributes on the server
• Flag extraction using reforge.extract() for hydration
• Environment variable configuration with NEXT_PUBLIC REFORGE_FRONTEND_SDK_KEY

⚡ Client-Side Rendering (CSR) Rehydration

• Seamless client-side takeover using ReforgeProvider
• Initial flag state passed from server to prevent hydration mismatches
• Typesafe React hook providing type-safe flag access via generated methods

📋 Example Implementation

The app demonstrates two feature flags:

• sample.boolean.flag (boolean) - Simple boolean flag
• sample.json.config (object) - JSON configuration object using a JSON validation schema in reforge

Installation

To install the dependencies, run:

npm install

Getting Started

First, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Key Files

• src/app/layout.tsx - Server-side Reforge initialization and flag extraction
• src/app/page.tsx - Client-side flag consumption using generated hooks
• src/app/components/WrappedReforgeProvider.tsx - React context provider setup
• src/app/types/ - Generated TypeScript types and hooks
• reforge.config.json - Configuration for type generation