用next js对admin做出反应

Question

我正在使用Nextjs创建一个带有React的应用程序。

我真的很想在BO中使用react admin。我尝试了测试示例，使用react它可以完美地工作。不幸的是，当我试图在nextjs中包含一些代码时，它并不起作用。

我创建了/admin/dashboard.tsx文件，并添加了下一个代码(之前由我自己测试-工作代码(：

import * as React from 'react';
import PostIcon from '@material-ui/icons/Book';
import UserIcon from '@material-ui/icons/Group';
import { Admin, Resource, ListGuesser } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import { PostList, PostEdit, PostCreate, PostShow } from './react-admin/posts';
import { UserList } from './react-admin/users';
import Dashboard from './react-admin/Dashboard';
import authProvider from './react-admin/AuthProvider';
const App = () => (
<Admin
dataProvider={jsonServerProvider(
'https://jsonplaceholder.typicode.com'
)}
authProvider={authProvider}
dashboard={Dashboard}
>
<Resource
name="posts"
icon={PostIcon}
list={PostList}
edit={PostEdit}
create={PostCreate}
show={PostShow}
/>
<Resource name="users" icon={UserIcon} list={UserList} />
<Resource name="comments" list={ListGuesser} />
</Admin>
);
export default App;

我有下一个错误(呈现上下文(：呈现问题

也许有人可以给我推荐一些关于react-admin和Next.Js的教程？

非常感谢

Answer 1

这个Admin组件只在客户端工作，您需要将所有组件封装到一个组件中，并使用动态导入来帮助您实现

//pages/index.tsx
import dynamic from "next/dynamic"
const ReactAdmin = dynamic(() => import("components/admin/ReactAdmin"), {
ssr: false,
})
const HomePage = () => <ReactAdmin />
export default HomePage

以及组件本身

//components/admin/ReactAdmin.tsx
import { Admin } from "react-admin"
import jsonServerProvider from "ra-data-json-server"
const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com")
const ReactAdmin = () => {
return <Admin dataProvider={dataProvider} />
}
export default ReactAdmin