feat: add i18n support with next-intl for Spanish translation#1670
feat: add i18n support with next-intl for Spanish translation#1670Davydl wants to merge 4 commits intorecoupable:mainfrom
Conversation
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThe Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ❌ 1❌ Failed checks (1 warning)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Someone is attempting to deploy a commit to the Recoupable Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1c2ad0252a
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| import { getRequestConfig } from "next-intl/server"; | ||
|
|
||
| export default getRequestConfig(async ({ locale }) => ({ | ||
| messages: (await import(`./messages/${locale}.json`)).default, |
There was a problem hiding this comment.
Load translation files from correct directory
getRequestConfig imports messages from ./messages/${locale}.json, which resolves relative to i18n/request.ts (i.e. i18n/messages/...), but this commit adds locale files under /messages at repo root. As a result, resolving translations will fail with module-not-found when this config runs (e.g., opening the offline page with translations), so i18n is broken until the path is corrected (or files are moved).
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
components/OfflinePage.tsx (1)
22-26: Prefer semantic text blocks over<br />in localized content.Using
<br />to split two translatable messages constrains layout per locale. Render them as separate paragraphs for better semantics and translation flexibility.♻️ Suggested refactor
- <p className="text-muted-foreground max-w-md mx-auto text-base md:text-lg"> - {t("description")} - <br /> - {t("resolution")} - </p> + <div className="text-muted-foreground max-w-md mx-auto text-base md:text-lg"> + <p>{t("description")}</p> + <p className="mt-2">{t("resolution")}</p> + </div>As per coding guidelines, "Use semantic HTML elements appropriate to the component's role" and "Start with semantic HTML first, then augment with ARIA if needed".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/OfflinePage.tsx` around lines 22 - 26, In OfflinePage.tsx replace the single paragraph that uses a <br /> between two translated strings with two semantic text blocks (e.g., two <p> elements or separate elements inside the existing container) so each translation key t("description") and t("resolution") is rendered independently; update the JSX around the element with className "text-muted-foreground max-w-md mx-auto text-base md:text-lg" to contain two semantic blocks to allow translators/layouts full control and preserve existing styling by applying the same className or container styles as needed.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@components/OfflinePage.tsx`:
- Around line 22-26: In OfflinePage.tsx replace the single paragraph that uses a
<br /> between two translated strings with two semantic text blocks (e.g., two
<p> elements or separate elements inside the existing container) so each
translation key t("description") and t("resolution") is rendered independently;
update the JSX around the element with className "text-muted-foreground max-w-md
mx-auto text-base md:text-lg" to contain two semantic blocks to allow
translators/layouts full control and preserve existing styling by applying the
same className or container styles as needed.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 6d75baf3-bb8a-4362-adbb-da1b0af56c6f
⛔ Files ignored due to path filters (6)
i18n/request.tsis excluded by none and included by nonemessages/en.jsonis excluded by none and included by nonemessages/es.jsonis excluded by none and included by nonenext.config.mjsis excluded by none and included by nonepackage.jsonis excluded by none and included by nonepnpm-lock.yamlis excluded by!**/pnpm-lock.yamland included by none
📒 Files selected for processing (1)
components/OfflinePage.tsx
There was a problem hiding this comment.
2 issues found across 7 files
Confidence score: 2/5
- High-confidence, high-severity issues in
i18n/request.tsindicate a likely runtime break in locale message loading, so merge risk is elevated. - The import path
./messages/${locale}.jsonappears incorrect for the current project layout, which can cause module resolution failures when loading translations. - The next-intl v4 callback uses
requestLocale(Promise), so destructuringlocalelikely yieldsundefinedand makes the dynamic import fail for all locales. - Pay close attention to
i18n/request.ts- fix callback parameter handling and message import path to restore i18n loading behavior.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="i18n/request.ts">
<violation number="1" location="i18n/request.ts:3">
P1: In next-intl v4, the callback parameter is `requestLocale` (a `Promise`), not `locale`. Destructuring `locale` here gives `undefined`, so the dynamic import will always fail.</violation>
<violation number="2" location="i18n/request.ts:4">
P1: Custom agent: **Flag AI Slop and Fabricated Changes**
Incorrect relative import path — `./messages/${locale}.json` resolves to `i18n/messages/${locale}.json`, but the message files are at the project root (`messages/en.json`, `messages/es.json`). This will fail at runtime. Use `../messages/${locale}.json` instead.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review, or fix all with cubic.
There was a problem hiding this comment.
1 issue found across 1 file (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="i18n/request.ts">
<violation number="1" location="i18n/request.ts:5">
P1: Validate `locale` against the supported set before using it in the dynamic import. If an unsupported locale slips through (e.g. `"fr"`), the `import()` will throw an unhandled `MODULE_NOT_FOUND` error at runtime.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review, or fix all with cubic.
What
Adds internationalization (i18n) support using next-intl library.
Changes
Why
The app is currently English-only. This PR sets up the foundation
for Spanish translation, starting with OfflinePage as a proof of concept.
Summary by cubic
Adds i18n with
next-intland ships a Spanish locale, defaulting to English. OfflinePage now shows translated text based on the active locale.New Features
i18n/request.tsto load messages per request.messages/en.jsonandmessages/es.json.OfflinePage.tsxto useuseTranslations("OfflinePage").next-intlplugin innext.config.mjs(wrapped withnext-pwa).Bug Fixes
i18n/request.ts.next-intlv4 API usingparams.requestLocalewith anenfallback.Written for commit b443d35. Summary will update on new commits.
Summary by CodeRabbit