Initial settings of next-i18next (#27)

next-i18next.config.js

@@ -0,0 +1,12 @@
+/** @type {import('next-i18next').UserConfig} */
+module.exports = {
+  i18n: {
+    defaultLocale: "cs",
+    locales: ["cs", "en"],
+    localeDetection: false,
+  },
+  localePath:
+    typeof window === 'undefined'
+      ? require('path').resolve('./public/locales')
+      : '/locales'
+}

next.config.js

@@ -1,5 +1,9 @@
 /** @type {import('next').NextConfig} */
+
+const { i18n } = require("./next-i18next.config");
+
 const nextConfig = {
+  i18n,
   rewrites() {
     return [
       {

package.json

@@ -17,18 +17,22 @@
     "axios": "^1.4.0",
     "framer-motion": "^10.15.0",
     "heroicons": "^2.0.18",
+    "i18next": "^23.6.0",
     "json-stable-stringify": "^1.0.2",
     "jsonwebtoken": "^9.0.0",
     "jwt-decode": "^3.1.2",
-    "next": "13.4.10",
+    "next": "^14.0.2",
     "next-auth": "^4.22.1",
-    "react": "18.2.0",
+    "next-i18next": "^14.0.3",
+    "react": "^18.2.0",
     "react-datepicker": "^4.16.0",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.1",
     "react-hot-toast": "^2.4.1",
+    "react-i18next": "^13.3.1",
     "tailwind-datepicker-react": "^1.4.2",
-    "typescript": "5.1.3"
+    "typescript": "5.1.3",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.4",

public/locales/cs/dating-site.json

@@ -0,0 +1,6 @@
+{
+  "content": {
+    "title": "Seznamka",
+    "found-message": "Našli jsme pro tebe"
+  }
+}

public/locales/cs/sign-in.json

@@ -0,0 +1,5 @@
+{
+  "content": {
+    "title": "Přihlásit se!"
+  }
+}

public/locales/en/sign-in.json

@@ -0,0 +1,5 @@
+{
+  "content": {
+    "title": "Sign In"
+  }
+}

src/app/auth/sign-in/components/LoginForm.tsx

@@ -16,6 +16,7 @@ import TextLink from "library/atoms/TextLink";
 import Divider from "library/atoms/Divider";
 import { FacebookSvg, GoogleSvg } from "library/icons/social-media";
 import Checkbox from "library/atoms/Checkbox";
+import { useTranslation } from "next-i18next";
 
 const formSchema = z.object({
   username: z.string().nonempty("E-mail je povinný").email(),
@@ -46,6 +47,7 @@ const getMessageFromErrorCode = (errorCode: UserAuthError | null): string => {
 
 //TODO: Dodělat kompletně celý formulář!!!
 const LoginForm = ({ providers, token }: Props) => {
+  const { t } = useTranslation("sign-in");
   const searchParams = useSearchParams();
   const errorCode = searchParams.get("errorCode") as UserAuthError | null;
 
@@ -75,7 +77,7 @@ const LoginForm = ({ providers, token }: Props) => {
   const errors = form.formState.errors;
 
   return (
-    <Content title="Přihlásit se">
+    <Content title={ t("content.title") }>
       <form onSubmit={form.handleSubmit(handleSubmit)}>
         <div className="flex flex-col justify-center mt-4">
           <Input

src/app/dating-site/components/DatingSiteContainer.tsx

@@ -4,6 +4,7 @@ import { calculateAge, safeUrl } from "helpers/profileFieldHelpers";
 import Content from "library/atoms/Content";
 import UserCard from "library/molecules/cards/UserCard";
 import { createContext, useContext, useState } from "react";
+import { useTranslation } from "next-i18next";
 
 type DatingSiteState = {
   gender: string | null;
@@ -16,6 +17,8 @@ type Props = { state: DatingSiteState; setState: (state: DatingSiteState) => voi
 const DatingSiteContext = createContext<Props>({} as Props);
 
 const DatingSiteContainer = (props: { members: IMemberResponse[] }) => {
+  const { t } = useTranslation("dating-site");
+
   const [state, setState] = useState<DatingSiteState>({
     gender: null,
     useMyPreferences: true,
@@ -24,9 +27,9 @@ const DatingSiteContainer = (props: { members: IMemberResponse[] }) => {
 
   return (
     <DatingSiteContext.Provider value={{ state, setState }}>
-      <Content title="Seznamka">
+      <Content title={ t("content.title") }>
         <DatingSiteFilter></DatingSiteFilter>
-        <h4>Našli jsme pro tebe</h4>
+        <h4>{ t("content.found-message")}</h4>
         <DatingSiteResult></DatingSiteResult>
       </Content>
     </DatingSiteContext.Provider>

src/app/dating-site/page.tsx

@@ -19,4 +19,4 @@ const DatingSitePage = async () => {
     return (<DatingSiteContainer members={members ?? []}></DatingSiteContainer>);
 }
 
-export default DatingSitePage;
+export default DatingSitePage;

src/app/layout.tsx

@@ -1,14 +1,13 @@
 import "./globals.css";
 import { Suspense } from "react";
 import Header from "components/layout/Header";
-import "./globals.css";
 import React from "react";
 import { Toaster } from "react-hot-toast";
 import MobileMenu from "components/layout/MobileMenu";
 import { NextAuthProvider } from "helpers/AuthProvider";
 
 export const metadata = {
-  title: "Create Next App",
+  title: "Mingly",
   description: "Generated by create next app",
 };