feat: add i18n

@types/i18next.ts

@@ -0,0 +1,23 @@
+import "i18next";
+import common from "../public/locales/en/common.json";
+import home from "../public/locales/en/home.json";
+import discover from "../public/locales/en/discover.json";
+import settings from "../public/locales/en/settings.json";
+import search from "../public/locales/en/search.json";
+import movie from "../public/locales/en/movie.json";
+
+export const i18Resources = {
+  common,
+  home,
+  discover,
+  settings,
+  search,
+  movie,
+} as const;
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    defaultNS: "common";
+    resources: typeof i18Resources;
+  }
+}

README.md

@@ -12,6 +12,7 @@
 - e2e tests (Playwright)
 - deployment to Vercel
 - sensitive information security (environment variables)
+- i18n
 
 ### Lighthouse reports
 - Home page mobile

__mocks__/next/router.js

@@ -0,0 +1 @@
+export * from "next-router-mock";

e2e/app.e2e.ts

@@ -1,17 +1,17 @@
-import { test, expect, Page } from "@playwright/test";
-import {
-  MOVIE_PAGE_TITLE_TEST_ID,
-  TITLE_MOVIE_CARD_TITLE_ATTRIBUTE_VALUE,
-} from "../src/constants/e2e";
+import { expect, Page, test } from "@playwright/test";
+import { MOVIE_PAGE_TITLE_TEST_ID } from "../src/constants/e2e";
+import { i18Resources } from "../@types/i18next";
 
 const clickOnFirstMovieCardAndCheckMoviePageTitle = async (page: Page) => {
+  const elementTitle = i18Resources.common.components.TitleMovieCard.title;
+
   const movieCard = await page
     .getByRole("link")
-    .filter({ has: page.getByTitle(TITLE_MOVIE_CARD_TITLE_ATTRIBUTE_VALUE) })
+    .filter({ has: page.getByTitle(elementTitle) })
     .first();
 
   const movieCardTitle = await movieCard
-    .getByTitle(TITLE_MOVIE_CARD_TITLE_ATTRIBUTE_VALUE)
+    .getByTitle(elementTitle)
     .first()
     .textContent();
 
@@ -40,7 +40,9 @@ test(
     await page.goto("/");
 
     const navigation = await page.getByRole("navigation");
-    const searchLink = await navigation.getByText("Search");
+    const searchLink = await navigation.getByText(
+      i18Resources.common.tabs.search
+    );
 
     await searchLink.click();
 

next-i18next.config.js

@@ -0,0 +1,17 @@
+/**
+ * @type {import('next-i18next').UserConfig}
+ */
+module.exports = {
+  debug: process.env.NODE_ENV === "development",
+  i18n: {
+    defaultLocale: "en",
+    locales: ["bg", "da", "de", "en", "es", "fr", "it", "nl", "pl", "pt", "ru"],
+  },
+  /** To avoid issues when deploying to some paas (vercel...) */
+  localePath:
+    typeof window === "undefined"
+      ? require("path").resolve("./public/locales")
+      : "/locales",
+
+  reloadOnPrerender: process.env.NODE_ENV === "development",
+};

next.config.js

@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
+
+const { i18n } = require("./next-i18next.config.js");
+
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
@@ -14,6 +17,7 @@ const nextConfig = {
 
     return config;
   },
+  i18n,
 };
 
 module.exports = nextConfig;

package.json

@@ -25,10 +25,13 @@
     "date-fns": "^2.29.3",
     "eslint": "8.28.0",
     "eslint-config-next": "13.0.5",
+    "i18next": "^22.0.0",
     "lodash": "^4.17.21",
     "next": "13.0.5",
+    "next-i18next": "^14.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-i18next": "^13.1.2",
     "react-intersection-observer": "^9.4.1",
     "sanitize.css": "^13.0.0",
     "typescript": "4.9.3",
@@ -47,6 +50,7 @@
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "msw": "^0.49.2",
+    "next-router-mock": "^0.9.9",
     "prettier": "^2.8.0",
     "sass": "^1.56.1"
   }

public/locales/bg/common.json

@@ -0,0 +1,28 @@
+{
+  "tabs": {
+    "main": "Главна",
+    "search": "Търсене",
+    "favorites": "Любими",
+    "settings": "Настройки"
+  },
+  "components": {
+    "BackButton": {
+      "backButtonAriaLabel": "назад"
+    },
+    "FavoriteButton": {
+      "addToFavoritesAriaLabel": "добави към любими",
+      "removeFromFavoritesAriaLabel": "премахни от любими"
+    },
+    "TitleMovieCard": {
+      "title": "заглавие на филм"
+    }
+  },
+  "utils": {
+    "dates": {
+      "formatDurationToString": {
+        "hours": "ч",
+        "minutes": "м"
+      }
+    }
+  }
+}

public/locales/bg/discover.json

@@ -0,0 +1,3 @@
+{
+  "header": "Преглед"
+}

public/locales/bg/home.json

@@ -0,0 +1,11 @@
+{
+  "popular": {
+    "header": "Популярни"
+  },
+  "topRated": {
+    "header": "Най-добър рейтинг"
+  },
+  "genres": {
+    "header": "Жанрове"
+  }
+}

public/locales/bg/movie.json

@@ -0,0 +1,14 @@
+{
+  "posters": {
+    "header": "Плакати"
+  },
+  "backdrops": {
+    "header": "Изображения"
+  },
+  "recommendations": {
+    "header": "Препоръки"
+  },
+  "similar": {
+    "header": "Подобни"
+  }
+}

