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

السلام عليكم. أود أفكار مشاريع تكون قريبة من الواقع لتعزيز مهاراتي في الذكاء الاصطناعي التلقائي علما واني ساستخدم next.js شكرا لكم

السلام عليكم. أريد بناء تطبيق محلي يوفر واجهة حقول تتيح البحث أو الإضافة أو التعديل .... (مثل التي يوفرها access أو excel VBA) سيستعمل هذا التطبيق هذا التطبيق مجموعة من الأفراد الذين ليست لهم أي صلة بالبرمجة. بماأني مطور ويب جافاسكريبت فأهدف لتوظيف مهاراتي في SQL لبناء هذا التطبيق. أبحث عن أفضل الحلول الممكنة لبناء هذا التطبيق. شكرا.

السلام عليكم، من المعلوم أن مكتبة TanStack Query توفر مرونة كبيرة في التعامل مع البيانات القادمة من الخادم. مع ذلك، لا يُفضل استخدامها مع مكتبات أخرى لإدارة حالة التطبيق مثل Zustand و Redux Toolkit، حيث قد يؤدي ذلك إلى تعقيد غير ضروري. واجهت مشكلة عند تسجيل الدخول إلى التطبيق ثم الانتقال إلى صفحة أخرى، إذ كان من الضروري تخزين البيانات القادمة من الخادم في الذاكرة المحلية للمتصفح لاستخدامها في الحماية والتحقق. لحل هذه المشكلة، استخدمت createContext. المشكلة الأخرى أنني لم أجد من استخدم هذا الحل مسبقًا، لذا أود الاستفسار عن مدى فاعليته، وهل هناك حل أفضل؟ شكرًا لكم.

شكرا أخ محمد لكن أعتقد أه من غير العملي إستعمال tanstack query مع useEffect. وجدت حلا أسهل وتخزين البيانات بوسطة React.Context

لم يتغير شيء كما أني قمت بأضافة البيانات إلى الذاكرة المحلية للمتصفح بالطريقة التالية export const useLoginMutation = () => { return useMutation({ mutationFn: async (data) => await loginApi(data), onSuccess: (data) => { localStorage.setItem("user", JSON.stringify(data)) console.log("User stored in localStorage:", data); }, }); };

السلام عليكم لدي مشكلة في التنقل عند إنشاء المسارات المحمية. بعد تسجيل الدخول وتخزين بيانات المستخدم في localStorage، لا يتم توجيهي إلى لوحة التحكم (dashboard). إليك الكود الخاص بي، بما في ذلك App.js، وroutes.js، وLoginForm.js. علماً بأنه قبل تطبيق المسارات المحمية، كان كل شيء يعمل بشكل طبيعي. App.js function App() { return ( <Router/> ); } routes.js const user = JSON.parse(localStorage.getItem("user")) const router = createBrowserRouter([ { path: "/", element: !user ? <LoginPage /> : <Navigate to="/dashboard" /> }, { path: "/dashboard", element: user ? <DashboardLayout /> : <Navigate to="/" />, children: [ { index: true, element: <Dashboard /> }, ... ] } ]); export default function Router() { return <RouterProvider router={router} />; } LoginForm.js const LoginForm = () => { const navigate = useNavigate(); const { formData, handleChange } = useForm({ unique_identifier: "", password: "", }, ["unique_identifier"]) const { mutate, isPending, isError, error } = useLoginMutation(); const submitHandler = async (e) => { e.preventDefault(); mutate( formData, { onSuccess: () => navigate("/dashboard") } ); }; return ( <> {isError && <Alert message={error} />} .... My Form .... </> ); }; أعتقد أن المشكل يتعلق بعدم إعادة تحديث الحالة (state) عند تسجيل الدخول، مما يمنع إعادة توجيه المستخدم إلى لوحة التحكم (dashboard). لكن أعتقد أنه ليس من الجيد إضافة تطبيقات لإدارة الحالة مثل zustand. أرجو المساعدة لأجد الحل الأنسب.

المشكل يكمن أساسا في isLoding أعتقد لابد من إستبدالها بـ isPending

السلام عليكم. عند إرسال البيانات للخادم const submitHandler = async (e) => { e.preventDefault(); mutate( { unique_identifier, password }, { onSuccess: () => navigate("/dashboard") } ); }; لاتظهر علامة التحميل spinner في الكود التالي <button type="submit" className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 rounded-lg transition duration-300 ease-in-out" disabled={isLoading} > {isLoading ? ( <ScaleLoader color="#ffffff" height={12} width={3} /> ) : ( "Login" )} </button> loginApi import axios from "axios"; export const loginApi = async(data) => { try { const res = await axios.post( `${process.env.REACT_APP_USER_URL}/login`, data ); return res.data; } catch (error) { throw error.response.data.message } } useLoginMutation import { useMutation } from "@tanstack/react-query"; import { loginApi } from "../api/userApi"; export const useLoginMutation = () => { return useMutation({ mutationFn: async (data) => await loginApi(data), onSuccess: (data) => localStorage.setItem("token", data.token), }); }; شكرا.

