I18n

I18n

This is the documentation for the latest version of Next Admin. If you are using an older version (<5.0.0), please refer to the documentation

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

The following keys are accepted:

NameDescriptionDefault Value
list.header.add.labelThe "Add" button in the list header"Add"
list.header.search.placeholderThe placeholder used in the search input"Search"
list.footer.indicator.showingThe "Showing from" text in the list indicator, e.g: Showing from 1 to 10 of 25"Showing from"
list.footer.indicator.toThe "to" text in the list indicator, e.g: Showing from 1 to 10 of 25"to"
list.footer.indicator.ofThe "of" text in the list indicator, e.g: Showing from 1 to 10 of 25"of"
list.row.actions.delete.labelThe text in the delete button displayed at the end of each row"Delete"
list.row.actions.delete.alertThe 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.successThe text appearing after a successful deletion from the list"Deleted successfully"
list.row.actions.delete.errorThe text appearing after an error during the deletion from the list"An error occured while deleting"
list.empty.labelThe text displayed when there is no row in the list"No {{resource}} found"
list.empty.captionThe caption displayed when there is no row in the list"Get started by creating a new {{resource}}"
form.create.succeedThe text displayed after a successful creation"Created successfully"
form.update.succeedThe text displayed after a successful update"Updated successfully"
form.delete.succeedThe text displayed after a successful deletion"Deleted successfully"
form.validation.errorThe text displayed when a form validation error occurs"Validation error"
form.button.save.labelThe text displayed in the form submit button"Submit"
form.button.delete.labelThe text displayed in the form delete button"Delete"
form.delete.alertThe text displayed on the alert when the delete button is clicked"Are you sure you want to delete this?"
form.widgets.file_upload.labelThe text displayed in file upload widget to select a file"Choose a file"
form.widgets.file_upload.drag_and_dropThe text displayed in file upload widget to indicate a drag & drop is possible"or drag and drop"
form.widgets.file_upload.deleteThe text displayed in file upload widget to delete the current file"Delete"
form.widgets.multiselect.selectThe text displayed in the multiselect widget in list display mode to toggle the select dialog"Select items"
form.widgets.scalar_array.addThe text displayed in the scalar array field's button to add new items to the array"Add new item"
actions.labelThe text displayed in the dropdown button for the actions list"Action"
actions.edit.labelThe text displayed for the default edit action in the actions dropdown"Edit"
actions.create.labelThe text displayed for the default create action in the actions dropdown"Create"
actions.delete.labelThe text displayed for the default delete action in the actions dropdown"Delete"
selector.loadingThe text displayed in the selector widget while loading the options"Loading..."
user.logoutThe text displayed in the logout button"Logout"
modelObject to custom model and fields names (more details).{}
search.advanced.titleTitle for the advanced search modal"Advanced search"
search.advanced.addLabel of the trigger button to add a filter for the advanced search"Add filter"
search.advanced.clearLabel of the button to clear the filters for the advanced search"Clear"
search.advanced.cancelLabel of the button to close the advanced search modal"Cancel"
search.advanced.saveLabel of the button to save the filters for the advanced search"Save"
search.advanced.and_or_groupLabel of the option to add an AND or OR group to the advanced search"AND / OR group"
search.advanced.conditions.equalsLabel of the advanced search condition for a field that is equals to a value"Equals"
search.advanced.conditions.notLabel of the advanced search condition for a field that is not equal to a value"Equals"
search.advanced.conditions.inLabel of the advanced search condition for a field that is in a set of values"Equals"
search.advanced.conditions.notInLabel of the advanced search condition for a field that is not in a set of values"Equals"
search.advanced.conditions.ltLabel of the advanced search condition for a field that less than a number value"Equals"
search.advanced.conditions.lteLabel of the advanced search condition for a field that is less than or equal to a number value"Equals"
search.advanced.conditions.gtLabel of the advanced search condition for a field that is greater than a number value"Equals"
search.advanced.conditions.gteLabel of the advanced search condition for a field that is greater than or equal to a number value"Equals"
search.advanced.conditions.containsLabel of the advanced search condition for a field that contains a value"Equals"
search.advanced.conditions.searchLabel of the advanced search condition for a field that has a search value"Equals"
search.advanced.conditions.startsWithLabel of the advanced search condition for a field that starts with a value"Equals"
search.advanced.conditions.endsWidthLabel of the advanced search condition for a field that ends with a value"Equals"
search.advanced.conditions.nullLabel of the advanced search condition for a field that is null"Equals"
search.advanced.conditions.nullLabel of the advanced search condition for a field that is not null"Equals"

Translate model name and fields

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

Using getMessages allows you to provide an object with a multiple level structure to translate the keys, while the translations props only allow 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, as well 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 out the example app for more details on its 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"
      }
    }
  }
}

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