I18n

Next Admin supports i18n with the translations prop of the NextAdmin component.

The following keys are accepted:

Name	Description	Default value
list.header.add.label	The "Add" button in the list header	Add
list.header.search.placeholder	The placeholder used in the search input	Search
list.footer.indicator.showing	The "Showing from" text in the list indicator, e.g: Showing from 1 to 10 of 25	Showing from
list.footer.indicator.to	The "to" text in the list indicator, e.g: Showing from 1 to 10 of 25	to
list.footer.indicator.of	The "of" text in the list indicator, e.g: Showing from 1 to 10 of 25	of
list.row.actions.delete.label	The text in the delete button displayed at the end of each row	Delete
list.row.actions.delete.alert	The text in the native alert when the delete action is called in the list	Are you sure you want to delete {{count}} element(s)?
list.row.actions.delete.success	The text appearing after a successful deletion from the list	Deleted successfully
list.row.actions.delete.error	The text appearing after an error during the deletion from the list	An error occured while deleting
list.empty.label	The text displayed when there is no row in the list	No {{resource}} found
list.empty.caption	The caption displayed when there is no row in the list	Get started by creating a new {{resource}}
form.button.save.label	The text displayed in the form submit button	Submit
form.button.delete.label	The text displayed in the form delete button	Delete
form.delete.alert	The text displayed on the alert when the delete button is clicked	Are you sure you want to delete this?
form.widgets.file_upload.label	The text displayed in file upload widget to select a file	Choose a file
form.widgets.file_upload.drag_and_drop	The text displayed in file upload widget to indicate a drag & drop is possible	or drag and drop
form.widgets.file_upload.delete	The text displayed in file upload widget to delete the current file	Delete
form.widgets.multiselect.select	The text displayed in the multiselect widget in list display mode to toggle the select dialog	Select items
actions.label	The text displayed in the dropdown button for the actions list	Action
actions.edit.label	The text displayed for the default edit action in the actions dropdown	Edit
actions.create.label	The text displayed for the default create action in the actions dropdown	Create
actions.delete.label	The text displayed for the default delete action in the actions dropdown	Delete
selector.loading	The text displayed in the selector widget while loading the options	Loading...
user.logout	The text displayed in the logout button	Logout
model	Object to custom model and fields names. More details

There is two ways to translate these default keys, provide a function named getMessages inside the options or provide translations props to NextAdmin component.

Note that the function way allows you to provide an object with a multiple level structure to translate the keys, while the translations props only allows you to provide a flat object (form.widgets.file_upload.delete ex.)

You can also pass your own set of translations. For example you can set a custom action name as a translation key, which will then be translated by the lib.

actions: [
  {
    title: "actions.user.email",
    action: async (...args) => {
      "use server";
      const { submitEmail } = await import("./actions/nextadmin");
      await submitEmail(...args);
    },
    successMessage: "actions.user.email.success",
    errorMessage: "actions.user.email.error",
  },
],

Here, the actions.user.email key will be translated by the lib, and the value will be used as the action title, aswell as the success and error messages after the action's execution.

Currently, you can only translate the following:

action title, success and error message
field validation error message

Check the example app for more details on the usage.

Translate model name and fields

By using the model key in the translations object, you can translate the model name and fields.

{
  "model": {
    "User": { // Keep the case sensitive name of the model
      "name": "User",
      "plural": "Users",
      "fields": {
        "email": "Email",
        "password": "Password"
      }
    }
  }
}

Note that if you only use one language for your admin, you should prefer to use the alias system (more details) to customize field names.

API Theming