Skip to content

Add localization for next.js #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
triklozoid wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add localization for next.js #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9223573
Add localization for next.js
triklozoid Aug 5, 2025
d8776bf
trigger ci
triklozoid Aug 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions next-i18next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
i18n: {
defaultLocale: "ru",
locales: ["ru", "en"],
},
};
Comment on lines +1 to +6
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Aug 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Include fallbackLng (and optionally disable locale detection) for safer runtime behaviour
If a user requests an unsupported locale the app will currently throw. Add an explicit fallback to avoid 500s and keep SSR predictable:

 module.exports = {
   i18n: {
     defaultLocale: "ru",
     locales: ["ru", "en"],
+    fallbackLng: "ru",
+    // localeDetection: false, // uncomment if you rely on Django cookie instead
   },
 };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
module.exports = {
i18n: {
defaultLocale: "ru",
locales: ["ru", "en"],
},
};
module.exports = {
i18n: {
defaultLocale: "ru",
locales: ["ru", "en"],
fallbackLng: "ru",
// localeDetection: false, // uncomment if you rely on Django cookie instead
},
};
🤖 Prompt for AI Agents 
In next-i18next.config.js at lines 1 to 6, the configuration lacks a fallbackLng
setting, which can cause runtime errors if an unsupported locale is requested.
Add a fallbackLng property inside the i18n object, setting it to "ru" to ensure
the app falls back to Russian when an unsupported locale is used. Optionally,
add localeDetection: false to disable automatic locale detection for more
predictable SSR behavior.

12 changes: 12 additions & 0 deletions next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,18 @@ const nextConfig = {
compiler: {
styledComponents: true,
},
i18n: {
defaultLocale: "ru",
locales: ["ru", "en"],
localeDetection: false, // отключить автоопределение по Accept-Language
localeCookie: {
name: "django_language",
httpOnly: false,
sameSite: false, // Django uses None, Next.js uses false for None
path: "/",
secure: false, // same as Django DEBUG mode
},
},
Comment on lines +24 to +35
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Aug 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

localeCookie is not a recognised Next.js i18n option
Next.js (≤ 13.5) supports locales, defaultLocale, domains, and localeDetection; there is no localeCookie field. Unknown keys are silently ignored, so the custom cookie settings here will have no effect and may mislead future maintainers.

If cookie control is required, handle it at application level (e.g. setCookie on locale switch) or confirm that your Next.js version introduces localeCookie.

   i18n: {
     defaultLocale: "ru",
     locales: ["ru", "en"],
     localeDetection: false,
-    localeCookie: { … }
   },

🏁 Script executed:

#!/bin/bash
# Locate Next.js version in package.json
echo "Searching for Next.js dependency versions in package.json..."
grep -R -C2 '"next"\s*:' -n package.json || echo "No Next.js entry found in package.json."

Length of output: 327

Remove unsupported localeCookie option from i18n
The localeCookie field isn’t recognized by Next.js 12.1.0 (or any Next.js release up through v13); Next.js only supports locales, defaultLocale, domains and localeDetection under i18n. Unknown properties are silently ignored, so this block has no effect and may mislead future maintainers. If you need to control the locale cookie, do so in application code (e.g. call setCookie when handling a locale switch).

Please remove the following lines in next.config.mjs:

   i18n: {
     defaultLocale: "ru",
     locales: ["ru", "en"],
     localeDetection: false,
-    localeCookie: {
-      name: "django_language",
-      httpOnly: false,
-      sameSite: false, // Django uses None, Next.js uses false for None
-      path: "/",
-      secure: false, // same as Django DEBUG mode
-    },
   },
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
i18n: {
defaultLocale: "ru",
locales: ["ru", "en"],
localeDetection: false, // отключить автоопределение по Accept-Language
localeCookie: {
name: "django_language",
httpOnly: false,
sameSite: false, // Django uses None, Next.js uses false for None
path: "/",
secure: false, // same as Django DEBUG mode
},
},
i18n: {
defaultLocale: "ru",
locales: ["ru", "en"],
localeDetection: false, // отключить автоопределение по Accept-Language
},
🤖 Prompt for AI Agents 
In next.config.mjs around lines 24 to 35, the i18n configuration includes an
unsupported localeCookie option that Next.js does not recognize and silently
ignores. Remove the entire localeCookie block from the i18n configuration to
avoid confusion and ensure only supported options remain. Manage locale cookies
separately in application code if needed.


productionBrowserSourceMaps: true,
reactStrictMode: true,
Expand Down
7 changes: 5 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,22 @@
"@fortawesome/free-brands-svg-icons": "^6.0.0",
"@fortawesome/free-solid-svg-icons": "^6.0.0",
"@fortawesome/react-fontawesome": "^0.1.17",
"@prisma/client": "^3.9.2",
"@prisma/client": "latest",
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Aug 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Avoid "latest" – pin Prisma packages to a fixed semver range
Using the string "latest" for both @prisma/client and prisma makes every install potentially pull a different version, which breaks reproducibility and can introduce breaking changes without notice (Prisma frequently ships breaking feature flags). Replace it with an explicit semver (e.g. "^5.7.0" or whatever version you have validated in CI).

-    "@prisma/client": "latest",
+    "@prisma/client": "^5.7.0",
 …
-    "prisma": "latest",
+    "prisma": "^5.7.0",

Also applies to: 84-84

🤖 Prompt for AI Agents 
In package.json at line 35 and also line 84, replace the version string "latest"
for both "@prisma/client" and "prisma" dependencies with a fixed semver range
like "^5.7.0" or the specific version you have tested in CI to ensure consistent
and reproducible installs without unexpected breaking changes.

"@sentry/nextjs": "^6.17.9",
"date-fns": "^2.28.0",
"dayjs": "^1.10.7",
"gravatar-url": "^4.0.1",
"i18next": "^25.3.2",
"lru-cache": "^7.4.0",
"mobx": "^6.4.0",
"mobx-devtools-mst": "^0.9.30",
"mobx-react": "^7.3.0",
"mobx-state-tree": "^5.1.3",
"next": "^12.1.0",
"next-i18next": "^15.4.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^15.6.1",
"react-linkify": "^1.0.0-alpha",
"react-redux": "^7.2.6",
"react-tooltip": "^4.2.21",
Expand Down Expand Up @@ -78,7 +81,7 @@
"prettier-plugin-packagejson": "^2.2.15",
"prettier-plugin-prisma": "^3.9.0",
"prettier-plugin-sh": "^0.8.1",
"prisma": "^3.9.2",
"prisma": "latest",
"suppress-exit-code": "^1.0.0",
"typescript": "^4.5.5"
},
Expand Down
7 changes: 7 additions & 0 deletions public/locales/en/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"welcome": "Welcome",
"dataPeriod": "Data Period",
"forPeriod": "For period:",
"filters": "Filters",
"hide": "Hide"
}
7 changes: 7 additions & 0 deletions public/locales/ru/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"welcome": "Добро пожаловать",
"dataPeriod": "Период данных",
"forPeriod": "За период:",
"filters": "Фильтры",
"hide": "Скрыть"
}
6 changes: 4 additions & 2 deletions src/components/inherited-map/components/filter-panel/filter-panel-normal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { observer } from "mobx-react";
import { useTranslation } from "next-i18next";
import * as React from "react";

