DOCSEARCHbyAlgolia
Submit Docs

Next Admin

repository·main·Indexed 19 days ago

https://github.com/premieroctet/next-admin

A customizable, turnkey admin dashboard for Next.js applications powered by Prisma ORM. It provides built-in management for database relationships, users, and dashboard widgets, featuring a CLI for automated project initialization and support for multiple frameworks via specific adapters.

Tokens
52.9K
Snippets
159
Records
223
Agent score
63%

What's inside next-admin

  1. What is Next Admin

    main

    Next Admin is a library built on top of Prisma and multiple React frameworks that allows you to manage and visualize your Prisma database through a graphical user interface (GUI).

    Key features include:

    • Data Management: Visualize, search, and filter data; manage database relationships; and perform CRUD operations for user management.
    • Customization: Customizable admin dashboard, dashboard widgets, customizable panels, and customizable lists and forms.
    • Framework Support: Native support for Next.js (both App Router and Pages Router), Remix, and TanStack Start, with the capability to support any full-stack framework via Prisma integration.

  2. Translate model names and fields in Next Admin v4

    main

    To translate model names (singular and plural) and their associated field names, use the model key within your translations object. The model name must match the case-sensitive name of the model.

    Tip: If you are only using one language, it is recommended to use the alias system instead of the translation system for customizing field names.

    {
  "model": {
    "User": {
      "name": "User",
      "plural": "Users",
      "fields": {
        "email": "Email",
        "password": "Password"
      }
    }
  }
}

  7. Translate model names and fields

    main

    To translate model names (singular/plural) and their field names, use the model key within the translations object. The key for the model must match the case-sensitive name of the model.

    Note: If you only need to customize names for a single language, it is recommended to use the alias system instead of the i18n translation object.

    {
  "model": {
    "User": {
      "name": "User",
      "plural": "Users",
      "fields": {
        "email": "Email",
        "password": "Password"
      }
    }
  }
}

  9. Understand the List view and Edit view conventions

    main

    The documentation uses two primary terms to describe the user interface components of the admin panel:

    • List view: The interface that displays a table containing all records for a specific model (e.g., a table of all User records).
    • Edit view: The interface used to modify the details of a single specific record.

  12. Implement explicit many-to-many with drag-and-drop sorting

    main

    To enable drag-and-drop sorting on a relationship (e.g., ordering categories for a post), you cannot use a standard implicit Prisma many-to-many relation. Instead, you must define an explicit join table in your Prisma schema that includes an order field.

    Steps to implement:

    1. Prisma Schema: Define a model for the join table (e.g., CategoriesOnPosts) containing the foreign keys and an order integer field.
    2. Next Admin Configuration: In your model's edit.fields configuration:
      • Set display: "list".
      • Set orderField to the name of your integer field in the join table.
      • Set relationshipSearchField to the field used to identify the related entity in the join table.
      • Use relationOptionFormatter (instead of optionFormatter) to format the text in the selection UI.

    When orderField is present and display is list, Next Admin enables drag-and-drop sorting. Upon submission, the order values are updated starting from 0.

    {
  model: {
    Post: {
      edit: {
        fields: {
          categories: {
            relationOptionFormatter: (category) => {
              return `${category.name} Cat.${category.id}`;
            },
            display: "list",
            orderField: "order", // The field used in CategoriesOnPosts for sorting
            relationshipSearchField: "category", // The field to use in CategoriesOnPosts
          },
        }
      }
    }
  }
}