السلام عليكم، أرغب في تطوير تطبيق لمتابعة العمال في شركة معينة، مستفيدًا من خبرتي في SQL باستخدام pgAdmin وPostgreSQL. حيث يمكنني عبر استعلامات SQL: عرض جميع العمال. عرض بيانات عامل معين. استخراج العمال ذوي وضعيات إدارية خاصة. تعديل بيانات العمال. لكن المشكلة أن المستخدم النهائي لهذا التطبيق لا يمتلك أي معرفة باستعلامات SQL. كيف يمكنني بناء واجهة تفاعلية تتيح لهذا المستخدم الاستفادة من التطبيق بسهولة؟ هل أحتاج إلى استخدام برامج أخرى لتحقيق ذلك؟ ما أريده يشبه Excel، حيث أقوم بتحديد العمليات (مثل إيجاد أكبر قيمة)، ثم يقوم المستخدم بإدخال البيانات ليحصل على النتائج تلقائيًا. أتمنى أن يكون سؤالي واضحًا، وشكرًا لكم. ملاحظة: ليست لدي خبرة ببناء تطبيقات سطح المكتب

السلام عليكم. المعلوم أن UML Diagrams مبني على البرمجة الكائنية التوجه على عكس node.js. ماهي الطريقة المثلى لإستخدام UML Diagrams في مشروع nodejs شكرا

السلام عليكم. أود الإستفادة من ملاحظاتكم وتقييمكم محتوا وتصميما لموقعي الشخصي https://personal-portfolio-git-main-mahmouds-projects-1d23a688.vercel.app/en شكرا لكم

السلام عليكم بالإعتماد على تجاربكم أود آراءكم في أفضل المكتبات التي تساعد العملاء في في إرال إيميلات عند الإطلاع على الموقعالشخصي شكرا

