(SP: 1) feat(i18n): translate 404 error page

[TiZorii]

• Add 404 translations (uk/en/pl)
• Implement [Global/Local/Combined] strategy
• Add helpful navigation links

Summary by CodeRabbit

Release Notes

• New Features
  • Enhanced 404 error pages with improved design and user-friendly messaging across the application
  • Added multi-language support for not-found pages in English, Polish, and Ukrainian
  • Implemented "Back to Home" navigation button to help users return to the main page when encountering missing content

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	26da9e6
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/6977bb20578d6c0008e00bc9
😎 Deploy Preview	https://deploy-preview-217--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

This change introduces a comprehensive 404 error handling system for a Next.js application with internationalization support. It adds three new not-found page components at different route levels and provides translation strings in English, Polish, and Ukrainian for displaying localized 404 error messages.

Changes

Cohort / File(s)	Summary
404 Page Components frontend/app/[locale]/[...rest]/page.tsx, frontend/app/[locale]/not-found.tsx, frontend/app/not-found.tsx	Introduces three new React components for 404 error handling with client-side rendering and styled UI. The catch-all route handles undefined locale-prefixed paths, the locale-specific not-found replaces static metadata with dynamic translations, and the root-level not-found handles base path errors. All components render decorative backgrounds, gradient text, and localized copy.
Translation Files frontend/messages/en.json, frontend/messages/pl.json, frontend/messages/uk.json	Adds notFound translation blocks across three language files, each containing metaTitle, metaDescription, title, description, and backHome fields for the 404 page UI.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• AM1007
• ViktorSvertoka

Poem

🐰 Four-oh-four, we've made it grand,
With paths and routes across the land,
In Polish, Ukrainian, English too,
Lost users now see what to do! 🎨
Back to home, the bunny's way! 🏠

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: translating 404 error pages with i18n support across multiple languages (Ukrainian, English, Polish). All file changes center on this objective.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/app/`[locale]/[...rest]/page.tsx:
- Around line 1-42: This catch‑all component (CatchAllPage) renders a 404 UI but
still returns 200; fix by ensuring a real 404 response: either remove this
catch‑all page so the route falls back to the segment-level not-found.tsx, or
convert this file to a server component and call notFound() from next/navigation
(import notFound from 'next/navigation') when the locale/route is invalid before
rendering the UI; reference CatchAllPage and notFound to locate the code to
change.

🧹 Nitpick comments (1)

frontend/app/[locale]/not-found.tsx (1)

9-38: Consider extracting shared 404 content to avoid duplication.

This markup mirrors the catch‑all 404 page. A shared component would reduce repetition and keep future tweaks consistent across both routes.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Ensure unknown locale routes return a real 404 status.

This catch‑all page renders a 404 UI but will still return 200 OK, which hurts SEO and caching. Prefer calling notFound() (or remove the catch‑all and rely on the segment’s not-found.tsx) so the response status is actually 404.

✅ Proposed fix (delegate to not-found.tsx with proper status)

-'use client';
- 
-import { useTranslations } from 'next-intl';
-import { Link } from '@/i18n/routing';
+import { notFound } from 'next/navigation';

 export default function CatchAllPage() {
-  const t = useTranslations('notFound');
-
-  return (
-    <main className="relative min-h-[calc(100vh-200px)] flex items-center justify-center overflow-hidden">
-      <div
-        className="absolute inset-0 pointer-events-none -z-10"
-        aria-hidden="true"
-      >
-        <div className="absolute inset-0 bg-gradient-to-b from-sky-50 via-white to-rose-50 dark:from-slate-950 dark:via-slate-950 dark:to-black" />
-        <div className="absolute top-1/4 left-1/4 h-96 w-[36rem] -translate-x-1/2 rounded-full bg-sky-300/20 blur-3xl dark:bg-sky-500/10" />
-        <div className="absolute bottom-1/4 right-1/4 h-[26rem] w-[26rem] rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" />
-      </div>
-
-      <div className="relative z-10 text-center px-6 py-12">
-        <p className="text-8xl md:text-9xl font-black bg-gradient-to-r from-sky-400 via-violet-400 to-pink-400 dark:from-sky-400 dark:via-indigo-400 dark:to-fuchsia-500 bg-clip-text text-transparent">
-          404
-        </p>
-
-        <h1 className="mt-6 text-2xl md:text-3xl font-bold text-slate-900 dark:text-white">
-          {t('title')}
-        </h1>
-
-        <p className="mt-4 max-w-md mx-auto text-slate-600 dark:text-slate-400">
-          {t('description')}
-        </p>
-
-        <Link
-          href="/"
-          className="mt-8 inline-flex items-center justify-center rounded-full bg-gradient-to-r from-sky-500 to-violet-500 px-6 py-3 text-sm font-medium text-white transition-all hover:from-sky-600 hover:to-violet-600 hover:shadow-lg hover:shadow-sky-500/25"
-        >
-          {t('backHome')}
-        </Link>
-      </div>
-    </main>
-  );
+  notFound();
 }

📝 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

	'use client';
	import { useTranslations } from 'next-intl';
	import { Link } from '@/i18n/routing';
	export default function CatchAllPage() {
	const t = useTranslations('notFound');
	return (
	<main className="relative min-h-[calc(100vh-200px)] flex items-center justify-center overflow-hidden">
	<div
	className="absolute inset-0 pointer-events-none -z-10"
	aria-hidden="true"
	>
	<div className="absolute inset-0 bg-gradient-to-b from-sky-50 via-white to-rose-50 dark:from-slate-950 dark:via-slate-950 dark:to-black" />
	<div className="absolute top-1/4 left-1/4 h-96 w-[36rem] -translate-x-1/2 rounded-full bg-sky-300/20 blur-3xl dark:bg-sky-500/10" />
	<div className="absolute bottom-1/4 right-1/4 h-[26rem] w-[26rem] rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" />
	</div>
	<div className="relative z-10 text-center px-6 py-12">
	<p className="text-8xl md:text-9xl font-black bg-gradient-to-r from-sky-400 via-violet-400 to-pink-400 dark:from-sky-400 dark:via-indigo-400 dark:to-fuchsia-500 bg-clip-text text-transparent">
	404
	</p>
	<h1 className="mt-6 text-2xl md:text-3xl font-bold text-slate-900 dark:text-white">
	{t('title')}
	</h1>
	<p className="mt-4 max-w-md mx-auto text-slate-600 dark:text-slate-400">
	{t('description')}
	</p>
	<Link
	href="/"
	className="mt-8 inline-flex items-center justify-center rounded-full bg-gradient-to-r from-sky-500 to-violet-500 px-6 py-3 text-sm font-medium text-white transition-all hover:from-sky-600 hover:to-violet-600 hover:shadow-lg hover:shadow-sky-500/25"
	>
	{t('backHome')}
	</Link>
	</div>
	</main>
	);
	}
	import { notFound } from 'next/navigation';
	export default function CatchAllPage() {
	notFound();
	}

🤖 Prompt for AI Agents

In `@frontend/app/`[locale]/[...rest]/page.tsx around lines 1 - 42, This catch‑all
component (CatchAllPage) renders a 404 UI but still returns 200; fix by ensuring
a real 404 response: either remove this catch‑all page so the route falls back
to the segment-level not-found.tsx, or convert this file to a server component
and call notFound() from next/navigation (import notFound from
'next/navigation') when the locale/route is invalid before rendering the UI;
reference CatchAllPage and notFound to locate the code to change.