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

عند تفعيل الأمر التالي npx prisma migrate dev في مشروع next postegres حصل الخطأ التالي Environment variables loaded from .env Prisma schema loaded from prisma\schema.prisma Datasource "db": PostgreSQL database "CloudHostingDB", schema "public" at "localhost:5432" Error: P1000: Authentication failed against database server at `localhost`, the provided database credentials for `postegres` are not valid. Please make sure to provide valid database credentials for the database server at `localhost`. وهذه بعض الصور لمزيد التوضيح 1. هذه الصورة عندما للمرة الأولى بفتح برنامج pg Admin 2. الإتصال بقاعدة البيانات بواسطة psql 3. شكرا على المساعدة

هذا ملف .env DATABASE_URL="postgresql://postegres:/*MahmouD_1989*/@localhost:5432/CloudHostingDB?schema=public" ملف schema.prisma generator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" url = env("DATABASE_URL") } model User { id Int @id @default(autoincrement()) username String @db.VarChar(100) email String @unique password String isAdmin Boolean @default(false) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt comments Comment[] } model Article { id Int @id @default(autoincrement()) title String @db.VarChar(200) description String createdAt DateTime @default(now()) updatedAt DateTime @updatedAt comments Comment[] } model Comment { id Int @id @default(autoincrement()) text String createdAt DateTime @default(now()) updatedAt DateTime @updatedAt articleId Int userId Int // One-to-Many relation between Article & Comment article Article @relation(fields: [articleId], references: [id]) // One-to-Many relation between User & Comment user User @relation(fields: [userId], references: [id]) }

مرحبا مجددا هذا ما ظهر لي عند تنفيذ الأمر npx prisma migrate dev ظهر نفس الخطأ مجددا

لم يتم التعرف على psql

كيف يكون ذلك

السلام عليكم. أود إنشاء الجداول في postegres فقمتكتابة الأمر التالي npx migrate prisma dev ظهر لي هذا الخطأ Environment variables loaded from .env Prisma schema loaded from prisma\schema.prisma Datasource "db": PostgreSQL database "**************@localhost:5432/CloudHostigDB", schema "public" at "postegres" Error: P1001: Can't reach database server at `postegres:5432` Please make sure your database server is running at `postegres:5432`. كيف يمكن معالجة هذا الخطأ. شكرا

كل شيء تمام الآن شكرا

يوجد pg Admin وpg Admin4. قمت بحذف pg Admin كيف ذلك

السلام عليكم. بعد إتمام تحميل وتنصيب posteqres أردت فتح الوجهة الرسومية لقاعدة البيانات postegrs واجهت هذا المشكل شكرا على المساعدة

السلام عليكم. هل يمكنني إنشاء إمتداد جوجل google chrome extension بلغة الجافاسكريبت react | node | next وكيف ذلك. شكرا.

السلام عليكم. أرجو توضيح سبب طباعة النتيجة في الدالتين التالييتين 1. const sayHello = () => { return "Hello" } console.log(sayHello.prototype) /* النتيجة undefined */ 2. function sayHello() { return "Hello" } console.log(sayHello.prototype) /** النتيجة: constructor : ƒ sayHello() [[Prototype]] : Object */ أو بطرقة أخرى لماذا تمت طباعة undefined في الدالة السهمية شكرا

السلام عليكم. هل تعلم typescript يتطلب وجوبا تعلم oop. شكرا.

مارأيك بطريقة كتابة الكود. هل تخضع لbest practice

