英文:
how to use context and still use metadata api inside next js 13
问题
I am unable to render layout.tsx with a default theme as the theme provider is needed and useContext is called. Therefore next js complains about not being able to run server-side. So I put the use client field into the document, and now the metadata tags won't load.
layout.tsx
'use client'
import { Metadata } from 'next'
export const metadata: Metadata = {
title: {
default: 'some title',
template: '%s | some title'
}
}
import { createTheme, ThemeProvider } from '@mui/material/styles'
const theme = createTheme({...})
# ...
export default ({children}: {children: React.ReactNode}) => (
<ThemeProvider theme={theme}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<html>
<body>{children}</body>
</html>
</LocalizationProvider>
</ThemeProvider>
)
英文:
I am unable to render layout.tsx with a default theme as the theme provider is needed and useContext is called. Therefore next js complains about not being able to run server-side. So I put the use client field into the document, and now the metadata tags won't load.
layout.tsx
'use client'
import { Metadata } from 'next'
export const metadata: Metadata = {
title: {
default: 'some title',
template: '%s | some title'
}
}
import { createTheme, ThemeProvider } from '@mui/material/styles'
const theme = createTheme({...
...
export default ({children}: {children: React.ReactNode}) => (
<ThemeProvider theme={theme}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<html>
<body>{children}</body>
</html>
</LocalizationProvider>
</ThemeProvider>
)
答案1
得分: 2
Layout.tsx
import { Metadata } from 'next'
import RootLayout from './RootLayout'
export const metadata: Metadata = {
title: {
default: '某个标题',
template: '%s | 某个标题'
}
}
export default function Layout({ children }: LayoutProps) {
return (
<html lang="en">
<body>
<RootLayout>{children}</RootLayout>
</body>
</html>
)
}
RootLayout.tsx
'use client'
import { createTheme, ThemeProvider } from '@mui/material/styles'
const theme = createTheme({})
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider theme={theme}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<html>
<body>{children}</body>
</html>
</LocalizationProvider>
</ThemeProvider>
)
}
英文:
You need to split them in 2 files simple, one client & another server
Layout.tsx
import { Metadata } from 'next'
import RootLayout from './RootLayout'
export const metadata: Metadata = {
title: {
default: 'some title',
template: '%s | some title'
}
}
export default function Layout({ children }: LayoutProps) {
return (
<html lang="en">
<body>
<RootLayout>{children}</RootLayout>
</body>
</html>
)
}
RootLayout.tsx
'use client'
import { createTheme, ThemeProvider } from '@mui/material/styles'
const theme = createTheme({})
export default RootLayout({children}: {children: React.ReactNode}) => (
<ThemeProvider theme={theme}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<html>
<body>{children}</body>
</html>
</LocalizationProvider>
</ThemeProvider>
)
答案2
得分: 1
不要将您的布局设置为客户端组件，而是创建一个名为Provider的客户端组件，然后可以在您的布局中导入它。以下是一个示例：
"use client";
import { createTheme, ThemeProvider } from '@mui/material/styles'
interface Props extends React.PropsWithChildren {}
const theme = createTheme(/* ... */);
export default function Provider({ children }: Props) {
return <ThemeProvider>{ children }</ThemeProvider>;
}
英文:
Do not make your layout a client component, rather create a client component called Provider that then can be imported in your layout. Heres an example:
"use client";
import { createTheme, ThemeProvider } from '@mui/material/styles'
interface Props extends React.PropsWithChildren {}
const theme = createTheme(/* ... */);
export default function Provider({ children }: Props) {
return <ThemeProvider>{ children }</ThemeProvider>;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论