Fix Error: Error: You are attempting to export "metadata" from a component marked with "use client", which is unsupported. in Next.js

This error occurs when a page or layout marked with 'use client' exports a metadata object or generateMetadata function. Metadata in Next.js App Router must be defined in server components. Fix it by removing 'use client' from the page or extracting metadata to a separate server component layout.

Reading the Stack Trace

Here's what each line means:

• at collectMetadata (/app/node_modules/next/dist/lib/metadata/resolve-metadata.js:98:11): The metadata resolver detected a metadata export in a client component, which is not supported by the App Router.
• at async resolveMetadata (/app/node_modules/next/dist/lib/metadata/resolve-metadata.js:204:20): Next.js resolves metadata from the component tree during server rendering and cannot process client component exports.
• at async renderToHTMLOrFlightImpl (/app/node_modules/next/dist/server/app-render/app-render.js:572:22): The App Router rendering pipeline fails when it encounters the incompatible metadata export.

Common Causes

'use client';

import { useState } from 'react';

export const metadata = {
  title: 'Dashboard',
  description: 'User dashboard page',
};

export default function Dashboard() {
  const [tab, setTab] = useState('overview');
  return <div>{tab}</div>;
}

'use client';

export async function generateMetadata({ params }) {
  const post = await fetch(`/api/posts/${params.slug}`).then(r => r.json());
  return { title: post.title };
}

export default function PostPage({ params }) {
  return <div>Post: {params.slug}</div>;
}

'use client';

export const metadata = { title: 'Products' };

export default function Products() {
  const [filter, setFilter] = useState('');
  return <input value={filter} onChange={(e) => setFilter(e.target.value)} />;
}

The Fix

Split the page into a server component (which exports metadata) and a client component (which uses useState). The server component page.tsx keeps the metadata export, and the interactive UI moves to a separate 'use client' component.

'use client';

import { useState } from 'react';

export const metadata = {
  title: 'Dashboard',
  description: 'User dashboard page',
};

export default function Dashboard() {
  const [tab, setTab] = useState('overview');
  return <div>{tab}</div>;
}

// app/dashboard/page.tsx (Server Component)
import DashboardClient from './DashboardClient';

export const metadata = {
  title: 'Dashboard',
  description: 'User dashboard page',
};

export default function Dashboard() {
  return <DashboardClient />;
}

// app/dashboard/DashboardClient.tsx
'use client';

import { useState } from 'react';

export default function DashboardClient() {
  const [tab, setTab] = useState('overview');
  return <div>{tab}</div>;
}

Testing the Fix

import { render, screen } from '@testing-library/react';
import DashboardClient from '@/app/dashboard/DashboardClient';

describe('DashboardClient', () => {
  it('renders with default tab', () => {
    render(<DashboardClient />);
    expect(screen.getByText('overview')).toBeInTheDocument();
  });
});

describe('Dashboard metadata', () => {
  it('exports correct metadata', async () => {
    const { metadata } = await import('@/app/dashboard/page');
    expect(metadata.title).toBe('Dashboard');
    expect(metadata.description).toBe('User dashboard page');
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/metadata-client-component-split,git add src/app/dashboard/page.tsx src/app/dashboard/DashboardClient.tsx src/app/dashboard/__tests__/DashboardClient.test.tsx,git commit -m "fix: split dashboard into server and client components for metadata",git push origin fix/metadata-client-component-split

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run build

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

npm install bugstack-sdk

import { initBugStack } from 'bugstack-sdk'

initBugStack({ apiKey: process.env.BUGSTACK_API_KEY })

Deploying the Fix (Manual Path)

1. Split the page into server and client components.
2. Run the Next.js build locally to confirm metadata is resolved.
3. Open a pull request with the component split.
4. Wait for CI checks to pass on the PR.
5. Merge to main and verify metadata renders in page source.

Frequently Asked Questions