السلام عليكم. أرجو مساعدتي في التحقق من البيانات بواسطة cookie و jwt في مشروع Nextjs 14. تظهر لي رسالة الخطأ التالية { "message": "Not authorized, no token" } للتوضيح: في البداية قمت بتوليد token و cookie utils/generateToken import jwt from 'jsonwebtoken' const generateToken = (id) => { const token = jwt.sign({ userId: id }, process.env.JWT_SECRET, { expiresIn: '1d' }); return token; } const setTokenCookie = (response, token) => { response.cookies.set('token', token, { httpOnly: true, secure: process.env.NODE_ENV !== 'development', sameSite: 'strict', maxAge: 60*60*24 }); } export { generateToken, setTokenCookie }; ثم قمت بإنشاء الحساب وتسجيل الدخول (سوف أعرض تسجيل الدخول لأنهما مشابهين كثيرا) app/api/auth/login/route.js import connectDB from "@/config/connectDB"; import User from "@/models/User"; import { generateToken, setTokenCookie } from "@/utils/generateToken"; import bcrypt from "bcryptjs"; import { NextResponse } from "next/server"; /** * Method: POST * route : /api/auth/login */ export const POST = async (request) => { await connectDB(); try { const { email, password } = await request.json(); const user = await User.findOne({ email }); const isMatch = await bcrypt.compare(password, user.password) if (!user || !isMatch) { return new NextResponse("Invalid Credentials", { status: 400 }) } if (user) { const token = generateToken(user._id); const response = new NextResponse( JSON.stringify({ user: user.email }), { status: 200 } ); setTokenCookie(response, token); return response; } else { return new NextResponse("Failed to create user", { status: 500 }); } } catch (error) { console.log(error); return new Response("Something went wrong => Register User", { status: 500, }); } }; ثم قمت بتحديد الوسائط middlewares/protect.js import User from "@/models/User"; import { cookies } from "next/headers"; const protect = async (request) => { const cookieStore = cookies() const token = cookieStore.get('jwt')?.value; if (!token) { throw new Error('Not authorized, no token'); } try { const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findById(decoded.userId) if (!user) { throw new Error('Not authorized, user not found'); } return user; } catch (error) { console.error(error); throw new Error('Not authorized, token failed'); } }; export default protect; في النهاية لتجربة التحقق قمت ب: app/api/auth/me/route.js import connectDB from "@/config/connectDB" import protect from "@/middleware/protect" import User from "@/models/User" import { NextResponse } from "next/server" /** * Test If Route Is Protected */ export const GET = async (request) => { await connectDB() try { const user = await protect(request) const me = await User.findById(user._id ) return NextResponse.json(me, { status: 200 }) } catch (error) { return NextResponse.json({ message: error.message }, { status: 401 }); } } الرجاء مساعدتي في تحديد سبب فشل التحقق من البيانات. شكرا.

السلام عليكم. كمبرمج مبتدئ، هل ينصح باستخدام مكتبة Nextjs عند الحماية والتحقق NextAuth . أم الأجدر أن يقوم المبرمج بنفسه بالحماية والتحقق دون اللجوء لمثل هذه المكتبات في إطار التمرس أكثر. شكرا

مرحبا مجددا @Mustafa Suleiman المشكل أني أستعمل nextjs 14 حيث أستخدم useEffect لجلب البيانات. هل تيعين علي تغيير الكود. كمثال: const pageSearchResultsPage = () => { const [properties, setProperties] = useState([]); const [loading, setLoading] = useState(true); const searchParams = useSearchParams(); const location = searchParams.get("location"); const propertyType = searchParams.get("propertyType"); useEffect(() => { const fetchSearchResults = async () => { try { const res = await fetch( `/api/properties/search?location=${location}&propertyType=${propertyType}` ); if (res.status === 200) { const data = await res.json(); console.log('data') setProperties(data); } else { setProperties([]); } } catch (error) { console.log(error); toast.error("Fetching search properties is failed!"); } finally { setLoading(false); } }; fetchSearchResults(); }, [location, propertyType]); return ( <> <section className="bg-green-700 py-4"> <div className="max-w-7xl mx-auto px-4 flex flex-col items-start sm:px-6 lg:px-8"> <PropertySearchForm /> </div> </section> {loading ? ( <Spinner loading={loading} /> ) : ( <section className="px-4 py-6"> <div className="container-xl lg:container m-auto px-4 py-6"> <Link href="/properties" className="flex items-center text-green-500 hover:underline mb-3" > <FaArrowAltCircleLeft className="mr-2 mb-1" /> Back To Properties </Link> <h1 className="text-2xl mb-4">Search Results</h1> {properties.length === 0 ? ( <p>No search results found</p> ) : ( <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> {properties.map((property) => ( <PropertyCard key={property._id} property={property} /> ))} </div> )} </div> </section> )} </> ); }; شكرا

