NextJS中使用next/head组件出现元素类型无效报错的问题求助

Looks like you're hitting a common React component type error when using next/head alongside Mantine. Let's break down what's happening and fix it step by step.

The error Element type is invalid: expected a string... but got: object almost always means the component you're trying to render isn't a valid React component. In your case, this points to the <Head> component from next/head either being imported incorrectly or conflicting with other parts of your setup.

Possible Fixes: #

1. Double-check your next/head import

First, confirm you're using the correct default import for the Pages Router (since you're working with _app.js in the pages directory):

// Correct import for Pages Router
import Head from 'next/head';

Avoid using named imports like import { Head } from 'next/head' — this would import an object instead of the component itself, which directly causes the error you're seeing.

2. Move next/head to your _app.js

Sometimes nesting next/head inside UI components (like Mantine's AppShell Header) can cause server-side rendering conflicts. Try moving the Head component directly into your root _app.js instead:

import '../styles/global/_App.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
import Head from 'next/head'; // Add this import

export default function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => page);
  return (
    <>
      <Head>
        <title>Page title</title>
        <meta charSet='utf-8' />
        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
      </Head>
      {getLayout(<Component {...pageProps} />)}
    </>
  );
}

This ensures the head tags are rendered at the top level, which is more reliable for Next.js's server-side rendering flow.

3. Check for component name conflicts

Your custom component is named Header, and you're using Mantine's built-in Header component in your layout. While this shouldn't conflict with next/head's Head, it's worth testing renaming your component to something unique (like PageHeader) to rule out any unexpected scoping issues:

// Rename your component from Header to PageHeader
export default function PageHeader(props) {
  return (
    <>
      <Head>
        {/* ... your head tags ... */}
      </Head>
      {/* Other HTML code */}
    </>
  );
}

4. Reset your dependencies

Corrupted node_modules or version mismatches between Next.js and Mantine can also trigger this error. Try clearing your dependencies and reinstalling:

# Delete node_modules and lock files
rm -rf node_modules package-lock.json
# Reinstall dependencies
npm install
# Restart your dev server
npm run dev

5. Verify Mantine and Next.js compatibility

Make sure your Mantine version is compatible with your Next.js version:

• Mantine v6 requires Next.js 12.2+
• Mantine v7 requires Next.js 13.4+
  If you're running an older combination, upgrade either package to match the compatible versions listed in Mantine's documentation.

内容的提问来源于stack exchange，提问作者Krushnal Patel