Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc] Fix NextJS tutorial for the latest version of create-next-app #8938

Merged
merged 2 commits into from
May 26, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 15 additions & 10 deletions docs/NextJs.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ React-admin runs seamlessly on [Next.js](https://nextjs.org/), with minimal conf
Let's start by creating a new Next.js project called `nextjs-react-admin`.

```bash
npx create-next-app --ts nextjs-react-admin --use-yarn
npx create-next-app@latest next-admin --ts --use-yarn --eslint --no-tailwind --no-src-dir --no-app --import-alias "@/*"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we adapt the tutorial to work for the default setup instead?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the default setup?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure ;)

It's just that the --no-src-dir --no-app feels like we're opting out of the improvements of Netx.js 13. Or am I mistaken?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's answering no at a question asked by the CLI, just like the --no-tailwind. You either opt in or out for each question with a flag or the CLI will ask it

```

![Setup Next.js](./img/nextjs-setup.webp)
Expand Down Expand Up @@ -128,19 +128,21 @@ Create [a "catch-all" API route](https://nextjs.org/docs/api-routes/dynamic-api-

```jsx
// in pages/api/admin/[[...slug]].ts
export default async function handler(req, res) {
import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
// get the incoming request URL, e.g. 'posts?limit=10&offset=0&order=id.asc'
const requestUrl = req.url.substring("/api/admin/".length);
const requestUrl = req.url?.substring("/api/admin/".length);
// build the CRUD request based on the incoming request
const url = `${process.env.SUPABASE_URL}/rest/v1/${requestUrl}`;
const options = {
const options: RequestInit = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This TS annotation won't work with a jsx syntax highlighting

method: req.method,
headers: {
prefer: req.headers["prefer"] ?? "",
prefer: req.headers["prefer"] as string ?? "",
accept: req.headers["accept"] ?? "application/json",
["content-type"]: req.headers["content-type"] ?? "application/json",
// supabase authentication
apiKey: process.env.SUPABASE_SERVICE_ROLE,
apiKey: process.env.SUPABASE_SERVICE_ROLE ?? '',
},
};
if (req.body) {
Expand All @@ -149,24 +151,27 @@ export default async function handler(req, res) {
// call the CRUD API
const response = await fetch(url, options);
// send the response back to the client
res.setHeader("Content-Range", response.headers.get("content-range"));
const contentRange = response.headers.get("content-range");
if (contentRange) {
res.setHeader("Content-Range", contentRange);
}
res.end(await response.text());
}
```

**Tip**: Some of this code is really PostgREST-specific. The `prefer` header is required to let PostgREST return one record instead of an array containing one record in response to `getOne` requests. The `Content-Range` header is returned by PostgREST and must be passed down to the client. A proxy for another CRUD API will require different parameters.

Finally, update the react-admin data provider to use the Supabase adapter instead of the JSON Server one. As Supabase provides a PostgREST endpoint, we'll use [`ra-data-postgrest`](https://github.com/promitheus7/ra-data-postgrest):
Finally, update the react-admin data provider to use the Supabase adapter instead of the JSON Server one. As Supabase provides a PostgREST endpoint, we'll use [`ra-data-postgrest`](https://github.com/raphiniert-com/ra-data-postgrest):

```sh
yarn add @promitheus/ra-data-postgrest
yarn add @raphiniert/ra-data-postgrest
```

```jsx
// in src/admin/App.jsx
import * as React from "react";
import { Admin, Resource, ListGuesser } from 'react-admin';
import postgrestRestProvider from "@promitheus/ra-data-postgrest";
import postgrestRestProvider from "@raphiniert/ra-data-postgrest";

const dataProvider = postgrestRestProvider("/api/admin");

Expand Down
Binary file modified docs/img/nextjs-setup.webp
Binary file not shown.