20. Panduan Kustomisasi Pengembang

Ringkasan

Panduan ini berisi petunjuk langkah-demi-langkah bagi pengembang untuk memperluas kemampuan boilerplate, termasuk membuat router tRPC API baru, membuat halaman admin baru, serta menambahkan izin RBAC baru.

1. Cara Menambah Router tRPC API Baru

Buat file router baru pada src/server/api/routers/products.ts:

typescript

import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
import { z } from "zod";

export const productsRouter = createTRPCRouter({
  getAll: protectedProcedure.query(async ({ ctx }) => {
    return ctx.db.product.findMany();
  }),
});

Daftarkan sub-router tersebut pada src/server/api/root.ts:

typescript

import { productsRouter } from "~/server/api/routers/products";

export const appRouter = createTRPCRouter({
  // Router yang sudah ada...
  products: productsRouter,
});

Panggil prosedur baru dari komponen React client:

tsx

const { data: products } = api.products.getAll.useQuery();

2. Cara Menambah Halaman Admin Baru

Buat folder rute pada src/app/(admin)/products/page.tsx.

Bungkus konten dengan <RouteGuard requiredPermission="products.view">.

Tambahkan item navigasi pada src/components/app-sidebar.tsx.

3. Cara Menambah Permission RBAC Baru

Buka file prisma/seed.ts.

Tambahkan kunci izin baru ke dalam array permissions:

typescript

{ name: "products.view", description: "View product list", module: "PRODUCTS" },
{ name: "products.create", description: "Create products", module: "PRODUCTS" },

Jalankan pnpm prisma db seed.

Berkas Terkait

src/server/api/root.ts — Katalog tRPC App Router

src/components/app-sidebar.tsx — Menu navigasi sidebar

prisma/seed.ts — Script seed data izin hak akses