Only works in client components

[whatuserever]

Steps to reproduce

// actions.ts
'use server';

import type { Navigation } from '@toolpad/core/AppProvider';


export default async function fetchNavLinksData(): Promise<Navigation> {
    return [
        { title: '1' },
        { title: '2' },
    ];
}

// page.tsx
import { DashboardLayout, PageContainer } from '@toolpad/core';
import { NextAppProvider } from '@toolpad/core/nextjs';
import * as React from 'react';
import fetchNavLinksData from './actions';


export default async function DashboardLayoutBasic({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    const navigation = await fetchNavLinksData();
    return (
        <NextAppProvider
            navigation={navigation}
        >
            <DashboardLayout>
                <PageContainer>
                    {children}
                </PageContainer>
            </DashboardLayout>
        </NextAppProvider>
    );
}

Current behavior

TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

Expected behavior

Should work and display a dashboard layout with 2 navigation items.

Context

I'm trying to build a dashboard with a dynamic navigation bar. That is, my fetchNavLinksData fetches data from a database to generate the Navigation object, which I want to use with DashboardLayout.

Note

I'm primarily a backend engineer. This is for a hobby project I just started. Frontend, TypeScript, Next.js, and Toolpad are all very new to me. My terminology might be off, and it's possible I'm not doing things the right way.

Your environment

npx @mui/envinfo

  System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
  Binaries:
    Node: 22.13.0 - ~/.nvm/versions/node/v22.13.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.13.0/bin/npm
    pnpm: 9.15.4 - ~/.nvm/versions/node/v22.13.0/bin/pnpm
  Browsers:
    Chrome: Not Found
    Brave: Version 1.73.105 Chromium: 131.0.6778.265 (Official Build) (64-bit)
  npmPackages:
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/icons-material: ^6.4.0 => 6.4.0 
    @mui/material: ^6.4.0 => 6.4.0 
    @mui/material-nextjs: ^6.3.1 => 6.3.1 
    @toolpad/core: ^0.12.0 => 0.12.0 
    @types/react: ^19 => 19.0.7 
    react: ^19.0.0 => 19.0.0 
    react-dom: ^19.0.0 => 19.0.0 
    typescript: ^5.7.3 => 5.7.3 

Search keywords: server client createContext navigation DashboardLayout

[whatuserever]

For now I found a workaround to this by introducing a wrapper with the use client directive and using it instead:

// wrapper.tsx
'use client';

export * from '@toolpad/core';

// page.tsx
-import { DashboardLayout, PageContainer } from '@toolpad/core';
+import { DashboardLayout, PageContainer } from './wrapper';