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:
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.create.succeed | The text displayed after a successful creation | "Created successfully" |
form.update.succeed | The text displayed after a successful update | "Updated successfully" |
form.delete.succeed | The text displayed after a successful deletion | "Deleted successfully" |
form.validation.error | The text displayed when a form validation error occurs | "Validation error" |
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" |
form.widgets.scalar_array.add | The text displayed in the scalar array field's button to add new items to the array | "Add new item" |
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). | {} |
search.advanced.title | Title for the advanced search modal | "Advanced search" |
search.advanced.add | Label of the trigger button to add a filter for the advanced search | "Add filter" |
search.advanced.clear | Label of the button to clear the filters for the advanced search | "Clear" |
search.advanced.cancel | Label of the button to close the advanced search modal | "Cancel" |
search.advanced.save | Label of the button to save the filters for the advanced search | "Save" |
search.advanced.and_or_group | Label of the option to add an AND or OR group to the advanced search | "AND / OR group" |
search.advanced.conditions.equals | Label of the advanced search condition for a field that is equals to a value | "Equals" |
search.advanced.conditions.not | Label of the advanced search condition for a field that is not equal to a value | "Equals" |
search.advanced.conditions.in | Label of the advanced search condition for a field that is in a set of values | "Equals" |
search.advanced.conditions.notIn | Label of the advanced search condition for a field that is not in a set of values | "Equals" |
search.advanced.conditions.lt | Label of the advanced search condition for a field that less than a number value | "Equals" |
search.advanced.conditions.lte | Label of the advanced search condition for a field that is less than or equal to a number value | "Equals" |
search.advanced.conditions.gt | Label of the advanced search condition for a field that is greater than a number value | "Equals" |
search.advanced.conditions.gte | Label of the advanced search condition for a field that is greater than or equal to a number value | "Equals" |
search.advanced.conditions.contains | Label of the advanced search condition for a field that contains a value | "Equals" |
search.advanced.conditions.search | Label of the advanced search condition for a field that has a search value | "Equals" |
search.advanced.conditions.startsWith | Label of the advanced search condition for a field that starts with a value | "Equals" |
search.advanced.conditions.endsWidth | Label of the advanced search condition for a field that ends with a value | "Equals" |
search.advanced.conditions.null | Label of the advanced search condition for a field that is null | "Equals" |
search.advanced.conditions.null | Label 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.