Next.js と React-admin を使って簡単な管理画面を作成するチュートリアルをやってみた

Next.js 初心者が React-admin を使って管理画面作成に挑戦しています。今回は React-admin 公式ドキュメントにある、Next.js Integration のチュートリアルをやってみました。

#Next.js

Takaaki Kakei

2022.11.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは、筧(@TakaakiKakei)です。

最近、Next.js と React-admin を使って管理画面作成に挑戦しています。今回は、React-admin の公式ドキュメントで用意されている、Next.js Integration のチュートリアルをやってみたので、その内容についてご紹介します。

React-admin - My First Project Tutorial

前提

予め、今回の出てくるキーワードについて概要をおさらいしましょう。

Next.js とは

Next.js by Vercel - The React Framework

Next.js は React をベースに開発された JavaScript フレームワークです。 React のページ遷移のしやすさなどを維持しながら、ページ単位で SSR(サーバーサイドレンダリング)を容易に利用できます。 Next.js についてもっと詳しく知りたい方は、以下のチュートリアルをやってみることをおすすめします。

Create a Next.js App | Learn Next.js

React-admin とは

A frontend Framework for building data-driven applications running in the browser, on top of REST/GraphQL APIs, using React and Material Design. Open sourced and maintained by marmelab.

React-admin - Documentation

React-admin は管理画面を簡単に作成できる、フロントエンドフレームワークです。例えば下図のような管理画面をすぐに作成できます。

やってみた

React-admin - My First Project Tutorial

今回はチュートリアルの中の以下の章についてやっていきます。

Setting Up Next.js
Setting Up React-Admin
Using React-Admin As The Root Application
Rendering React-Admin In A Sub Route

このチュートリアルをやることで、上図のような管理画面を以下のパスで簡単に表示できるようになります。

http://localhost:3000
http://localhost:3000/admin

Setting Up Next.js

Next.js をセットアップします。チュートリアルでは yarn が使われていますが、本ブログでは今後 npm を使います。

$ cd プロジェクト
$ npx create-next-app --ts .

上記コマンドを実行すると、下図のフォルダが作成されます。

Setting Up React-Admin

React-Admin をセットアップします。

react-admin と ra-data-json-server をインストールします。 ra-data-json-server は JSONPlaceholder - Free Fake REST API が提供している、テスト用の fake API です。管理画面上のダミーデータ用にインストールします。

npm install react-admin ra-data-json-server

続いて、React-admin 用の component として、src/Admin/App.jsx を作成します。

import jsonServerProvider from "ra-data-json-server";
import { Admin, ListGuesser, Resource } from "react-admin";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="posts" list={ListGuesser} />
    <Resource name="comments" list={ListGuesser} />
  </Admin>
);

export default App;

コード内容について簡単に説明します。

Admin コンポーネントでは、dataProvider を指定します。ここでは、ダミーデータ用の ra-data-json-serverを読み込みんでいます。
Resource コンポーネントでは、react-admin アプリケーションの CRUD ルートを定義します。ここでは、ListGuesser を使い、list を定義しています。
ListGuesser を使うことで、取得したデータに基づいて、リストのカラムにするフォーマットを推測しています。

Using React-Admin As The Root Application

Next.js 上でルートパスに、React-admin のコンポーネントをレンダリングします。デフォルトでは、Next.js　の pages/index.tsx に定義したものがルートパスにレンダリングされるので、 pages/index.tsx を以下のように編集します。

import type { NextPage } from "next";
import dynamic from "next/dynamic";

const App = dynamic(() => import("../src/admin/App"), { ssr: false });

const Home: NextPage = () => {
  return <App />;
};

export default Home;

dynamic import を利用しているのが注目点です。 React-admin はクライアントサイドでレンダリングする想定で作られています。一方で、Next.js は SSR 前提で作られているため、React-admin を利用する場合は、SSR を使用しないように、 dynamic import を使って、SSR を false にするようです。

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, 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 component.

React-admin - Documentation

ターミナルで以下のコマンドを実行して、サーバーを起動します。ここまでの設定についてブラウザで確認してみましょう。

$ cd プロジェクト
$ npm run dev

正しく設定できていれば、http://localhost:3000/ にブラウザでアクセスすると、下図のようないい感じの管理画面が表示できます。

Rendering React-Admin In A Sub Route

多くのケースで React-admin はアプリケーションの一部であることが多いでしょう。例えば、/admin のようなパスで、レンダリングする場合について説明します。

Next.js の場合は、pages/admin.tsx というファイルを作成することで、これを実現できます。ファイルの中身は前の章と同じ内容です。

import type { NextPage } from "next";
import dynamic from "next/dynamic";

const App = dynamic(() => import("../src/admin/App"), { ssr: false });

const Home: NextPage = () => {
  return <App />;
};

export default Home;

サーバーを起動した状態で、http://localhost:3000/admin にブラウザでアクセスすれば、同様の管理画面が追加できたことを確認できます。