react-admin with next js

Question

I am creating an app with React using Nextjs.

I'd like to really use react-admin for my BO. I tried test example and with react it works perfectly. Unfortunately, while I am trying to include some code to next js - it doesn't work.

I created /admin/dashboard.tsx file, and added next code (previously tested by myself - working code):

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;

I have the next error (rendering context): rendering issue

Maybe someone can suggest me some tutorial about react-admin and Next.Js?

Thanks a lot

Answer 1

This Admin component works only on client side , you need to wrap all of it to a single component and use dynamic import which help you to achieve that

//pages/index.tsx
import dynamic from "next/dynamic"

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

const HomePage = () => <ReactAdmin />

export default HomePage

and the component itself

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