英文:
Where to put providers in NextJs 13?
问题
我正在使用Mui的日期库，它要求在所有组件周围包装一个提供者：
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
function App({ children }) {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
{children}
</LocalizationProvider>
);
}
但在只提供/app目录中的页面的NextJs 13中，没有对应的App函数。
英文:
I'm using the date library by Mui and it requires a provider to be wrapped around all components:
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
function App({ children }) {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
{children}
</LocalizationProvider>
);
}
But there's no corresponding App function in NextJs 13 which only offers pages in the /app directory.
答案1
得分: 1
在Next.js 13中，App函数被替换为位于app目录中的根布局。您可以将提供程序包装在app/layout.tsx文件中的所有组件周围：
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<html lang="en">
<body>{children}</body>
</html>
</LocalizationProvider>
);
}
这将将LocalizationProvider应用于app内部的所有路由。children属性将填充嵌套布局或页面。
英文:
In Next.js 13, the App function is replaced by the root layout in the app directory. You can wrap your provider around all components in the app/layout.tsx file:
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<html lang="en">
<body>{children}</body>
</html>
</LocalizationProvider>
)
}
This will apply the LocalizationProvider to all routes inside app. The children prop will be populated with nested layouts or pages
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论