السلام عليكم. أواجه مشكلة في استخدام next-intl مع Next.js 15 حيث يظهر لي خطأ متعلق بـ Hydration وآخر متعلق بالترويسات المسؤولة عن تحديد اللغة المحلية. الخطأ الأول: الخطأ الثاني: الخطأ يحدث عند محاولة استخدام الترويسة headers() بدون انتظار النتيجة بشكل صحيح. الخطأ الثالث: ملاحظات: لتوضيح أكثر، هذه هي تفاصيل الكود الذي أستخدمه: next.config.js: const nextConfig = { timeZone: "Africa/Tunis", }; const withNextIntl = require("next-intl/plugin")("./i18n.js"); module.exports = withNextIntl(nextConfig); i18n.js: import { getRequestConfig } from "next-intl/server"; export default getRequestConfig(async ({ locale }) => ({ // locale مشطبة messages: (await import(`./messages/${locale}.json`)).default, timeZone: "Africa/Tunis", })); middleware.js: import createMiddleware from "next-intl/middleware"; export default createMiddleware({ locales: ["en", "fr", "ar"], defaultLocale: "en", }); export const config = { matcher: ["/((?!api|_next|.*\\..*).*)"], }; app/[locale]/layout.js import { NextIntlClientProvider } from "next-intl"; import { AppProvider } from "@/context/AppContext"; import { Tajawal } from "next/font/google"; import { getLocale, getMessages } from "next-intl/server"; const tajawal = Tajawal({ subsets: ["arabic"], weight: ["300", "400", "500", "700"], }); export default async function RootLayout({ children }) { const locale = await getLocale(); const messages = getMessages() const direction = locale === "ar" ? "rtl" : "ltr"; const fontClassName = tajawal.className; return ( <html lang={locale} dir={direction}> <body className={fontClassName}> <NextIntlClientProvider locale={locale} messages={messages}> <AppProvider>{children}</AppProvider> </NextIntlClientProvider> </body> </html> ); } ملاحظات إضافية: لتجنب مشكلة الـ Hydration قمت بتجربة استخدام useEffect ولكن لم يعمل الكود كما يجب. شكرا

السلام عليكم. أواجه مشكل في إستخدام next-intel مع nextjs15 حيث يظهر لي خطأ hydration وآخر حول الترويسات المسؤولة عن تحديد اللغة المحلية. الخطأ الأول Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used - A server/client branch `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. See more info here: https://nextjs.org/docs/messages/react-hydration-error - lang="en" - dir="ltr" - className="__className_f09b3f" الخطأ الثاني Error: Route "/[locale]" used `headers().get('X-NEXT-INTL-LOCALE')`. `headers()` should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at apply (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.react-server.development.js:888:26) at locale (webpack:///i18n.js?938b:3:41) at apply (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.react-server.development.js:888:26) at apply (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.react-server.development.js:888:26) at apply (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.react-server.development.js:888:26) at getLocale (webpack:///app/[locale]/layout.js?3ae2:12:33) 1 | import { getRequestConfig } from "next-intl/server"; 2 | > 3 | export default getRequestConfig(async ({ locale }) => ({ | ^ 4 | messages: (await import(`./messages/${locale}.json`)).default, 5 | timeZone: "Africa/Tunis", 6 | })); Error: INVALID_KEY: Namespace keys can not contain the character "." as this is used to express nesting. Please remove it or replace it with another character. Invalid keys: (app-pages-browser)/./context/AppContext.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next-intl/dist/esm/shared/NextIntlClientProvider.js (at _response._bundlerConfig), (app-pages-browser)/./app/[locale]/page.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/client-page.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/client-segment.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/lib/metadata/metadata-boundary.js (at _response._bundlerConfig) If you're migrating from a flat structure, you can convert your messages as follows: import {set} from "lodash"; const input = { "one.one": "1.1", "one.two": "1.2", "two.one.one": "2.1.1" }; const output = Object.entries(input).reduce( (acc, [key, value]) => set(acc, key, value), {} ); // Output: // // { // "one": { // "one": "1.1", // "two": "1.2" // }, // "two": { // "one": { // "one": "2.1.1" // } // } // } at nextCreate (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:3911:19) at useMemo (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.development.js:1495:33) { code: 'INVALID_KEY', originalMessage: 'Namespace keys can not contain the character "." as this is used to express nesting. Please remove it or replace it with another character.\n' + '\n' + 'Invalid keys: (app-pages-browser)/./context/AppContext.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next-intl/dist/esm/shared/NextIntlClientProvider.js (at _response._bundlerConfig), (app-pages-browser)/./app/[locale]/page.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/client-page.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/client-segment.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/lib/metadata/metadata-boundary.js (at _response._bundlerConfig)\n' + '\n' + "If you're migrating from a flat structure, you can convert your messages as follows:\n" + '\n' + 'import {set} from "lodash";\n' + '\n' + 'const input = {\n' + ' "one.one": "1.1",\n' + ' "one.two": "1.2",\n' + ' "two.one.one": "2.1.1"\n' + '};\n' + '\n' + 'const output = Object.entries(input).reduce(\n' + ' (acc, [key, value]) => set(acc, key, value),\n' + ' {}\n' + ');\n' + '\n' + '// Output:\n' + '//\n' + '// {\n' + '// "one": {\n' + '// "one": "1.1",\n' + '// "two": "1.2"\n' + '// },\n' + '// },\n' + '// "two": {\n' + '// "one": {\n' + '// "one": "2.1.1"\n' + '// }\n' + '// }\n' + '// }\n' } للتوضيح أكثر هذا الكود كاملا next.config.js const nextConfig = { timeZone: "Africa/Tunis", }; const withNextIntl = require("next-intl/plugin")("./i18n.js"); module.exports = withNextIntl(nextConfig); i18n.js import { getRequestConfig } from "next-intl/server"; export default getRequestConfig(async ({ locale }) => ({ messages: (await import(`./messages/${locale}.json`)).default, timeZone: "Africa/Tunis", })); middleware.js import createMiddleware from "next-intl/middleware"; export default createMiddleware({ locales: ["en", "fr", "ar"], defaultLocale: "en", }); export const config = { matcher: ["/((?!api|_next|.*\\..*).*)"], }; app/[locale]/layout.js import { NextIntlClientProvider } from "next-intl"; import { AppProvider } from "@/context/AppContext"; import { Tajawal } from "next/font/google"; import { getLocale, getMessages } from "next-intl/server"; const tajawal = Tajawal({ subsets: ["arabic"], weight: ["300", "400", "500", "700"], }); export default async function RootLayout({ children }) { const locale = await getLocale(); const messages = getMessages() const direction = locale === "ar" ? "rtl" : "ltr"; const fontClassName = tajawal.className; return ( <html lang={locale} dir={direction}> <body className={fontClassName}> <NextIntlClientProvider locale={locale} messages={messages}> <AppProvider>{children}</AppProvider> </NextIntlClientProvider> </body> </html> ); } ملاحظة لتفادي hydration قمت بتجربة الخطاف useEffect إلا أنه لم يتم تفعيل الكود بتاتا. شكرا لكم.

شكرا ولكن ظهر هذا الخطأ node_modules\next-intl\dist\development\shared\NextIntlClientProvider.js (23:11) @ NextIntlClientProvider ⨯ Error: Failed to determine locale in `NextIntlClientProvider`, please provide the `locale` prop explicitly. See https://next-intl-docs.vercel.app/docs/configuration#locale at AsyncResource.runInAsyncScope (node:async_hooks:206:9) digest: "1085825041" 21 | 22 | if (!locale) { > 23 | throw new Error('Failed to determine locale in `NextIntlClientProvider`, please provide the `locale` prop explicitly.\n\nSee https://next-intl-docs.vercel.app/docs/configuration#locale' ); | ^ 24 | } 25 | return /*#__PURE__*/React__default.default.createElement(_IntlProvider.IntlProvider, _rollupPluginBabelHelpers.extends({ 26 | locale: locale GET /en 500 in 4488ms