Next.js Discord

Discord Forum

MetaData Error

Unanswered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
'use client'
import '@styles/index.css'
import '@styles/globals.css'
import type { Metadata } from 'next'
import { useRouter } from 'next/navigation';
import { AuthProvider } from '@contexts/AuthProvider';
import { DataProvider } from '@contexts/DataProvider';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import {
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'
import { Toaster } from 'react-hot-toast';
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const queryClient = new QueryClient()
  return (
    <html lang="en">
      <body>
        <QueryClientProvider client={queryClient}>
          <AuthProvider>
              {children}
            <ReactQueryDevtools initialIsOpen={false} />
            <Toaster
              position="bottom-right"
              reverseOrder={false}
            />
          </AuthProvider>
        </QueryClientProvider>
      </body>
    </html>
  )
}


./src/app/layout.tsx
ReactServerComponentsError:
You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive
,-[/vercel/path0/frontend/src/app/layout.tsx:12:1]
12 | } from '@tanstack/react-query'
13 | import { Toaster } from 'react-hot-toast';
14 |
15 | export const metadata: Metadata = {
: ^^^^^^^^
16 | title: 'Create Next App',
17 | description: 'Generated by create next app',
18 | }
`----

Why am I getting this error?
Am I supposed to use <Head>?

1 Reply

@Brown bear 'use client' import '@styles/index.css' import '@styles/globals.css' import type { Metadata } from 'next' import { useRouter } from 'next/navigation'; import { AuthProvider } from '@contexts/AuthProvider'; import { DataProvider } from '@contexts/DataProvider'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools' import { QueryClient, QueryClientProvider, } from '@tanstack/react-query' import { Toaster } from 'react-hot-toast'; export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function RootLayout({ children, }: { children: React.ReactNode }) { const queryClient = new QueryClient() return ( <html lang="en"> <body> <QueryClientProvider client={queryClient}> <AuthProvider> {children} <ReactQueryDevtools initialIsOpen={false} /> <Toaster position="bottom-right" reverseOrder={false} /> </AuthProvider> </QueryClientProvider> </body> </html> ) } ./src/app/layout.tsx ReactServerComponentsError: You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive ,-[/vercel/path0/frontend/src/app/layout.tsx:12:1] 12 | } from '@tanstack/react-query' 13 | import { Toaster } from 'react-hot-toast'; 14 | 15 | export const metadata: Metadata = { : ^^^^^^^^ 16 | title: 'Create Next App', 17 | description: 'Generated by create next app', 18 | } `---- Why am I getting this error? Am I supposed to use <Head>?