Getting Started

Installation

yarn add @premieroctet/next-admin prisma-json-schema-generator

TailwindCSS configuration

Next-Admin relies on TailwindCSS (opens in a new tab) for the style. If you do not have it, you can install TailwindCSS (opens in a new tab) with the following config :

module.exports = {
  content: [
    "./node_modules/@premieroctet/next-admin/dist/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: "class",
  presets: [require("@premieroctet/next-admin/dist/preset")],
};

Then import your .css file containing Tailwind rules into a page file or a parent layout.

You can find more information about theming here

SuperJson configuration

SuperJson is required to avoid errors related to invalid serialisation properties that can occur when passing data from server to client.

With Babel

yarn add -D babel-plugin-superjson-next superjson@^1

Add the babel-plugin-superjson-next plugin to your .babelrc file:

{
  "presets": ["next/babel"],
  "plugins": ["superjson-next"]
}

With SWC (Experimental)

yarn add -E -D next-superjson-plugin@0.6.1 superjson

Add the next-superjson-plugin plugin to your next.config.js file:

module.exports = {
  // your current config
  experimental: {
    swcPlugins: [
      [
        "next-superjson-plugin",
        {
          excluded: [],
        },
      ],
    ],
  },
};

Quick Start

Add the prisma-json-schema-generator generator to your schema.prisma file:

generator jsonSchema {
  provider = "prisma-json-schema-generator"
  includeRequiredFields = "true"
}

Then run the following command :

yarn run prisma generate

This will create a json-schema.json file in the prisma/json-schema directory.

// app/admin/[[...nextadmin]]/page.tsx
import { NextAdmin } from "@premieroctet/next-admin";
import { getPropsFromParams } from "@premieroctet/next-admin/dist/appRouter";
import Dashboard from "../../../components/Dashboard";
import { options } from "../../../options";
import { prisma } from "../../../prisma";
import schema from "../../../prisma/json-schema/json-schema.json";
import { submitFormAction } from "../../../actions/nextadmin";
import "../../../styles.css" // .css file containing tailiwnd rules
 
export default async function AdminPage({
  params,
  searchParams,
}: {
  params: { [key: string]: string[] };
  searchParams: { [key: string]: string | string[] | undefined } | undefined;
}) {
  const props = await getPropsFromParams({
    params: params.nextadmin,
    searchParams,
    options,
    prisma,
    schema,
    action: submitFormAction,
  });
 
  return <NextAdmin {...props} dashboard={Dashboard} />;
}

⚠️

Passing the options prop like you'd do on Page router will result in an error in case you have functions defined inside the options object (formatter, handlers, etc.). Make sure to pass no options prop at all.

⚠️

Make sure to not use "use client" in the page.

You will also need to create the action:

// actions/nextadmin.ts
"use server";
import { ActionParams } from "@premieroctet/next-admin";
import { submitForm } from "@premieroctet/next-admin/dist/actions";
import { prisma } from "../prisma";
import { options } from "../options";
 
export const submitFormAction = async (
  params: ActionParams,
  formData: FormData
) => {
  return submitForm({ ...params, options, prisma }, formData);
};

Usage

Once done, you can navigate to the /admin route.

You should be able to see the admin dashboard.

Introduction API