import { useStore } from "../../models/root-store";
Expand Down Expand Up @@ -65,6 +66,7 @@ const CategoryTag = observer(({ filter }) => {
export const FilterPanelNormal = observer(() => {
const { filterStore } = useStore();
const { filters } = filterStore;
const { t } = useTranslation("common");

const mainFilters = filters.filter(
(currentFilter) => currentFilter.name !== "category",
Expand All @@ -83,7 +85,7 @@ export const FilterPanelNormal = observer(() => {
</div>
))}
<div className="filter-item">
<p className="subtitle2">Фильтры</p>
<p className="subtitle2">{t("filters")}</p>
<div className="category-filter">
{categoryFilters.map((currentFilter) => (
<CategoryTag key={currentFilter.key} filter={currentFilter} />
Expand All @@ -100,7 +102,7 @@ export const FilterPanelNormal = observer(() => {
<svg className="icon icon-arrow-up">
<use xlinkHref="/static/media/svg/sprite.svg#arrow-up" />
</svg>
<span>Скрыть</span>
<span>{t("hide")}</span>
</button>
</div>
);
Expand Down
3 changes: 2 additions & 1 deletion src/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import "../styles/inherited-scss/style.scss";

import { UserProvider } from "@auth0/nextjs-auth0";
import { AppProps } from "next/app";
import { appWithTranslation } from "next-i18next";
import * as React from "react";
import { ThemeProvider } from "styled-components";

Expand All @@ -24,4 +25,4 @@ const App: React.VoidFunctionComponent<AppProps & { err: Error }> = ({
);
};

export default App;
export default appWithTranslation(App);
11 changes: 11 additions & 0 deletions src/pages/iframes/map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { NextPage } from "next";
import dynamic from "next/dynamic";
import Script from "next/script";
import { useTranslation } from "next-i18next";
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Aug 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove unused t variable (will trip ESLint)
const { t } = useTranslation("common"); is never referenced, so the build will fail with no-unused-vars.
Either delete the import and the destructuring altogether or keep only the hook call:

-import { useTranslation } from "next-i18next";
-...
-  const { t } = useTranslation("common");
+// Translation resources are still loaded through getServerSideProps;
+// the hook call isn't required here.

Also applies to: 18-18

🤖 Prompt for AI Agents 
In src/pages/iframes/map.tsx at lines 4 and 18, the variable `t` destructured
from `useTranslation("common")` is not used, causing ESLint no-unused-vars
errors. Remove the destructuring of `t` from the hook call or remove the entire
import if not needed. If the hook call is required for side effects, keep only
the hook call without destructuring `t`.

import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import * as React from "react";

import { usePostLocationSearchChangesToIframeParent } from "../../shared/django-helpers";
Expand All @@ -13,6 +15,7 @@ const InheritedMap = dynamic(

const MapIframePage: NextPage = () => {
usePostLocationSearchChangesToIframeParent();
const { t } = useTranslation("common");

return (
<>
Expand All @@ -29,4 +32,12 @@ const MapIframePage: NextPage = () => {
);
};

export async function getServerSideProps({ locale }: { locale: string }) {
return {
props: {
...(await serverSideTranslations(locale ?? "ru", ["common"])),
},
};
}

export default MapIframePage;
Loading
Loading