Skip to content

next-app-router

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

next-app-router

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
app
app
 
 
components
components
 
 
replane
replane
 
 
.env.example
.env.example
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
next.config.ts
next.config.ts
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 

README.md

Next.js App Router + Replane Example

This example demonstrates how to use @replanejs/next with Next.js App Router (React Server Components).

Features

  • Server-side config fetching with ReplaneRoot
  • Client hydration with no flash of unstyled content
  • Real-time config updates via SSE
  • Full TypeScript support with typed hooks

Setup

  1. Copy the environment file:

    cp .env.example .env.local

  2. Update the environment variables with your Replane credentials.

  3. Install dependencies:

    pnpm install

  4. Run the development server:

    pnpm dev

How It Works

Server-Side (layout.tsx)

import { ReplaneRoot } from "@replanejs/next/server";

export default async function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ReplaneRoot
          options={{
            baseUrl: process.env.NEXT_PUBLIC_REPLANE_BASE_URL!,
            sdkKey: process.env.NEXT_PUBLIC_REPLANE_SDK_KEY!,
          }}
        >
          {children}
        </ReplaneRoot>
      </body>
    </html>
  );
}

Client-Side (components)

"use client";

import { useConfig } from "@replanejs/next";

export function MyComponent() {
  const theme = useConfig("theme");
  return <div>{theme.darkMode ? "Dark" : "Light"}</div>;
}

Key Points

  1. ReplaneRoot: Server component that fetches configs and provides them to children
  2. Hooks: Use useConfig and useReplane in client components
  3. Environment variables: Use NEXT_PUBLIC_ prefix so variables are available on both server and client