react-admin与下一个js

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

我想真正为我的 BO 使用 react-admin。我尝试了测试示例，并通过 react 完美运行。不幸的是，当我试图在下一个 js 中包含一些代码时 - 它不起作用。

我创建了/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？

非常感谢

回答

//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