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';

[Janpot]

I can't reproduce in https://stackblitz.com/edit/github-lu5t3yty?file=README.md

You could try if #4624 fixes your issue (pnpm upgrade @toolpad/core@https://pkg.csb.dev/mui/toolpad/commit/780c868d/@toolpad/core). Otherwise you'll have to provide us with a stackblitz/codesandbox that reproduces the issue.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.