Zenn
Open9

Refineのチュートリアルを理解する（Next.js & Supabase）

Next.js
Supabase
refine
RyukiRyuki

Refineとは？

下記公式ドキュメントの和訳（Google翻訳）

つまりは諸々の制御を提供しますよという話？
これだけ聞けば、Supabaseで構築するのと同じきがする。

Refineは、CRUD を多用する Web アプリケーション向けの React メタフレームワークです。社内ツール、管理パネル、ダッシュボード、B2B アプリなど、幅広いエンタープライズ ユースケースに対応します。
Refine のコアフックとコンポーネントは、認証、アクセス制御、ルーティング、ネットワーク、状態管理、i18nなど、プロジェクトの重要な側面に対する業界標準のソリューションを提供することで、開発プロセスを合理化します。
Refine のヘッドレス アーキテクチャでは、ビジネス ロジックを UI およびルーティングから分離することで、高度にカスタマイズ可能なアプリケーションを構築できます。これにより、次のアプリケーションとの統合が可能になります。
TailwindCSSなどのカスタム デザインや UI フレームワークに加え、 Ant Design、Material UI、Mantine、Chakra UIの組み込みサポート。
追加のセットアップ手順を必要とせず、シンプルなルーティング インターフェースによって、Next.js、Remix、React Native、Electron などのさまざまなプラットフォームに対応します。

RyukiRyuki

なぜRefineを使用するか？

ゼロから作ると技術負債が起きるでしょ、そこをRefineなら技術負債を起こさないですよ。ということか。

確かに、オレオレ実装だと技術負債が発生する（現時点で発生して居る）から確かに使いやすいかも？

幅広い開発アプローチの中で、Refine は従来の開発手法による「ゼロからの開始」とローコード/ノーコード ソリューションの間の独自のスイート スポットを占めています。開発初期にはそれぞれに利点があるため、2 つの極端なアプローチはどちらも長期的なリスクを引き起こす可能性があります。
究極レベルの柔軟性を提供するにもかかわらず、「最初から始める」方法では問題が発生する可能性があります。

  • プロジェクトの遅延
  • 技術的負債
  • メンテナンスの問題
  • 開発とセキュリティのベストプラクティスの欠如
  • 汚染されたコードベース
  • チーム間の標準化の欠如
    ローコード /ノーコード ソリューションはこの欠点に対処しますが、次のような新たな一連の課題を生み出します。
  • ベンダーロックイン
  • カスタマイズとスタイリングのオプションが不足している
  • 開発者のエクスペリエンスが悪い
  • 複雑なユースケースに対する限定的なサポート
    両方の長所を提供する Refine は、柔軟性、機敏性、オープン テクノロジから妥協することなく、「ゼロからの」開発のすべてのリスクを軽減します。
RyukiRyuki

動作環境

Reactベースで開発が行われて居るから、React系のフレームワークであればなんでも使用出来るとのこと

  • Next.js
  • Vite
  • Remix
  • 等

導入方法

チュートリアルでは
npm create refine-app@latestを推奨して居る。

前回のスクラップで構築したらNext.jsのバージョンが古かった（"next": "14.1.0"）
ここは注意点かもしれない。

RyukiRyuki

開発環境構築

クイックスタートガイドを参照。
推奨されているnpm create refine-app@latestで構築をする。
今回はSupabaseをデータプロバイダーに選択。

✔ Downloaded remote source successfully.
✔ Choose a project template · refine-nextjs
✔ What would you like to name your project?: · refine-tutorial
✔ Choose your backend service to connect: · data-provider-supabase
✔ Do you want to use a UI Framework?: · mui
✔ Do you want to add example pages?: · mui-example
✔ Choose a package manager: · npm
✔ Mind sharing your email? (We reach out to developers for free priority support, events, and SWAG kits. We never spam.)
RyukiRyuki

開発環境実行

npm run devで環境を実行

> refine-tutorial@0.1.0 dev
> cross-env NODE_OPTIONS=--max_old_space_size=4096 refine dev

╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                  │
│   — refine Devtools beta version is out! To install in your project, just run npm run refine devtools init. https://s.refine.dev/devtools-beta   │
│                                                                                                                                                  │
│   — Hello from refine team! Hope you enjoy! Join our Discord community to get help and discuss with other users. https://discord.gg/refine       │
│                                                                                                                                                  │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

✓ refine devtools is running at port 5001

   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000


   We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.
   The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:

        - incremental was set to true

 ✓ Ready in 2.2s

