首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >react-admin with next js

react-admin with next js
EN

Stack Overflow用户
提问于 2021-01-08 13:16:56
回答 1查看 3.6K关注 0票数 11

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

我真的想对我的BO使用react-admin。我试过test example,和react配合使用,它工作得很好。不幸的是,虽然我试图在next js中包含一些代码,但它不能工作。

我创建了/admin/dashboard.tsx文件,并添加了下一步代码(之前我自己测试过-工作代码):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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;

我有下一个错误(呈现上下文):rendering issue

也许有人能给我推荐一些关于react-adminNext.Js的教程

非常感谢

EN

回答 1

Stack Overflow用户

发布于 2021-02-12 14:21:23

这个管理组件只能在客户端工作,你需要把它全部包装到一个组件中,并使用动态导入来帮助你实现这一点

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//pages/index.tsx
import dynamic from "next/dynamic"

const ReactAdmin = dynamic(() => import("components/admin/ReactAdmin"), {
  ssr: false,
})

const HomePage = () => <ReactAdmin />

export default HomePage

和组件本身

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//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
票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65629726

复制
相关文章
Next.js 入门
当使用 React 开发系统的时候,常常需要配置很多繁琐的参数,如 Webpack 配置、Router 配置和服务器配置等。如果需要做 SEO,要考虑的事情就更多了,怎么让服务端渲染和客户端渲染保持一致是一件很麻烦的事情,需要引入很多第三方库。针对这些问题,Next.js提供了一个很好的解决方案,使开发人员可以将精力放在业务上,从繁琐的配置中解放出来。下面我们一起来看看它的一些特性。
Dickensl
2022/06/14
6.6K0
Next.js 入门
Next.js学习
举例:在page下创建一个biao.js的文件 访问路径为:localhost:8080/biao
biaoblog.cn 个人博客
2022/08/11
1.7K0
[Next] 初见next.js
  Next.js 可与 Windows,Mac 和 Linux 一起使用.您只需要在系统上安装 Node.js 即可开始构建 Next.js 应用程序.如果有个编辑器就更好了
