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
A prompt will asks you some questions, feel free to choose answers according to your needs.
26
+
This tutorial assumes you're using an `src` folder, so answer 'Yes' to the 5th question. As for the App Router, you can choose to use it or not, this tutorial will explain how to use both.
27
+
28
+
26
29
27
30
This creates a project with the following folder structure:
|||
30
35
31
-
###Adding React-Admin Dependencies
36
+
## Adding React-Admin Dependencies
32
37
33
38
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).
34
39
@@ -37,86 +42,104 @@ cd next-admin
37
42
yarn add react-admin ra-data-json-server
38
43
```
39
44
40
-
###Creating the Admin App Component
45
+
## Creating The Admin App Component
41
46
42
-
Next, create an `admin` directory inside `src`, and the admin App component in `src/admin/App.jsx`:
47
+
Next, create a `components` directory inside `src`, and an admin App component in `src/components/AdminApp.jsx`:
This is a minimal configuration to render CRUD pages for users, posts and comments. React-admin guesses the data structure from the API response.
78
+
This is a minimal configuration to render CRUD pages for users, posts and comments. React-admin will guess the fields to display in the list and edition pages based on the API response.
79
+
80
+
**Tips**: If you choose App Router, do not forget to add [the `"use client"` directive](https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive).
64
81
65
-
###Exposing the Admin App Component
82
+
## Exposing The Admin App Component
66
83
67
-
Now, let's configure Next.js to render the admin app component in the root path ('/'). Edit the file called `src/pages/index.tsx`, and replace the content with the following:
84
+
React-admin is designed as a Single-Page Application, rendered on the client-side. It comes with various client-side only libraries (react-router, emotion, material-ui, react-query). So when you include the `AdminApp` component in the Next.js app, you must prevent Next.js from rendering it on the server.
85
+
86
+
To do that, import the `<AdminApp>` component in Next.js by using [lazy loading](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).
87
+
88
+
The file to modify depends on the router system you chose during setup:
**Tip**: Why the dynamic import? React-admin is designed as a Single-Page Application, rendered on the client-side. It comes with its own [routing sytem](./Routing.md), which conflicts with the Next.js routing system. So we must prevent Next.js from rendering the react-admin component on the server-side. Using `dynamic` allows disabling Server-Side Rendering for the `<App>` component.
84
-
85
103
Now, start the server with `yarn dev`, browse to `http://localhost:3000/`, and you should see the working admin:
86
104
87
105
88
106
89
-
### Rendering React-Admin In A Sub Route
107
+
Starting from there, you can [Add an API](#adding-an-api) as described in the next section, and/or add features to the Next.js app, as explained in the [Getting started tutorial](./Tutorial.md)
108
+
109
+
## Rendering React-Admin In A Sub Route
90
110
91
111
In many cases, the admin is only a part of the application. For instance, you may want to render the admin in a subpath, e.g. `/admin`.
92
112
93
-
Next.js makes it trivial: create a `src/pages/admin.tsx` file with the same content as in the previous section:
113
+
This implies the creation of a new page in the Next.js app. Create a new file at the following location:
114
+
115
+
- App Router: `src/app/admin/page.tsx`
116
+
- Pages Router: `src/pages/admin/index.tsx`
117
+
118
+
No matter which system you choose, the file should contains the same code:
Now the admin renders at `http://localhost:3000/admin`, and you can use the Next.js routing system to add more pages.
132
+
Now the admin renders at `http://localhost:3000/admin`. You can use the Next.js routing system to add more pages - for instance, a frontend app.
133
+
134
+
**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.
110
135
111
-
###Adding an API
136
+
## Adding an API
112
137
113
138
[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.
114
139
115
140
For instance, if you store your data in a [PostgreSQL](https://www.postgresql.org/) database, you can use [PostgREST](https://postgrest.org/en/stable/) to expose the data as a REST API with zero configuration. Even better, you can use a Software-as-a-Service like [Supabase](https://supabase.com/) to do that for you.
116
141
117
-
In such cases, the Next.js API can only serve as a Proxy to authenticate client queries and pass them down to Supabase.
118
-
119
-
Let's see an example in practice.
142
+
In such cases, the Next.js API can serve as a Proxy to authenticate client queries and pass them down to Supabase. Let's see an example in practice.
120
143
121
144
First, create a Supabase REST API and its associated PostgreSQL database directly on the [Supabase website](https://app.supabase.com/) (it's free for tests and low usage). Once the setup is finished, use the Supabase manager to add the following tables:
122
145
@@ -129,17 +152,21 @@ You can populate these tables via the Supabse UI if you want. Supabase exposes a
129
152
Copy the Supabase API URL and service role key into Next.js's `.env.local` file:
130
153
131
154
```sh
132
-
#In `.env.local`
155
+
#in `.env.local`
133
156
SUPABASE_URL="https://MY_INSTANCE.supabase.co"
134
157
SUPABASE_SERVICE_ROLE="MY_SERVICE_ROLE_KEY"
135
158
```
136
159
137
160
**Tip**: This example uses the **service role key** here and not the anonymous role. This allows mutations without dealing with authorization. **You shouldn't do this in production**, but use the [Supabase authorization](https://supabase.com/docs/guides/auth) feature instead.
138
161
139
-
Create [a "catch-all" API route](https://nextjs.org/docs/api-routes/dynamic-api-routes#optional-catch-all-api-routes) in the Next.js app by adding a `pages/api/admin/[[...slug]].ts` file. This API route redirects all calls from the react-admin app to the Supabase CRUD API:
162
+
Create [a "catch-all" API route](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#catch-all-segmentss) in the Next.js app by adding a new file at the following location:
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).
216
-
217
-
```bash
218
-
cd next-admin
219
-
yarn add react-admin ra-data-json-server
220
-
```
221
-
222
-
### Creating the Admin App Component
223
-
224
-
Next, replace the `app/page.tsx` file with the following code, which initializes the react-admin app:
Now, start the server with `yarn dev`, browse to `http://localhost:3000/`, and you should see the working admin:
246
-
247
-
248
-
249
-
React-admin renders a CRUD for users, posts and comments, guessing the data structure from the API response.
250
-
251
-
252
-
**Tip**: Why the `"use client"` directive? React-admin is designed as a Single-Page Application, rendered on the client-side. It comes with various client-side only libraries (emotion, material-ui, react-query) leveraging the React Context API, and cannot be rendered using React Server components.
253
-
254
-
**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.
255
-
256
-
Starting from there, you can [Add an API](#adding-an-api) as described in the previous section, and/or add features to the Next.js app, as explained in the [Getting started tutorial](./Tutorial.md)
228
+
Your react-admin app now uses the Supabase API to fetch and update data.
0 commit comments