You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
|||
33
33
34
-
###Adding React-Admin Dependencies
34
+
## Adding React-Admin Dependencies
35
35
36
36
Add the `react-admin` npm package, as well as a data provider package. In this example, we'll use `ra-data-json-server` to connect to a test API provided by [JSONPlaceholder](https://jsonplaceholder.typicode.com).
37
37
@@ -40,7 +40,7 @@ cd next-admin
40
40
yarn add react-admin ra-data-json-server
41
41
```
42
42
43
-
###Creating The Admin App Component
43
+
## Creating The Admin App Component
44
44
45
45
Next, create a `components` directory inside `src`, and an admin App component in `src/components/AdminApp.jsx`:
46
46
@@ -77,7 +77,7 @@ export default AdminApp;
77
77
78
78
This is a minimal configuration to render CRUD pages for users, posts and comments. React-admin guesses the data structure from the API response.
79
79
80
-
###Exposing The Admin App Component
80
+
## Exposing The Admin App Component
81
81
React-admin is designed as a Single-Page Application, rendered on the client-side. It comes with its own routing sytem, which conflicts with the Next.js routing system. So we must prevent Next.js from rendering the react-admin component on the server-side.
82
82
83
83
To do that, we will have to import our `<AdminApp>` component in Next.js by using the [__lazy loading__ system provided by Next.js](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) and specify the [`ssr` option to false](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr).
@@ -139,7 +139,7 @@ Now the admin renders at `http://localhost:3000/admin`, and you can use the Next
139
139
140
140
**Tip**: If you migrated from the Pages Router, you might have to delete the `.next` directory in your project to ensure NextJS bundles the client dependencies correctly.
141
141
142
-
###Adding an API
142
+
## Adding an API
143
143
144
144
[Next.js allows to serve an API](https://nextjs.org/docs/api-routes/introduction) from the same server. You *could* use this to build a CRUD API by hand. However, we consider that building a CRUD API on top of a relational database is a solved problem and that developers shouldn't spend time reimplementing it.
0 commit comments