عبد النور محمد

الأعضاء
  • المساهمات

    95
  • تاريخ الانضمام

  • تاريخ آخر زيارة

كل منشورات العضو عبد النور محمد

  1. سؤالي هو كيفية إنشاء ملف sitemap وإضافته بشكل ديناميكي إلى مشروع nextjs. لقد أنشأت مدونة باستخدام nextjs و mongodb و express js. هذه هي الواجهة الأمامية لهيكل مشروعي (nextjs) --.next -- components -- node_modules -- pages -- public -- config.js -- next.config.js -- package.json -- package-lock.json
  2. أحتاج إلى قيمة href افتراضية لـ Next / Link ، كما نفعل في لغة html العادية كما هو موضح أدناه <a href='#' ></a> لقد جربت هذا الارتباط ولكن ينتج خطأ بسبب السمة المطلوبة <Link href='#'></Link>
  3. أنا أستخدم nextjs على vercel. إجراء اختبار google lighthouse Pagespeed على صفحتي الرئيسية. تقوم بإرجاع "إزالة ملفات جافا سكريبت غير المستخدمة" وتسرد ملفات جافا سكريبت لصفحاتي الثابتة الأخرى مثل privacy-policy.js about.js.... لماذا يتم تحميل صفحات أخرى وأنا لست في تلك الصفحات؟ كيف يمكنني إيقافها بحيث يتم تحميلها على عنوان url الخاص بهم فقط.
  4. أنا أقرأ Nextjs جزء البيانات من الوثائق وخطر ببالي سؤال واحد. يمكن لـ Nextjs جلب البيانات باستخدام getStaticProps و getStaticPaths و getInitialProps و getServersideProps ، أليس كذلك؟ لكن البعض يحدث في وقت البناء كما أقتبس: getStaticProps (Static Generation): Fetch data at build-time متى يحدث هذا وقت البناء؟ هل هو عند تشغيل npm تشغيل البناء؟ (لبناء بناء الإنتاج) أو عندما يصل المستخدم إلى تطبيق Nextjs الخاص بنا؟ (عند كل طلب)
  5. مرحبا لدي مشروع nextjs أعمل عليه وهو حاليا في استضافة vps في السابق كنت عندما أعمل git pull في vps ثم أبني المشروع يعمل بدون مشاكل الأن قمت بتطوير المشروع و واردت أن أجلب التحديثات الأخيرة في vps ثم البناء لكن يظهر هذا الخطأ بعد أن يأخذ وقت كبير process killed رغم أنني قمت بالبناء محليا دون مشاكل
  6. أحتاج إلى تحميل بعض الملفات إلى S3 من تطبيق NextJs. فتعيين متغيرات البيئة يجب أن يعمل ولكنه لا يعمل عند تعيين accessKeyID و secretKey. next.config.js module.exports = { env: { AWS_ACCESS_KEY_ID: process.env.AWS_ACCESS_KEY_ID }, serverRuntimeConfig: { AWS_SECRET_ACCESS_KEY: process.env.AWS_SECRET_ACCESS_KEY } } config/index.js export default { awsClientID: process.env. AWS_ACCESS_KEY_ID, awsClientSecret: process.env.AWS_SECRET_ACCESS_KEY } import AWS from 'aws-sdk' import config from '../config' AWS.config.update({ accessKeyId: config.awsClientID, secretAccessKey: config.awsClientSecret, }); const S3 = new AWS.S3() const params = { Bucket: "bucketName", Key: "some key", Body: fileObject, ContentType: fileObject.type, ACL: 'public-read' } await S3.upload(params).promise() كتابة بيانات الاعتماد مباشرة فوق تعمل دون مشاكل
  7. لدي مكون بوت (Watson) يحتوي على هذا البرنامج النصي <Script> {` window.watsonAssistantChatOptions = { showLauncher: false, openChatByDefault: true, element: document.querySelector('.chatElement'), onLoad: function(instance) { instance.updateHomeScreenConfig({ is_on: true, greeting: '', starters: { is_on: true, buttons: [ { label: 'Turn home screen off', }, { label: 'Add conversation starters', }, { label: 'Add custom content', }, ], }, }); // Subscribe to the "pre:send" event. instance.on({ type: "pre:send", handler: preSendhandler }); instance.render(); } }; setTimeout(function(){ const t=document.createElement('script'); t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js" document.head.appendChild(t); `} </Script> البرنامج موضوع في _documeny.js المشكلة هي في كل مرة أقوم فيها بتغيير الصفحة يتم إنشاء شاشة دردشة اخرى
  8. كيف تتم استضافة مشروع next في vps server وماهي الخطوات التي يجب علي اتباعها
  9. أريد استيراد jQuery ديناميكيًا حتى تتمكن حزمة الويب من إرسالها ك chunk ولكن عندما أستخدم الاستيراد الديناميكي مثل هذا import ('../vendorjs/jquery-3.3.1.min.js').then($ => { (function() { $('.tabs').tabs(); }) }); ولكن عندما أقوم بتشغيل webpack أحصل على حزمة الأخطاء هذه ERROR in ./src/js/materialize.init.js 1:7 Module parse failed: Unexpected token (1:7) You may need an appropriate loader to handle this file type. import ('../vendorjs/jquery-3.3.1.min.js').then($ => { (function() { | $('.tabs').tabs(); @ ./src/js/index.js 9:0-28
  10. أقوم بإنشاء extension chrome الذي سيحتاج إلى إجراء مكالمة API عند تلقي رسائل معينة من النص البرمجي للمحتوى. أواجه صعوبة في تقديم طلب HTTP وأعتقد أن الخطأ في تكوين webpack الخاص بي. لقد حاولت استخدام node-fetch و axios ولا يعمل أي منهما بالنسبة لي. يبدو ملف webpack.common.js الخاص بي كما يلي: const path = require("path"); module.exports = { target: "node", entry: { popup: path.join(__dirname, "src/popup/index.tsx"), background: path.join(__dirname, "src/background.ts"), contentScript: path.join(__dirname, "src/contentScript.ts"), }, output: { path: path.join(__dirname, "dist"), filename: "[name].js", }, module: { rules: [ { exclude: /node_modules/, test: /\.tsx?$/, use: "ts-loader", }, { exclude: /node_modules/, test: /\.scss$/, use: [ { loader: "style-loader", // Creates style nodes from JS strings }, { loader: "css-loader", // Translates CSS into CommonJS }, { loader: "sass-loader", // Compiles Sass to CSS }, ], }, ], }, resolve: { extensions: [".ts", ".tsx", ".js"], }, }; dispatchRequest.js:52 Uncaught (in promise) TypeError: adapter is not a function at dispatchRequest (dispatchRequest.js:52)
  11. مع __dirname output: { assetModuleFilename: "images/[hash][ext][query]", path: path.resolve(__dirname, 'dist') }, بدون __dirname output: { assetModuleFilename: "images/[hash][ext][query]", path: path.resolve('dist') }, إذن ما هي الحاجة لاستخدام __dirname هنا ؟؟
  12. أحاول تحميل ملفات json مختلفة ، اعتمادًا على البيئة. بتعبير أدق ، أريد تحميل appsettings.development.json عندما يكون على NODE.ENV = "development" ، ثم استخدمه داخل الكتابة المطبوعة ككائن تكوين عام. أيضًا عندما يتغير NODE.ENV الخاص بي إلى "الإنتاج" ، أريد تحميل appsettings.production.json. لقد قمت بالفعل بتكوين حزمة الويب لإصدارات مختلفة باستخدام ملفات مثل webpack.config.js و webpack.config.dev.js و webpack.config.prod.js. إذا كان بإمكاني إضافة شيء مثل استيراد التكوين من `... / config. $ {NODE.ENV} .json` فسيكون ذلك مثاليًا؟
  13. مرحبا أحاول اعداد axios واستدعاءه لاستخدامه في كل طلباتي لكن الجزء الخاص بوضع ال token authorization لا يعمل import axios from 'axios'; const Axios = axios.create({ baseURL: process.env.NEXT_PUBLIC_API, }); let token; if (window) { token = JSON.parse(localStorage.getItem('zu')).state?.auth?.token; } Axios.defaults.headers.common['Authorization'] = `Bearer ${token}`; export default Axios; هل من اقتراح
  14. هذا هو ملف next.config.js الخاص بي ... async redirects() { { source: '/shop', has: [ { type: 'query', key: 'q', value: '(<sef>)', }, ], permanent: false, destination: '/shop/:sef', }, } .... هذا لا يعيد التوجيه من shop?q = sefإلى shop / sef. ما المشكلة في هذا الأمر؟
  15. أنا مبتدئ في next ولدي مشكلة كما هو مذكور يعمل المشروع في وضع dev ولكن عندما أقوم بتشغيل npm run build ، يظهر هذا الخطأ. Cannot destructure property 'components' of 'object null' as it is null in nextjs
  16. واجهت هذا الخطأ Invalid src prop لكنني اتبعت هذا المرجع Invalid src prop في Next.js ولكن تم عرض الخطأ نفسه import Image from 'next/image'; import React, { Component } from 'react'; import logo from '../../public/logo.png'; // import dynamic from "next/dynamic"; // import { Grid} from "semantic-ui-react"; function TopBannerApi(props) { return ( <> <h1>Footer</h1> <p> {props.topbannerresult.map((post) =>( <> <Image src={post.image} alt="test"/> {/* <p>{post.store_name}</p> */} </> ))} </p> </> ) } export default TopBannerApi; module.exports = { reactStrictMode: true, images: { domains: ['dl8mjowvdz1rh.cloudfront.net'], } }
  17. أحاول تشغيل "npm run dev" في مشروع Laravel الخاص بي ولكن حدث خطأ Error: Cannot find module 'webpack-cli/package.json' Require stack: C:\Users\abdal\AppData\Roaming\npm-cache_npx\20792\node_modules\webpack\bin\webpack.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15) at Function.resolve (internal/modules/cjs/helpers.js:78:19) at runCli (C:\Users\abdal\AppData\Roaming\npm-cache_npx\20792\node_modules\webpack\bin\webpack.js:50:26) at C:\Users\abdal\AppData\Roaming\npm-cache_npx\20792\node_modules\webpack\bin\webpack.js:139:5 at processTicksAndRejections (internal/process/task_queues.js:97:5) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\Users\abdal\AppData\Roaming\npm-cache\_npx\20792\node_modules\webpack\bin\webpack.js' ] } مع أنه تم تنزيل webpack cli.
  18. أنا أعمل حاليًا مع next@11.1.2 و webpack v5 وتعطلت لساعات مع إصلاح تحميل mp3. لقد جربت العديد من الحلول لم يعمل أي منهم من أجلي. Type error: Cannot find module 'public/sounds/bighit.mp3' or its corresponding type declarations. 14 | 15 | // Assets > 16 | import sound_bighit from "public/sounds/bighit.mp3" | ^ info - Checking validity of types .% onst path = require('path') const SRC = path.resolve(__dirname, 'public/sounds/') module.exports = { webpack: (config, { }) => { config.module.rules.push({ test: /\.mp3$/, incluse: SRC, use: { loader: 'file-loader', options: { name: '[name].[contenthash].[ext]', outputPath: 'public/sounds/', publicPath: 'public/sounds/' } } }) // config.module.rules.push({ // test: /\.mp3$/, // use: { // loader: 'file-loader', // }, // }) // config.module.rules.push({ // test: /\.mp3/, // use: { // loader: 'url-loader', // }, // }) return config } }
  19. أحاول تكوين واجهة برمجة التطبيقات الخاصة بي لإنشاء بعض المشاريع الشخصية ، ولكن في حالتي ، فإن الطريقة التي تستخدم مجلد / pages / api تعمل فقط مع المضيف المحلي عندما أنشر على الخادم على Vercel لا يمكن للمشروع العثور على نقاط النهاية الخاصة بي . axios api import axios from 'axios' const api = axios.create({ baseURL: '/api/' }) export default api swr hook import api from 'src/services/api' import useSWR from 'swr' function SwrFetchHook<Data = any, Error = any>(url: string) { const { data, error } = useSWR<Data, Error>(url, async url => { const response = await api.get(url) return response.data }) return { data, error } } export default SwrFetchHook const { data } = SwrFetchHook<INavItem[]>('categories')
  20. أنا جديد على Next.js وفي مشروعي ، قمت بتثبيت dotenv (https://www.npmjs.com/package/dotenv) وأنشأت ملف .env في جذر المشروع وكل شيء يعمل بشكل جيد. السابق. API_BASE_PATH = http: // localhost: 8000 / api بعد ذلك ، قمت بإنشاء ملف .env آخر أطلق عليه اسم .env.testing هناك ، ولدي قيم مختلفة لـ API_BASE_PATH. فكيف يمكنني التبديل بين تلك .env في local development؟ "scripts": { "dev": "next dev -p 3001", "build": "next build", "start": "next start", "export": "npm run build && next export" }, أريد إضافته إلى scripts
  21. أنا أستخدم webpack 5 config لتشغيل مستودع react ويبدو أن كل شيء يعمل بشكل جيد باستثناء تحميل الصور ، لدي خطأ لا أفهمه: ERROR in ./src/assets/styles/main.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleNotFoundError: Module not found: Error: Can't resolve 'file-loader' in........... لقد حاولت إعادة تثبيت بعقب mini-css-extract-plugin الذي لم ينجح ، ولست متأكدًا مما يمكن أن يكون المشكلة هنا. rules: [ { test: /\.(js|jsx)$/, use: { loader: "babel-loader" } }, { test: /\.(png|jpg|gif|svg)$/, use: [ { loader: 'file-loader', options: { outputPath: "images", }, }, ], },
  22. أنا أستخدم Webpack وأحاول استخدام صورة png لعرضها في متصفح Firefox الخاص بي. تكمن المشكلة في أن Webpack يقوم بإنشاء صورتين في مجلد dist webpack.config.js module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(jpe?g|png|gif|svg)$/, use: ['file-loader'] } ] } .logo { background-image: url('../assets/foto.png'); background-size: cover; height: 200px; width: 200px; margin: 0 auto;} <div class="logo"></div> dist/ - h74g3ffgf3ff34h76.png - analytics.54t54gg4.js - ab0d12j489gh4igh8.png - index.html - main.h74rg34u73f.js src/ assets/ - foto.png styles/ - styles.css - analytics.js - index.html - script.js - package-lock.json - package.json - webpack.config.js
  23. أخطط لإضافة مكتبة React-slick إلى مشروع nextjs الخاص لشريط تمرير الصور ولكن أواجه مشكلة ولكن بمجرد أن أقوم باستيراد css في ملف _app.tsx الخاص بي ، فإنه يعطي خطأ Module not found: Can't resolve '~slick-carousel/slick/slick-theme.css' _app.js import React from "react"; import { AppProps } from "next/app"; import Head from "next/head"; import "@styles/global.scss"; import { Provider } from "react-redux"; import store from "@redux/store"; import { MuiThemeProvider } from "@material-ui/core/styles"; import CssBaseline from "@material-ui/core/CssBaseline"; import theme from "src/createMiuitheme"; import "~slick-carousel/slick/slick.css"; import "~slick-carousel/slick/slick-theme.css"; function MyApp({ Component, pageProps }: AppProps): JSX.Element { // const theme = responsiveFontSizes(createTheme()); return ( <> <Head> <link rel="shortcut icon" href="#" /> <meta charSet="utf-8" /> <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" /> <meta name="theme-color" content={theme.palette.primary.main} /> </Head> <Provider store={store}> <MuiThemeProvider theme={theme}> <CssBaseline /> <Component {...pageProps} /> </MuiThemeProvider> </Provider> </> ); } export default MyApp;
  24. أقوم أولاً بإحضار جميع المنشورات والمؤلفين من ContentfulAPI ، ثم أقوم بعمل تكرار لهم لإنشاء مسار صالح لتمريره إلى مصفوفة المسارات export const getStaticPaths = async () => { const posts = await DataController.getEntriesByContentType( "componentBlog", ); const blogPosts = posts.items.map(item => { return {params: {blog_post: [item.fields.category.replace(/\s+/g, '-').replace(/'/g, '').toLowerCase(), item.fields.slug]}} }) const authors = await DataController.getEntriesByContentType( "author", ); const authorPaths = authors.items.map(item => { return {params: {blog_post: ['author', item.fields.slug]}} }) return { paths: [ blogPosts, authorPaths, ], fallback: false, } } وقد تلقيت هذا الخطأ عندما أحاول الوصول إلى رابط مدونة error - Error: Additional keys were returned from `getStaticPaths` in page "/blog/[...blog_post]". URL Parameters intended for this dynamic route must be nested under the `params` key, i.e.: return { params: { blog_post: ... } } Keys that need to be moved: 0, 1, 2, 3, 4, 5, 6, 7, 8. at C:\Workspace\phoenix-v2\next\new-phoenix\node_modules\next\dist\build\utils.js:518:23 at Array.forEach (<anonymous>) at Object.buildStaticPaths (C:\Workspace\phoenix-v2\next\new-phoenix\node_modules\next\dist\build\utils.js:492:17) at processTicksAndRejections (internal/process/task_queues.js:95:5) { type: 'Error', page: '/blog/[...blog_post]'
  25. لدي مشكلة في الحصول على البيانات وتعيينها في localStorage فأنا أستخدم NextJs لذا لا يمكنني استخدام localStorage في البداية. أحاول حل المشكلة باستخدام useEffect لكن لدي حلقة لا نهائية لا أعرف أفضل طريقة لحل المشكلة ، باستخدام useCallback أو useMemo أو useRef. const [ meetings, setMeetings] = useState([]) // meetings= [{meeting1},{meeting2}] useEffect(() => { if(localStorage.getItem('meetings') === undefined || localStorage.getItem('meetings') === '' || localStorage.getItem('meetings') === null ){ localStorage.setItem('meetings', JSON.stringify([])) } if( JSON.parse(localStorage.getItem('meetings')).length === 0){ const meetingsInLocalStorage = JSON.parse(localStorage.getItem('meetings')) setMeetings([...meetings, meetingsInLocalStorage]) } },[meetings])