実行確認

過去にRefineの環境を構築していて、ログインをして居る状況でhttp://localhost:3000にアクセスすると、Cookieの問題なのか、永遠にリダイレクトして居る。

その場合は、http://localhost:3000/blog-postsの存在するページに直接アクセスすれば問題ない。

RyukiRyuki

リソースコンセプト

リソースに諸々書いていればルーティングとか楽だよ〜ということ？
自分もサイドメニューを開発するのによく配列に遷移登録するから、それと似たようなことかな。

Refineにおいて、リソースはアプリケーションのさまざまな側面を結びつける中心的な概念を表すエンティティです。
通常、製品、ブログ記事、注文などのデータエンティティを指します。
リソース定義により、複雑な操作をさまざまなプロバイダーやUI統合を通じてシンプルなアクションに抽
化することで、アプリケーションを構造化された方法で管理することができます。
典型的なリソース定義は以下のようになります：

import { Refine } from "@refinedev/core";
export const App = () => {
 return (
   <Refine
     resources={[
       {
         name: "products",
         list: "/my-products",
         show: "/my-products/:id",
         edit: "/my-products/:id/edit",
         create: "/my-products/new",
       },
     ]}
   >
     {/* ... */}
   </Refine>
 );
};
RyukiRyuki

プロバイダーコンセプト

これはかなり便利かも。
エラー制御や、監査ログの制御を実装できる。
アクセス制御プロバイダーはSupabaseのRLSとどう絡めればいいんだろう？
というか、SupabaseのRLSをRifineで使用出来るのかは不明。

プロバイダーは、データの取得、ルーティング、アクセス制御など、アプリケーションのさまざまな側面を管理するためのRefineの基本構成要素です。
プロバイダーはプラグイン可能であり、組み込みのプロバイダーを使用することも、自分で作成することもできます。これにより、アプリケーションの動作をニーズに合わせてカスタマイズできます。

データプロバイダー: バックエンドデータソースとの通信を管理し、データの取得、作成、更新、削除、キャッシュ、および無効化などのデータ操作を行います。

認証プロバイダー: ユーザー認証と認可のプロセスを管理します。リダイレクトやエラーケースの処理も行います。

アクセス制御プロバイダー: 認可とアクセス制御を管理します。ボタンやメニュー項目の非表示/無効化、ルートやコンポーネントの保護に使用されます。

通知プロバイダー: 成功したミューテーションやエラー後に通知を表示する機能を提供します。

I18nプロバイダー: メニュー項目、ボタンテキスト、テーブルの列、ページタイトルなどの翻訳をレンダリングするi18n機能を提供します。

ライブプロバイダー: アプリケーションにリアルタイムの更新を提供します。例えば、ユーザーが新しいレコードを作成すると、他のユーザーはページをリフレッシュせずに新しいレコードをリストページで確認できます。
ルータープロバイダー: ルートをリソースにマッチさせ、パンくずリストやCRUD操作後の自動リダイレクト、メニュー項目のレンダリングなどのナビゲーション機能を提供します。

監査ログプロバイダー: CRUD操作の監査ログの送信を管理します。

RyukiRyuki

Hook Concept

あまり意味はわからなかったけど、きて本で気にReactのHookを使用するから、開発めっちゃ楽だよみたいな感じかな。

Refineは、React開発におけるモダンで強力なパターンであるフックベースのアーキテクチャを採用しており、開発体験とアプリケーションのパフォーマンスを大幅に向上させます。

Refineのフックはヘッドレスであり、特定のライブラリに依存しないため、使用するライブラリやフレームワークに関係なく統一されたインターフェースを提供します。

例えば、React Router v6、Next.js、Remix、Expoなど、アプリケーション内のルーティングを処理するための異なる組み込みのルータープロバイダーがあります。

しかし、@refinedev/coreパッケージからエクスポートされる単一のuseGoフックを使用することで、使用するルーティングソリューションに関係なく、アプリケーション内の特定のリソースのページにナビゲートできます。

これは一例に過ぎませんが、データの取得、認証、アクセス制御、通知、i18nなどのための多くの他のフックも用意されています。

これらはすべてヘッドレスであり、ライブラリに依存せず、統一されています。

例えば、認可のためにCasbinやCerbosを使用している場合、単一のuseCanフックを使用してコンポーネント内のアクセスを制御できます。

また、i18nのためにnext-i18nextやreact-i18nextを使用する場合でも、単一のuseTranslateフックを使用して翻訳を処理できます。