next-admin
provides a customizable and turnkey admin dashboard for applications built with Next.js and powered by the Prisma ORM. It aims to simplify the development process by providing a turnkey admin system that can be easily integrated into your project.
- 💅 Customizable admin dashboard
- 💽 Database relationships management
- 👩🏻💻 User management (CRUD operations)
- 🎨 Dashboard widgets and customizable panels
- ⚛️ Integration with Prisma ORM
- 👔 Customizable list and form
- ⚙️ Supports App Router and Page Router
To install the library, run the following command:
yarn add @premieroctet/next-admin prisma-json-schema-generator
For detailed documentation, please refer to the documentation.
To use the library in your Next.js application, follow these steps:
- Create an admin route in your Next.js application.
- Add the file
[[...nextadmin]].js
to thepages/admin
directory. - Export the
NextAdmin
component from the file. - Use
getServerSideProps
to pass theprops
from thenextAdminRouter
to theNextAdmin
component.
Bonus: Customize the admin dashboard by passing the NextAdminOptions
options to the router and customize the admin dashboard by passing dashboard
props to NextAdmin
component. (More details in the documentation)
Here's a basic example of how to use the library:
// app/admin/[[...nextadmin]]/page.tsx
import { NextAdmin } from "@premieroctet/next-admin";
import { getPropsFromParams } from "@premieroctet/next-admin/dist/appRouter";
import "@premieroctet/next-admin/dist/styles.css";
import Dashboard from "../../../components/Dashboard";
import { options } from "../../../options";
import { prisma } from "../../../prisma";
import schema from "../../../prisma/json-schema/json-schema.json"; // generated by prisma-json-schema-generator on yarn run prisma generate
import "../../../styles.css";
import { submitFormAction } from "../../../actions/nextadmin";
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} />;
}
import { PrismaClient } from "@prisma/client";
import schema from "./../../../prisma/json-schema/json-schema.json"; // generated by prisma-json-schema-generator on yarn run prisma generate
import "@premieroctet/next-admin/dist/styles.css";
import {
AdminComponentProps,
NextAdmin,
NextAdminOptions,
} from "@premieroctet/next-admin";
const prisma = new PrismaClient();
export default function Admin(props: AdminComponentProps) {
return <NextAdmin {...props} />;
}
export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
const { nextAdminRouter } = await import(
"@premieroctet/next-admin/dist/router"
);
const adminRouter = await nextAdminRouter(prisma, schema);
return adminRouter.run(req, res) as Promise<
GetServerSidePropsResult<{ [key: string]: any }>
>;
};
You can find the library code in the next-admin repository.
Also you can find a deployed version of the library here.
This library is open source and released under the MIT License.