السلام عليكم. عند رفع المشروع على vercel، ظهرت الأخطاء التالية: q [Error]: Dynamic server usage: Route /api/properties/search couldn't be rendered statically because it used `request.url`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error at W (/vercel/path0/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:21106) at Object.get (/vercel/path0/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:28459) at c (/vercel/path0/.next/server/app/api/properties/search/route.js:1:607) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async /vercel/path0/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:36258 description: "Route /api/properties/search couldn't be rendered statically because it used `request.url`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error", digest: 'DYNAMIC_SERVER_USAGE' للتوضيح: هذه بعض المكونات التي أشير لي بأنها تحتوي أخطاء علما وأن المشروع يعمل بصفة عادية على المتصفح api/properties import cloudinary from "@/config/cloudinary"; import connectDB from "@/config/database"; import Property from "@/models/Property"; import { getSessionUser } from "@/utils/getSessionUser"; /** * method: GET * route : /api/properties */ export const GET = async (request) => { try { await connectDB(); const page = request.nextUrl.searchParams.get("page") || 1; const pageSize = request.nextUrl.searchParams.get("pageSize") || 5; const skip = (page - 1) * pageSize; const total = await Property.countDocuments({}); const properties = await Property.find({}).skip(skip).limit(pageSize); const result = { total, properties, }; return new Response(JSON.stringify(result), { status: 200 }); } catch (error) { console.log(error); return new Response("Something went wrong", { status: 500 }); } }; /** * method: POST * route : api/properties/add */ export const POST = async (request) => { try { await connectDB(); const sessionUser = await getSessionUser(); if (!sessionUser || !sessionUser.userId) { return new Response("UserId is required", { status: 401, }); } const { userId } = sessionUser; const formData = await request.formData(); const amenities = formData.getAll("amenities"); const images = formData.getAll("images").filter((img) => img.name !== ""); const propertyData = { type: formData.get("type"), name: formData.get("name"), description: formData.get("description"), location: { street: formData.get("location.street"), city: formData.get("location.city"), state: formData.get("location.state"), zipcode: formData.get("location.zipcode"), }, beds: formData.get("beds"), baths: formData.get("baths"), square_feet: formData.get("square_feet"), amenities, rates: { weekly: formData.get("rates.weekly"), monthly: formData.get("rates.monthly"), nightly: formData.get("rates.nightly"), }, seller_info: { name: formData.get("seller_info.name"), email: formData.get("seller_info.email"), phone: formData.get("seller_info.phone"), }, owner: userId, }; // Upload Images To Cloudinary const imageUploadPromises = []; for (const image of images) { const imageBuffer = await image.arrayBuffer(); const imageArray = Array.from(new Uint8Array(imageBuffer)); const imageData = Buffer.from(imageArray); // Convert The Image Data To Base64 const imageBase64 = imageData.toString("base64"); // Make request to upload to cloudinary const result = await cloudinary.uploader.upload( `data:image/png;base64,${imageBase64}`, { folder: "propertypulse", secure: true, rejectUnauthorized: false, } ); imageUploadPromises.push(result.secure_url); // Wait for all images to upload const uploadedImages = await Promise.all(imageUploadPromises); // Add Uploaded images to propertyData object propertyData.images = uploadedImages; } const newProperty = new Property(propertyData); await newProperty.save(); return Response.redirect( `${process.env.NEXTAUTH_URL}/properties/${newProperty._id}` ); // return new Response(JSON.stringify({message: 'success'}), { status: 200 }) } catch (error) { console.error("This is the error we are looking for: ", error); return new Response("Failed to add property", { status: 500 }); } }; /api/properties/search import connectDB from "@/config/database"; import Property from "@/models/Property"; /** * method: GET * route : /api/properties/search */ export const GET = async (request) => { try { await connectDB(); const { searchParams } = new URL(request.url); const location = searchParams.get("location"); const propertyType = searchParams.get("propertyType"); const locationPattern = new RegExp(location, "i"); // Match location pattern against database fields let query = { $or: [ { name: locationPattern }, { description: locationPattern }, { "location.street": locationPattern }, { "location.city": locationPattern }, { "location.state": locationPattern }, { "location.zipcode": locationPattern }, ], }; // Only check for property if its not 'All' if (propertyType && propertyType !== 'All') { const typePattern = new RegExp(propertyType, "i"); query.type = typePattern } const properties = await Property.find(query) return new Response(JSON.stringify(properties), { status: 200 }); } catch (error) { console.log(error); return new Response("Something went wrong => Search Properties", { status: 500, }); } }; package.json { "name": "next_app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@maptiler/leaflet-maptilersdk": "^2.0.0", "cloudinary": "^2.2.0", "leaflet": "^1.9.4", "leaflet-control-geocoder": "^2.4.0", "leaflet-defaulticon-compatibility": "^0.1.2", "mongodb": "^6.8.0", "mongoose": "^8.4.4", "next": "14.2.4", "next-auth": "^4.24.7", "opencage-api-client": "^1.0.7", "react": "^18", "react-dom": "^18", "react-icons": "^5.2.1", "react-leaflet": "^4.2.1", "react-photoswipe-gallery": "^1.3.9", "react-share": "^5.1.0", "react-spinners": "^0.14.1", "react-toastify": "^10.0.5" }, "devDependencies": { "postcss": "^8", "tailwindcss": "^3.4.1" } } شكرا لكم.

