Next.js 使用下一个js响应管理员

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

我想为我的BO使用react admin。我试过了，但效果很好。不幸的是，当我试图在下一个js中包含一些代码时，它不起作用

我创建了

/admin/dashboard.tsx

文件，并添加了下一个代码（之前由我自己测试-工作代码）：

import*as React from'React'；
从“@material ui/icons/Book”导入PostIcon；
从“@material ui/icons/Group”导入用户图标；
从“react Admin”导入{Admin，Resource，ListGuesser}；
从“ra数据json服务器”导入jsonServerProvider；
从“/react admin/posts”导入{PostList、postdedit、PostCreate、PostShow}；
从“./react admin/users”导入{UserList}；
从“/react admin/Dashboard”导入仪表板；
从“/react admin/authProvider”导入authProvider；
常量应用=（）=>(

也许有人可以给我推荐一些关于
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

//pages/index.tsx
从“下一个/动态”导入动态
const ReactAdmin=dynamic（（）=>import（“components/admin/ReactAdmin”）{
ssr：错，
})
const主页=（）=>
导出默认主页

以及组件本身

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

//components/admin/ReactAdmin.tsx
从“react Admin”导入{Admin}
从“ra数据json服务器”导入jsonServerProvider
const dataProvider=jsonServerProvider（“https://jsonplaceholder.typicode.com")
常量ReactAdmin=（）=>{
返回
}
导出默认的ReactAdmin

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