GT-Next is a powerful internationalization library designed for Next.js applications. It allows you to effortlessly translate your app into multiple languages, leveraging cloud-based translation APIs, on demand translations, and global caching.
- Inline Translations: Use the
<T>component to translate JSX content directly in your components. - Dynamic Translation: Translate content on demand with minimal setup.
- Template Dictionaries: Manage translatable content using a scalable dictionary design pattern.
- Variable Components: Insert dynamic, untranslatable content like numbers, dates, and currencies with ease.
- Branching Components: Handle conditional rendering and pluralization directly in translations.
- Secure Translation: Sensitive content remains local and safe.
Install gt-next via npm:
npm install gt-nextOr with yarn:
yarn add gt-nextAdd the following environment variables to your .env file:
GT_API_KEY="your-api-key"
GT_PROJECT_ID="your-project-id"
- Get your
API KeyandProject IDfrom the General Translation Dashboard.
Add the <GTProvider> component to add translations for client-side
content.
import { GTProvider } from 'gt-next'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<GTProvider>
{ children }
</GTProvider>
</body>
</html>
)
}The <T> component is the simplest way to translate inline JSX content.
import { T } from 'gt-next';
import { MyComponent } from '@components/MyComponent';
export default function HomePage() {
return (
<T id="greeting">
Hello, world!
<MyComponent>
This gets translated too!
</MyComponent>
</T>
);
}Full documentation, including guides, examples, and API references, can be found at General Translation Docs.