I18n

💡

This documentation covers an older version of Next Admin. If you are using the latest version (>=5.0.0 and above), please refer to the current documentation.

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

Name	Type	Description	Default Value
list.header.add.label	string	The "Add" button in the list header	Add
list.header.search.placeholder	string	The placeholder used in the search input	Search
list.footer.indicator.showing	string	The "Showing from" text in the list indicator, e.g: Showing from 1 to 10 of 25	Showing from
list.footer.indicator.to	string	The "to" text in the list indicator, e.g: Showing from 1 to 10 of 25	to
list.footer.indicator.of	string	The "of" text in the list indicator, e.g: Showing from 1 to 10 of 25	of
list.row.actions.delete.label	string	The text in the delete button displayed at the end of each row	Delete
list.row.actions.delete.alert	string	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	string	The text appearing after a successful deletion from the list	Deleted successfully
list.row.actions.delete.error	string	The text appearing after an error during the deletion from the list	An error occured while deleting
list.empty.label	string	The text displayed when there is no row in the list	No {{resource}} found
list.empty.caption	string	The caption displayed when there is no row in the list	Get started by creating a new {{resource}}
form.button.save.label	string	The text displayed in the form submit button	Submit
form.button.delete.label	string	The text displayed in the form delete button	Delete
form.delete.alert	string	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	string	The text displayed in file upload widget to select a file	Choose a file
form.widgets.file_upload.drag_and_drop	string	The text displayed in file upload widget to indicate a drag & drop is possible	or drag and drop
form.widgets.file_upload.delete	string	The text displayed in file upload widget to delete the current file	Delete
form.widgets.multiselect.select	string	The text displayed in the multiselect widget in list display mode to toggle the select dialog	Select items
actions.label	string	The text displayed in the dropdown button for the actions list	Action
actions.edit.label	string	The text displayed for the default edit action in the actions dropdown	Edit
actions.create.label	string	The text displayed for the default create action in the actions dropdown	Create
actions.delete.label	string	The text displayed for the default delete action in the actions dropdown	Delete
selector.loading	string	The text displayed in the selector widget while loading the options	Loading...
user.logout	string	The text displayed in the logout button	Logout
model	object	Object to custom model and field names. More details	{}

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.