@husar.ai/render

Installation

1. Install required packages

npm i @husar.ai/i18-drawer react next

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

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' /> */}
  </>
}

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

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.

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');
};

1. If you have error Can't resolve 'fs' change webpack config in next.config.js.

module.exports = {
  webpack: (config) => {
    // Disable fallback for the 'fs' module
    config.resolve.fallback = { fs: false, path: false };
  
    return config;
  }
};