# next-admins

**Repository Path**: ArtfulCoder/next-admins

## Basic Information

- **Project Name**: next-admins
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-27
- **Last Updated**: 2024-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Next Admin

[![License](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
[![Version](https://img.shields.io/npm/v/@premieroctet/next-admin/latest)](https://www.npmjs.com/package/@premieroctet/next-admin)

`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.

<div align="center" style="display:flex;flex-direction:column;">
  <a href="https://next-admin.js.org">
    <img src="https://next-admin.js.org/screenshot.png" alt="Next Admin" />
  </a>
</div>

[https://next-admin.js.org](https://next-admin.js.org)

## Features

- 💅 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

## Installation

To install the library, run the following command:

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

## Documentation

For detailed documentation, please refer to the [documentation](https://next-admin-docs.vercel.app/).

## Usage

To use the library in your Next.js application, follow these steps:

1. Create an admin route in your Next.js application.
2. Add the file `[[...nextadmin]].js` to the `pages/admin` directory.
3. Export the `NextAdmin` component from the file.
4. Use `getServerSideProps` to pass the `props` from the `nextAdminRouter` to the `NextAdmin` 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](https://next-admin-docs.vercel.app/))

## Example

Here's a basic example of how to use the library:

#### App router

Set Next Admin server actions into your app:

```ts
// actions/nextadmin.ts
"use server";
import { ActionParams, ModelName } from "@premieroctet/next-admin";
import {
  deleteResourceItems,
  submitForm,
  searchPaginatedResource,
  SearchPaginatedResourceParams,
} 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);
};

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);
};
```

Then configure `page.tsx`

```tsx
// 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 {
  submitFormAction,
  deleteItem,
  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,
    deleteAction: deleteItem,
    searchPaginatedResourceAction: searchResource,
  });

  return <NextAdmin {...props} dashboard={Dashboard} />;
}
```

#### Page Router

```tsx
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 }>
  >;
};
```

## Demonstration

You can find the library code in the [next-admin](https://github.com/premieroctet/next-admin) repository.

Also you can find a deployed version of the library [here](https://next-admin-po.vercel.app/).

## Sponsors

This project is being developed by [Premier Octet](https://www.premieroctet.com), a Web and mobile agency specializing in React and React Native developments.

## License

This library is open source and released under the [MIT License](https://opensource.org/licenses/MIT).