السلام عليكم. أود تعلم قواعد البيانات العلائقية. أريد أن تنصحوني أيا أختار mysql postegress sequilize مع العلم أني مبرمج ويب بالتقنيات التالية react node express nextjs شكرا

السلام عليكم. في الآونة الأخيرة كثر تداول مصطلح البرمجيات كخدمة. لدي بعض الأسئلة حول هذا الموضوع: هل هذه الخدمة تعني تطوير تطبيق كامل يبدأ بالتصميم ثم التطوير والبرمجة فالرفع وحجز الاستضافة. ماهي لغات البرمجة التي تقتضيها هي الخدمة أو على الأرجح أكثر اللغات شيوعا لهذه للخدمة. أمثلة عملية لمثل هذه الخدمات. شكرا.

السلام عليكم. في الكود التالي: "use client" import React, { useEffect, useState } from "react"; import Link from "next/link"; import { useParams } from "next/navigation"; import { FaArrowLeft } from 'react-icons/fa'; import { fetchProperty } from "@/utils/requests"; const PropertyPage = () => { const [property, setProperty] = useState(null) const [loading, setLoading] = useState(true) const { id } = useParams() console.log(id) useEffect(() => { const fetchPropertyData = async() => { if (!id) return try { const property = await fetchProperty(id) setProperty(property) } catch (error) { console.error('Error fetching property: ', error) } finally { setLoading(false) } if (property === null) { fetchPropertyData() } } }, [id, property]) console.log(property) if (loading) return <h1>Loading...</h1> if (!property) return <h1> No Property Found </h1> return ( <> <section> <div className="container m-auto py-6 px-6"> <Link href="/properties" className="text-green-500 hover:text-green-600 flex items-center" > <FaArrowLeft className="mr-2" /> Back to Properties </Link> </div> </section> <section className="bg-green-50"> <div className="container m-auto py-10 px-6"> <div className="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6"> <aside className="space-y-4"> property single page </aside> </div> </div> </section> </> ); }; export default PropertyPage; تظهر على شاشة المستخدم Loading... والسبب هو أن قيمة loading: false. للتوضيح: route.js export const GET = async (request, { params }) => { try { await connectDB(); const property = await Property.findById(params.id); if (!property) return new Response("Property Not Found", { status: 404 }); return new Response(JSON.stringify(property), { status: 200 }); } catch (error) { console.log(error); return new Response("Something went wrong", { status: 500 }); } }; requests.js const apiDomain = process.env.NEXT_PUBLIC_API_DOMAIN || null; async function fetchProperty(id) { try { if (!apiDomain) { return null; } const res = await fetch(`${apiDomain}/properties/${id}`); if (!res.ok) { throw new Error("Failed to fetch data"); } return res.json(); } catch (error) { console.log(error); return null; } } أعتقد أن المشكل هو في عدم التعرف على NEXT_PUBLIC_API_DOMAIN شكرا على مساعدتي في تجاوز هذا الخطأ

