إستعمال next-intel مع Nextjs 14 وTypescript

محمود سعداوي2 · 13 أكتوبر

السلام عليكم.

أواجه الكثير من الأخطاء بسبب سوء إستعمال next-intel حيث تظهر الصفحة الرئيسية في البداية ثم تختفي.

الكود

src/app/layout.tsx

import type { Metadata } from "next";
import "./globals.css";
import { Tajawal  } from 'next/font/google';
import Fixed from "@/components/fixed";
import { ThemeProvider } from "@/context/ThemeContext";
import { ReactNode } from "react";


export const metadata: Metadata = {
  title: "Taskaty",
  description: "Notes App Project Using Nextjs | Typescript | PostgreSql",
  keywords: "notes, to do, todos, note, task, tasks",
  authors: [
    {
      name: "Saadaoui Mahmoud",
    },
  ],
  icons: {
    icon: "/icon.png",
  },
};

type Props = {
  children: ReactNode;
};


export default function RootLayout({ children }: Props) {
  return children;
}

src/app/page.tsx

import { redirect } from "next/navigation";

export default function RootPage() {
  redirect("/en");
}

src/[locale]/layout.tsx

"use client";
import { NextIntlClientProvider } from "next-intl";
import { ReactNode } from "react";
import { notFound } from "next/navigation";
import Fixed from "@/components/fixed";
import { ThemeProvider } from "@/context/ThemeContext";
import { Tajawal } from "next/font/google";

const ubuntu = Tajawal({
  subsets: ["arabic"],
  weight: ["300", "400", "500", "700"],
});

export default async function RootLayout({
  children,
  params: { locale },
}: {
  children: ReactNode;
  params: { locale: string };
}) {
  let messages;
  try {
    messages = (await import(`../../../messages/${locale}.json`)).default;
  } catch (error) {
    notFound();
  }

  return (
    <html lang={locale} dir={locale === "ar" ? "rtl" : "ltr"}>
      <body className={ubuntu.className}>
        <NextIntlClientProvider locale={locale} messages={messages}>
          <ThemeProvider>
            <>
              <Fixed />
              {children}
            </>
          </ThemeProvider>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

src/[locale]/page.tsx

"use client"

import { useTranslations } from "next-intl";
import Auth from "@/components/auth/Auth";
import Image from "next/image";
import logo from "../../../public/logo.png";

const AuthForm = () => {
    const t = useTranslations('Home')
  return (
    <div className="min-h-screen bg-coolGray dark:bg-slateGray p-1 transition-all duration-300">
      {/* Logo Section */}
      <div className="flex justify-start items-start">
        <Image src={logo} alt="Taskaty" width={120} height={100} />
      </div>

      {/* Main Content */}
      <div className="text-center mb-5">
        <p className="text-lg text-dustyGray dark:text-white max-w-lg mx-auto leading-relaxed">
          <span className="text-2xl font-bold text-leafGreen dark:text-goldenYellow">
            Taskaty
          </span>{" "}
          {t('intro')}
          <span className="font-semibold text-royalPurple dark:text-coralRed">
            {t('start')}
          </span>
        </p>
      </div>

      {/* Bottom Section: AuthForm */}
      <div className="flex justify-center">
        <Auth />
      </div>
    </div>
  );
};

export default AuthForm;

src/components/fixed

"use client";
import { ThemeContext } from "@/context/ThemeContext";
import React, { useContext, useState } from "react";
import { CiSettings } from "react-icons/ci";
import { FiMoon, FiSun } from "react-icons/fi";

const Fixed = () => {
  const { darkMode, toggleMode } = useContext(ThemeContext);

  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [language, setLanguage] = useState("English");

  const toggleDropdown = () => {
    setDropdownOpen(!dropdownOpen);
  };

  const changeLanguage = (lang: any) => {
    setLanguage(lang);
    setDropdownOpen(false);
  };

  return (
    <div className="fixed bottom-4 right-4 z-50">
      <div className="relative">
        {/* Settings Button */}
        <div
          onClick={toggleDropdown}
          className="flex items-center justify-center p-3 bg-coolGray dark:bg-gray-800 
                 text-rubyRed dark:text-white rounded-full shadow-lg cursor-pointer 
                 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"
        >
          <CiSettings className="text-2xl" />
        </div>

        {/* Dropdown */}
        {dropdownOpen && (
          <div
            onMouseEnter={() => setDropdownOpen(true)}
            onMouseLeave={() => setDropdownOpen(false)}
            className="absolute bottom-full right-0 mb-4 w-48 bg-white dark:bg-gray-700 
                   border border-coolGray dark:border-gray-600 rounded-lg shadow-lg 
                   py-2 transition-all duration-300"
          >
            {/* Language Selection */}
            <div className="px-4 py-2 text-dustyGray dark:text-white">
              <label className="font-bold" htmlFor="language-select">
                Select Language:
              </label>
              <select
                id="language-select"
                value={language}
                onChange={(e) => changeLanguage(e.target.value)}
                className="mt-1 block w-full border border-coolGray dark:border-gray-600 
                       bg-white dark:bg-slateGray text-slateGray dark:text-white 
                       rounded-lg focus:outline-none focus:ring focus:ring-leafGreen"
              >
                <option value="Français">Français</option>
                <option value="Arabe">العربية</option>
                <option value="English">English</option>
              </select>
            </div>

            {/* Dark/Light Mode Toggle */}
            <div
              onClick={toggleMode}
              className="flex items-center justify-between px-4 py-2 text-dustyGray 
                     dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 
                     cursor-pointer transition-all duration-300"
            >
              <span>{darkMode ? "Light Mode" : "Dark Mode"}</span>
              {darkMode ? (
                <FiSun className="ml-2" />
              ) : (
                <FiMoon className="ml-2" />
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Fixed;

شكرا لكم.

إستعمال next-intel مع Nextjs 14 وTypescript

السؤال

محمود سعداوي2

0 أجوبة على هذا السؤال

Recommended Posts

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية