## Installation

1. Install required packages
```bash
npm i @husar.ai/i18-drawer react next
```

2. Add `LocaleTX` component to your `_app` file. Optionally pass `api` prop.

```tsx
import type { AppProps } from 'next/app'
import { LocaleTX } from '@husar.ai/i18-drawer';
import '@husar.ai/i18-drawer/dist/styles.css';
 
export default function MyApp({ Component, pageProps }: AppProps) {
  return <>
    <Component {...pageProps} />
    <LocaleTX {...pageProps} />
    {/* <LocaleTX {...pageProps} api='/api/i18-drawer' /> */}
  </>
}
```

3. Add API route `/api/i18-drawer`. Setup path to the `locales` folder.

```ts
import { APIHandler } from '@husar.ai/i18-drawer';

export default APIHandler('src/locales');
```
If you want to have a bit more control you can write API handler yourself. You can use `saveChanges` function to save changes in locales.
```ts
import { LocaleChanges, saveChanges } from '@husar.ai/i18-drawer';
import { NextApiRequest, NextApiResponse } from 'next';

export default (req: NextApiRequest, res: NextApiResponse) => {
  saveChanges(req.body as LocaleChanges, 'src/locales');
  res.send('OK');
};

```

4. If you have error `Can't resolve 'fs'` change webpack config in `next.config.js`.
```js
module.exports = {
  webpack: (config) => {
    // Disable fallback for the 'fs' module
    config.resolve.fallback = { fs: false, path: false };
  
    return config;
  }
};
```