السلام عليكم. Warning: A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework. at PropertyPage أرجو التوضيح: في الكود الآتي: "use client" import React, { useEffect, useState } from "react"; import Link from "next/link"; import { useParams } from "next/navigation"; import { FaArrowLeft } from 'react-icons/fa'; import { fetchProperty } from "@/utils/requests"; const PropertyPage = async() => { const [property, setProperty] = useState(null) const [loading, setLoading] = useState(true) const { id } = useParams() useEffect(() => { const fetchPropertyData = async() => { if (!id) return try { const property = await fetchProperty(id) setProperty(property) } catch (error) { console.error('Error fetching property', error) } finally { setLoading(false) } if (property === null) { fetchPropertyData() } } }, [id, property]) return ( <> <section> <div className="container m-auto py-6 px-6"> <Link href="/properties" className="text-green-500 hover:text-green-600 flex items-center" > <FaArrowLeft className="mr-2" /> Back to Properties </Link> </div> </section> <section className="bg-green-50"> <div className="container m-auto py-10 px-6"> <div className="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6"> <aside className="space-y-4"> property single page </aside> </div> </div> </section> </> ); }; export default PropertyPage; ظهرت رسالة الخطأ المذكورة ولكن عند حذف async في الدالة PropertyPage صار الكود يعمل بدون مشكل. سؤالي هو لماذا async فعلت الخطأ. شكرا للتوضيح.

شكرا. بصراحة في بعض الأحيان لا أفهم شيئا. في الصباح طرحت السؤال والكود لايعمل. الآن صار الكود يشتغل دون أن أقوم بأي تغيير

السلام عليكم. الرجاء مساعدتي في جلب البيانات من الخادم. route.js /** * method: GET * path : api/properties */ export const GET = async( request ) => { try { await connectDB() const properties = await Property.find({}) return new Response(JSON.stringify(properties), { status: 200 }) } catch (error) { console.log(error) return new Response('Something went wrong', { status: 500 }) } } connectDB import mongoose from 'mongoose' let connected = false const connectDB = async () => { mongoose.set('strictQuery', true) // If the database is already connected, don't connect again if (connected) { console.log('Mongo DB is already connected ...') return; } // Connect to MongoDB try { await mongoose.connect(process.env.MONGO_URI); connected = true console.log('MongoDB connected ...') } catch (error) { console.log(error) } } export default connectDB; في هذه الحالة عندما أدخل على الرابط التالي http://localhost:3000/api/properties تظهر لي مصفوفة الproperties propeties/page.jsx import React from "react"; import PropertyCard from '@/components/PropertyCard'; async function fetchProperties() { try { const res = await fetch(`${process.env.NEXT_PUBLIC_API_DOMAIN}/properties`) if (!res.ok) { throw new Error('Failed to fetch data') } return res.json() } catch (error) { console.log(error) } } const PropertiesPage = async () => { const properties = await fetchProperties() console.log(properties) return ( <section className='px-4 py-6'> <div className='container-xl lg:container m-auto px-4 py-6'> {properties.length === 0 ? ( <p>No properties found</p> ) : ( <div className='grid grid-cols-1 md:grid-cols-3 gap-6'> {properties.map((property) => ( <PropertyCard key={property._id} property={property} /> ))} </div> )} </div> </section> ); }; export default PropertiesPage; في هذه الحالة مصفوفة الproperties فارغة وتظهر لي No properties found في طرف العميل شكرا.

الحل هو إضافة icon.png في ملف app ثم يقع إدراجها مباشرة الكود import React from 'react' import '@/assets/styles/globals.css' export const metadata = { title: 'Property Pulse', description: 'Find your dream rental property', keywords: 'rental, find rentals, property, find properties', } const MainLayout = ({ children }) => { return ( <html lang='en'> <body> <div>{children}</div> </body> </html> ) } export default MainLayout شكرا

للأسف أخي