docs
I18n

I18n

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 headerAdd
list.header.search.placeholderThe placeholder used in the search inputSearch
list.footer.indicator.showingThe "Showing from" text in the list indicator, e.g: Showing from 1 to 10 of 25Showing from
list.footer.indicator.toThe "to" text in the list indicator, e.g: Showing from 1 to 10 of 25to
list.footer.indicator.ofThe "of" text in the list indicator, e.g: Showing from 1 to 10 of 25of
list.row.actions.delete.labelThe text in the delete button displayed at the end of each rowDelete
list.empty.labelThe text displayed when there is no row in the listNo {{resource}} found
list.empty.captionThe caption displayed when there is no row in the listGet started by creating a new {{resource}}
form.button.save.labelThe text displayed in the form submit buttonSubmit
form.button.delete.labelThe text displayed in the form delete buttonDelete
form.widgets.file_upload.labelThe text displayed in file upload widget to select a fileChoose a file
form.widgets.file_upload.drag_and_dropThe text displayed in file upload widget to indicate a drag & drop is possibleor drag and drop
form.widgets.file_upload.deleteThe text displayed in file upload widget to delete the current fileDelete
actions.labelThe text displayed in the dropdown button for the actions listAction
actions.delete.labelThe text displayed for the default delete action in the actions dropdownDelete
selector.loadingThe text displayed in the selector widget while loading the optionsLoading...

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.