Search has been implemented in the full-version only. If you have started your project using the starter kit as per our suggestion, please follow the below steps in order to implement search functionality in your project.

Begin by installing kbar package which is related to search functionality

Run the appropriate command in your project's root directory based on your package manager:

pnpm install kbar

yarn install kbar

npm install kbar

1. Copy full-version/src/components/layout/shared/search folder from the full-version and paste it in your project's src/components/layout/shared folder.

2. You have to create a searchData.ts/js file in your project's src/data/ folder. This file will contain the data that will be used for search.

3. Import the <NavSearch /> component in src/components/layout/vertical/NavbarContent.tsx file and add after the <NavToggle /> component.

That's it. You have successfully implemented search functionality in your project.🥳🎉

We are using Next.js API routes to fetch data from the database. You can find all the API routes in src/app/api folder. This makes our template API ready and you can use it with any backend.

How to remove Fake DB​

However, you won't need fake DB if you are using real API. In this case please follow below steps to remove fake DB from the template.

• If you are not using the fake DB then you can remove src/app/api/fake-db folder.

• Remove imports related to fake DB.

  NOTE

  Now all (fake) API calls will result Module not found error, until you replace them with your own real API endpoints.

How to replace API endpoints​

As fake DB is removed, and you are using real API, you can delete the whole folder src/app/api and replace it with your own API endpoints.

Make sure you've built the APIs in your backend and connected them to your database before you switch out the sample APIs with the real ones.

• For example you want to fetch data from https://fakedata.example.com/ then you can create a file src/app/**/page.tsx and add following code:

// Component Imports
import Component from '@views/pages/component'

const getData = async () => {

  const res = await fetch(`https://fakedata.example.com/`)

  if (!res.ok) {
    throw new Error('Failed to fetch page Data')
  }

  return res.json()
}

const ComponentPage = async () => {

  const data = await getData()

  return <Component data={data} />
}

export default ComponentPage

You can refer Next.js documentation for more information on data fetching.

Materio admin provides internationalization for navigation only. There might be a time when you might want to translate any text in a page. Here's how you can achieve that:

1. Make sure your have @formatjs/intl-localematcher, @types/negotiator (Typescript version only), and negotiator packages installed
2. It is important to have locale defined in your path. For eg. en/apps/calendar where en is a locale which refers to the English language
3. Create JSON files with language as their file names in locales depending on the languages you need. For example, we're using three languages English, French & Arabic

{
  "helloWorld": "Hello World",
  "text": {
    "paragraph": "This is a paragraph"
  },
  "navigation": {
    ...
  }
}

{
  "helloWorld": "Bonjour le monde",
  "text": {
    "paragraph": "C'est un paragraphe"
  },
  "navigation": {
    ...
  }
}

{
  "helloWorld": "مرحبا بالعالم",
  "text": {
    "paragraph": "هذه فقرة"
  },
  "navigation": {
    ...
  }
}

4. Import getDictionary and type { locale } in the page where you want to translate the content

import { getDictionary } from '@/utils/get-dictionary'
import type { Locale } from '@configs/i18n'

5. You can now initialize the getDictionary and pass the locale as a parameter. This will return a promise which you can use to get the dictionary

// Type Imports
import type { Locale } from '@configs/i18n'

// Util Imports
import { getDictionary } from '@/utils/get-dictionary'

const Component = async ({ params }: { params: { lang: Locale } }) => {
  
  // getDictionary only called on the server side, calling it on the client side will throw an error
  const dictionary = await getDictionary(params.lang)

  return (
    <>
      <div>{dictionary.helloWorld}</div>
      <div>{dictionary['text'].paragraph}</div>
    </>
  )
}

export default Component

That's it! You can now translate any text in your page.