# Linting Rules for gt-next: gt-next Lint
URL: https://generaltranslation.com/en-GB/docs/next-lint.mdx
---
title: gt-next Lint
description: ESLint plugin for gt-next components.
---

<Callout type="warn">
  This is in alpha. Subject to change.
</Callout>

ESLint plugin that catches common translation errors in gt-next components.

## Installation

```bash
npm install --save-dev @generaltranslation/gt-next-lint
```


## Configuration

Add to your `eslint.config.mjs`:

```javascript
import gtNext from "@generaltranslation/gt-next-lint";

export default [
  {
    plugins: { 'gt-next': gtNext },
    rules: {
      'gt-next/no-dynamic-jsx': 'warn',
      'gt-next/no-dynamic-string': 'warn',
    },
  },
];
```


## Rules

### `no-dynamic-jsx`

Wraps dynamic content in `<T>` components with variable components.

```jsx
// ❌ Wrong
<T>Hello {userName}!</T>

// ✅ Correct  
<T>Hello <Var>{userName}</Var>!</T>
```


### `no-dynamic-string`

Only allows string literals in translation functions.

```jsx
const gt = useGT();

// ❌ Wrong
gt(`Hello ${name}`)
gt('Hello ' + name)

// ✅ Correct
gt('Hello, {name}!', { name })
```


## Supported components

* `<Var>` - Variables
* `<DateTime>` - Dates
* `<Num>` - Numbers
* `<Currency>` - Currency

## Supported functions

* `useGT` - Client-side translations

- `getGT` - Server-side translations

## Configuration presets

The plugin ships with a `recommended` config preset:

```javascript
import gtNext from "@generaltranslation/gt-next-lint";

export default [
  gtNext.configs.recommended,
];
```

This enables both `no-dynamic-jsx` and `no-dynamic-string` as warnings.