Getting Started

💡

This documentation covers an older version of Next Admin. If you are using the latest version (>=5.0.0 and above), please refer to the current documentation.

next-admin is a tool that works only with Prisma (for now) so in this guide we will assume you already have a Next.js app with Prisma set up.

To get started with next-admin follow the steps below.

Install next-admin and prisma-json-schema-generator

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

Setup TailwindCSS

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 :

tailwind.config.js

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

Setup SuperJson

SuperJson is required to avoid errors related to invalid serialization 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:

next.config.js

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

Generate Prisma JSON schema

Next-Admin relies on Prisma (opens in a new tab). If you do not have it, you can install Prisma (opens in a new tab).

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

schema.prisma

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.

Create the Next-Admin page

First, create an options.ts file (see Options parameter for more details):

options.ts

import { NextAdminOptions } from "@premieroctet/next-admin";
 
export const options: NextAdminOptions = {
  basePath: "/admin",
  title: "⚡️ My Admin",
}

Then create an nextadmin.ts action file:

app/actions/nextadmin.ts

import { ActionParams, ModelName } from "@premieroctet/next-admin";
import {
  SearchPaginatedResourceParams,
  deleteResourceItems,
  searchPaginatedResource,
  submitForm,
} from "@premieroctet/next-admin/dist/actions";
import { options } from "path/to/options";
import { prisma } from "path/to/prisma";
 
const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
 
export const submitFormAction = async (
  params: ActionParams,
  formData: FormData
) => {
  return submitForm({ ...params, options, prisma }, formData);
};
 
export const deleteItem = async (
  model: ModelName,
  ids: string[] | number[]
) => {
  return deleteResourceItems(prisma, model, ids);
};
 
export const searchResource = async (
  actionParams: ActionParams,
  params: SearchPaginatedResourceParams
) => {
  return searchPaginatedResource({ ...actionParams, options, prisma }, params);
};

Finally, create the page.tsx file:

app/admin/[[...nextadmin]]/page.tsx

import { NextAdmin } from "@premieroctet/next-admin";
import { getPropsFromParams } from "@premieroctet/next-admin/dist/appRouter";
import { prisma } from "path/to/prisma";
import schema from "path/to/prisma/json-schema/json-schema.json";
import { submitFormAction, deleteItem, searchResource } from "path/to/actions/nextadmin";
import "path/to/styles.css"; // .css file containing tailiwnd rules
import { options } from "path/to/options";
 
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,
    deleteAction: deleteItem,
    searchPaginatedResourceAction: searchResource,
  });
 
  return <NextAdmin {...props} />;
}

⚠️

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

Run the app

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

You should be able to see the admin dashboard.

Introduction <NextAdmin/>