不会飞的小鸟
2019/10/01
5.1K0
[Next] 初见next.js
Next.js对比Remix.js
静态网站。这是其最大优势。在使用 TailwindCSS 等,可以更加灵活的制作出样式优美的页面及组件。拥有着较为完善的生态圈。
用户6256742
2022/07/06
11K0
Next.js对比Remix.js
Next.js新手教程
Next.js 是一个轻量级的 React 服务端渲染应用框架。本教程演示使用Next.js制作一个显示比特币汇率的网站。详细的Next.js信息请访问https://nextjs.org/。
fanzhh
2019/12/12
6.2K0
Next.js 中的 SEO
Next.js 是一个用于构建服务器呈现的 React 应用程序的框架,使用像 Next.js 这样的框架的好处之一是它可以很容易地针对搜索引擎优化您的应用程序。
海拥
2023/02/27
4.4K0
Next.js 简明教程
最近用Next.js + Editor.js 撸了一个博客系统。开发起来甚是畅滑,如果你喜欢React,又有同构的需求,不妨由此文入手。
小刀c
2022/09/21
3K0
Next.js 简明教程
React 必学SSR框架——next.js
F首先我们就回顾一下,我们到底是怎么告别了使用 php/jsp 做服务器端渲染,进入前后端分离的客户端渲染时代,又为什么重新回到了服务端渲染。
狂奔滴小马
2021/11/15
7.7K0
React 必学SSR框架——next.js
next.js 源码解析 - dynamic 篇
上文我们一起看完了在 next.js 中如何解决 hydration fail 的错误和如何局部关闭 SSR 的几个方案,其中聊到了 next.js 的 dynamic API。老规矩,今天我们一起来看看 dynamic API 的源码实现。
嘿嘿不务正业
2023/05/09
1.9K0
next.js 源码解析 - dynamic 篇
next+react仿微信pc端聊天|Next.js聊天
Next.js 是基于 React.js 服务端渲染的SSR 开发框架。让你的网页瞬间拥有SEO功能。
andy2018
2020/12/28
8.6K0
next+react仿微信pc端聊天|Next.js聊天
基于 Next.js 的新博客
其实 Hexo 用着是很舒服的。完全静态,主题模板修改起来很简单,很容易就能达到想要的效果。只是一些功能比如 Services Worker 和 LazyLoad 都只能用比较粗暴的方法实现,不美观,而且难维护。 早眼馋别人的各种 Gatsby 和 Next.js 开发的博客了,可自定义强、现代、自带各种优化。Next.js 的官网还有一套简单的教程可以直接上手,跟着教程做完后直接就获得了一个现成的博客系统,或者说是 Markdown 解析器? 总之我们可以从这上面下手。
Cesirdy
2023/05/29
8320
基于 Next.js 的新博客
自用 Next.js 博客程序放出
这几天沉迷 WOT,又是快一个月没更。想起来之前发现 GitHub 上各种比我水的 Next.js 博客程序,干脆把我的也发出来接受民众拷打吧。
Cesirdy
2023/05/29
4210
Next.js的创建与使用
NextJs是React的服务器渲染框架,区别于官方SSRNext最大的特点是可以渲染出Ajax异步请求渲染出来的结果,本网站目前使用的前端框架就是NextJs
用户6256742
2022/07/06
4K0
Next.js的创建与使用
Next.js入门教程 原
参考代码:https://github.com/chkui/nextjs-getting-started 。
随风溜达的向日葵
2018/12/07
5.9K0
next.js 源码解析 - getServerSideProps 篇
老规矩,昨天写了关于 getServerSideProps 的内容,今天趁热写一下 getServerSideProps 相应的源码,看看 next.js getServerSideProps 是怎么实现的,还有什么从文档无法知晓的细节。
嘿嘿不务正业
2023/05/09
1.1K0
next.js 源码解析 - getServerSideProps 篇
基于 Next.js实现在线Excel
如果要从头开始使用 React 构建一个完整的 Web 应用程序,需要哪些步骤? 这当然不像把大象装进冰箱那么简单,只需要分成三步:打开冰箱,拿起大象,塞进冰箱就好。
葡萄城控件
2022/09/19
6.6K0
5 分钟理解 Next.js Static Export
Static Export 是一种 Web 开发模式,它允许我们在构建网站时将页面提前生成为静态 HTML 文件,而不是在每次请求时动态生成。这意味着页面内容在构建时就已经准备好,而不是等待用户请求时才生成。这样做的好处是:
zhaokang555
2023/10/17
5110
next.js 如何配置接口代理 proxy
最近有一个小项目,打算使用 next.js 框架来做。这是我第一次使用该框架,没有太多的经验。按照官方的方法,初始化好项目,然后就能跑起来了。
FungLeo
2021/12/07
4.8K0
next.js 如何配置接口代理 proxy
React服务端渲染-next.js
前台渲染-SPA应用是一个主要阵营,如果说有什么缺点,那就是SEO不好。因为默认的HTML文档只包含一个根节点,实质内容由JS渲染。并且,首屏渲染时间受JS大小和网络延迟的影响较大,因此,某些强SEO的项目,或者首屏渲染要求较高的项目,会采用服务端渲染SSR。
娜姐
2020/09/22
4K0
React服务端渲染-next.js
Next.js + 云开发Webify 打造绝佳网站
之前使用 Next.js + strapi 做了一个简单博客站点也顺道写了一篇 Next.js 简明教程,之后 Next 本身一直在迅猛发展。利用代 js 能力来说做到了:
腾讯云开发TCB
2021/09/10
1.6K0
Next.js + 云开发Webify 打造绝佳网站

相似问题

非阻塞mlock()

31

如何将Java进程锁定到内存?(MLock)

20

cudaHostRegister是否等同于mlock()系统调用?

22

非特权恶意进程(Linux)在SetUID上的安全问题

14

mongo - cli丢弃,mlock失败:无法分配锁定内存

14
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文