public/locales/bg/search.json

@@ -0,0 +1,6 @@
+{
+  "header": {
+    "inputPlaceholder": "Търсене",
+    "clearButton": "изчисти"
+  }
+}

public/locales/bg/settings.json

@@ -0,0 +1,6 @@
+{
+  "language": {
+    "header": "Език"
+  },
+  "saveButtonText": "съхрани"
+}

public/locales/da/common.json

@@ -0,0 +1,28 @@
+{
+  "tabs": {
+    "main": "Hoved",
+    "search": "Søg",
+    "favorites": "Foretrukne",
+    "settings": "Indstillinger"
+  },
+  "components": {
+    "BackButton": {
+      "backButtonAriaLabel": "tilbage"
+    },
+    "FavoriteButton": {
+      "addToFavoritesAriaLabel": "Tilføj til favoritter",
+      "removeFromFavoritesAriaLabel": "fjerne fra favoritter"
+    },
+    "TitleMovieCard": {
+      "title": "film titel"
+    }
+  },
+  "utils": {
+    "dates": {
+      "formatDurationToString": {
+        "hours": "t",
+        "minutes": "m"
+      }
+    }
+  }
+}

public/locales/da/discover.json

@@ -0,0 +1,3 @@
+{
+  "header": "Opdag"
+}

public/locales/da/home.json

@@ -0,0 +1,11 @@
+{
+  "popular": {
+    "header": "Populært"
+  },
+  "topRated": {
+    "header": "Bedst bedømt"
+  },
+  "genres": {
+    "header": "Genrer"
+  }
+}

public/locales/da/movie.json

@@ -0,0 +1,14 @@
+{
+  "posters": {
+    "header": "Plakater"
+  },
+  "backdrops": {
+    "header": "Baggrunde"
+  },
+  "recommendations": {
+    "header": "Anbefalinger"
+  },
+  "similar": {
+    "header": "Lignende"
+  }
+}

public/locales/da/search.json

@@ -0,0 +1,6 @@
+{
+  "header": {
+    "inputPlaceholder": "Søg",
+    "clearButton": "slet"
+  }
+}

public/locales/da/settings.json

@@ -0,0 +1,6 @@
+{
+  "language": {
+    "header": "Sprog"
+  },
+  "saveButtonText": "gem"
+}

public/locales/de/common.json

@@ -0,0 +1,28 @@
+{
+  "tabs": {
+    "main": "Startseite",
+    "search": "Suchen",
+    "favorites": "Favoriten",
+    "settings": "Einstellungen"
+  },
+  "components": {
+    "BackButton": {
+      "backButtonAriaLabel": "geh zurück"
+    },
+    "FavoriteButton": {
+      "addToFavoritesAriaLabel": "Zu den Favoriten hinzufügen",
+      "removeFromFavoritesAriaLabel": "Von Favoriten entfernen"
+    },
+    "TitleMovieCard": {
+      "title": "filmtitel"
+    }
+  },
+  "utils": {
+    "dates": {
+      "formatDurationToString": {
+        "hours": "s",
+        "minutes": "m"
+      }
+    }
+  }
+}

public/locales/de/discover.json

@@ -0,0 +1,3 @@
+{
+  "header": "Entdecken"
+}

public/locales/de/home.json

@@ -0,0 +1,11 @@
+{
+  "popular": {
+    "header": "Beliebt"
+  },
+  "topRated": {
+    "header": "Bestbewertet"
+  },
+  "genres": {
+    "header": "Genres"
+  }
+}

public/locales/de/movie.json

@@ -0,0 +1,14 @@
+{
+  "posters": {
+    "header": "Poster"
+  },
+  "backdrops": {
+    "header": "Hintergründe"
+  },
+  "recommendations": {
+    "header": "Empfehlungen"
+  },
+  "similar": {
+    "header": "Ähnlich"
+  }
+}

public/locales/de/search.json

@@ -0,0 +1,6 @@
+{
+  "header": {
+    "inputPlaceholder": "Suche",
+    "clearButton": "zu löschen"
+  }
+}

public/locales/de/settings.json

@@ -0,0 +1,6 @@
+{
+  "language": {
+    "header": "Sprache"
+  },
+  "saveButtonText": "speichern"
+}

public/locales/en/common.json

@@ -0,0 +1,28 @@
+{
+  "tabs": {
+    "main": "Main",
+    "search": "Search",
+    "favorites": "Favorites",
+    "settings": "Settings"
+  },
+  "components": {
+    "BackButton": {
+      "backButtonAriaLabel": "go back"
+    },
+    "FavoriteButton": {
+      "addToFavoritesAriaLabel": "add to favorites",
+      "removeFromFavoritesAriaLabel": "remove from favorites"
+    },
+    "TitleMovieCard": {
+      "title": "movie title"
+    }
+  },
+  "utils": {
+    "dates": {
+      "formatDurationToString": {
+        "hours": "h",
+        "minutes": "m"
+      }
+    }
+  }
+}

public/locales/en/discover.json

@@ -0,0 +1,3 @@
+{
+  "header": "Discover"
+}

public/locales/en/home.json

@@ -0,0 +1,11 @@
+{
+  "popular": {
+    "header": "Popular"
+  },
+  "topRated": {
+    "header": "Top rated"
+  },
+  "genres": {
+    "header": "Genres"
+  }
+}