next-i18next rehydration error linting rule

.eslintrc.json

{
  "$schema": "http://json.schemastore.org/eslintrc",
  "overrides": [
    {
      "files": ["./src/**/*.ts", "./src/**/*.tsx"],
      "rules": {
        "no-restricted-imports": [
          "error",
          {
            "name": "react-i18next",
            "message": "Please use next-i18next instead."
          }
        ]
      }
    }
  ]
}

README.md

React Hydration Error with next-i18next

Error: Text content does not match server-rendered HTML. See more info here: https://nextjs.org/docs/messages/react-hydration-error

I kept running into issues about rendering mismatches between server and client like so:

Warning: Prop alt did not match. Server: "common.brandLogo" Client: "Brand Logo"

This was almost always due to me importing from react-18next instead of next-i18next, so I made a super small linting rule to help prevent myself and others from running into this.