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

مرحبا لدي الشيفرة التالية 

import React, { Component, useEffect, useState } from 'react';
import { AppLoading, Font, Permissions } from 'expo';
import AppNavigation from './config/route';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
    };
  }

  async componentWillMount() {
    await Permissions.askAsync(Permissions.LOCATION);
  }

  async _getFonts() {
    await Font.loadAsync({
      'noto-font': require('./assets/fonts/NotoKufiArabic-Regular.ttf'),
    });
  }

  render() {
    if (!this.state.isReady) {
      return (
        <AppLoading startAsync={this._getFonts} onFinish={() => this.setState({ isReady: true })} />
      );
    }
    return <AppNavigation />;
  }
}

ويحدث معي هذا الخطأ عند تشغيل المشروع 

fontFamily "space-mono" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

لدي خطأ في مشروع expo react native وقد ظهر فجأة ولم أستطع حله المشروع كان يشتغل دون مشاكل 

typeError: React.useEffect not a function

أعمل على مشروع بنسخة react native navigation قديمة لكن مؤخرا عند تشغيل المشروع تخرج هذه الرسالة تجبرني على التحديث واذا قمت بالتحديث سأعيد كتابة الشيفرة المتعلقة به هل من حل لتفادي ذلك 

It appears that you are using old version of react-navigation library. Please update @react-navigation/bottom-tabs, @react-navigation/stack and @react-navigation/drawer to version 5.10.0 or above to take full advantage of new functionality added to react-native-screens

مرحبا لدي مشروع react native منشئ عن طريق expo وعندما أقوم بتشغيله أحصل على هذا الخطأ

Make sure that you have rebuilt the native code. If the problem persists try clearing the Watchman and packager caches with `watchman watch-del-all && react-native start --reset-cache`."

هل من الممكن تعطيل SSR في بعض الصفحات باستخدام Next js؟ على سبيل المثال ، لدي صفحة تحتوي على وصف المنتج الذي أستخدم فيه SSR لـ SEO ولكن لدي أيضًا صفحة بها قائمة بالعناصر أو المنتجات التي يمكنني تصفيتها ، وبالنسبة لتلك الصفحة ، لا أريد استخدام ssr لأن  إنشاء الصفحة يتم  ديناميكيًا في كل مرة ، كيف يمكنني تعطيل SSR في هذه الصفحة؟

أحاول استخدام Redux مع مشروع next.js starter وقمت بتثبيت next-redux-wrapper على المشروع ولكني لست متأكدًا من مكان ملف root في المشروع.

أحاول اتباع البرنامج التعليمي الذي يظهر على  next-redux-wrapper  ولكن لم ينجح. لا شيء يتغير.

أحاول دمج mongoose مع next server وقد وجدت بعض المساعدة في الانترنت وقد قمت باتباع الخطوات عبر انشاء ملف اتصال

import mongoose from 'mongoose';

const connectDB = handler => async (req, res) => {

  // Use new db connection
  await mongoose.connect(process.env.mongodburl, {
    useUnifiedTopology: true,
    useFindAndModify: false,
    useCreateIndex: true,
    useNewUrlParser: true
  });
  return handler(req, res);
};

export default connectDB;

ثم استخدام المتصل للاتصال واجراء التعاملات عبر ال handler

import connectDB from '../../middleware/mongodb';
import bcrypt from '../../middleware/bcrypt';
import User from '../../models/user';

const handler = async (req, res) => {
  if (req.method === 'POST') {
    const { name, email, password } = req.body;
    if (name && email && password) {
        try {
          var passwordhash = await bcrypt.sign(password);
          var user = new User({
            name,
            email,
            password: passwordhash,
          });
          var usercreated = await user.save();
          return res.status(200).send(usercreated);
        } catch (error) {
          return res.status(500).send(error.message);
        }
      } else {
        res.status(422).send('data_incomplete');
      }
  } else {
    res.status(422).send('req_method_not_supported');
  }
};

export default connectDB(handler);

لكن الخادم انهار عند لمس ال endpoint ولا أعرف ما السبب والخطأ يخبرني أنه لا يمكن الاتصال 

أرغب في إنشاء نظام دردشة باستخدام Next.js. لست متأكدًا من كيفية إعداد خادم socket.

أريد أن يتم تنفيذ هذا الخادم التالي ليس مع خادم منفصل. هل يجب علي إنشاء ملف server.js في rootوتشغيل الخادم؟

كيف يمكننا التحقق من أننا في server أو client في مكون و أيضا داخل get StaticProps في nextjs ؟

مرحبا أحاول استيراد مكون دينامكيا عبر متغير path أوفره بهذه الطريقة

import dynamic from 'next/dynamic'


const Test = () => {
  const router = useRouter();
  const { component } = router.query;
  const path = `../../components/${component.join('/')}`;


  const DynamicComponent = dynamic(() => import(path), {
    ssr: false,
    loading: () => <p>Loading...</p>,
  });



  return (
    <Fragment>
      <h1>Testing {path}</h1>
  
        <DynamicComponent />    
    </Fragment>
  );
};

لكن المكون لا يظهر ويبقى فقط loading ولا يتغير شئ

لدي ملف style.sass فيه استيرادات

@import './fonts.scss';
@import './variables.scss';
@import './global.scss';

وهذا الاعدادت الخاصة ب next

  const withSass = require('@zeit/next-sass')
  module.exports = withSass({
  cssModules: true
})

وكنت استورد style.sass في navbar

import '../global-styles/main.scss';

const Navbar = (props) => (
  <div>
  .....
  </div>
);

export default Navbar;

وحدث هذا الخطأ معي 

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global

قمت باتباع مقال حول استخدام express مع nextjs وكل شئ كان يعمل بسلاسة وفي الصفحة تم جلب البيانات 

server.get('/api/posts', (req, res, next) => {
   
    Post.find({}, (err, posts) => {
      res.send(products)
    })
  })

import Layout from '../components/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'

const Posts = (props) => (
  <Layout>
    <h1>List of Products</h1>
    <ul>
      { props.posts.map((post) => (
        <li key={post._id}>{ post.title }</li>
      ))}
    </ul>
  </Layout>
)

Products.getInitialProps = async function() {

  const res = await fetch('/api/psts')
  const data = await res.json()


  return {
    products: data
  }
}

export default Products

لكن عند تحديث الصفحة كل شئ يتوقف وأحصل على هذا الخطأ

Error: only absolute urls are supported

مرحبا اذا كان لدي رابط بهذا الشكل 

http://localhost:3000/post?id=1

كيف يمكنني الحصول على ال query id من الرابط ؟

عند استخدام window في مكون الكلاس يحدث معي خطأ

import React, { Component } from 'react'

export default class index extends Component {
  
componentWillMount() {
    console.log('window.innerHeight', window.innerHeight);
}
  
    render() {
        return (
            <div>
.....
            </div>
        )
    }
}

Unhandled Rejection (ReferenceError): window is not defined

ما المشكلة ؟

في create react app لدينا ملف index.html في مجلد ال public خيث يمكن التعديل على لتعم التعديلات في جميع الموقع ولكن nextjs  لا يحتوي ملف index.html مركزي هل هناك طريقة لانشاء ملف مركزي مشابه للذي يوجد في create raect app؟

get static props تجلب البيانات و get server side props أيضا تجلب اليانات واستخدامهما تقريبا متماثل 

function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page

ولكن ما الفرق بينهما وكيف لي معرفة أي واحدة أستخدم وفي أي وقت ؟

مرحبا وجدت مثال في توثيق موقع next js عن جلب البيانات وقد قمت بدراسته ولكن لم أفهم شئ

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

//المفروض هذه تجلب البيانات وترسلها للمكون فوق
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
   
    revalidate: 10, // In seconds
  }
}

//لكن لماذا كررنا العملية هنا ؟
export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

 
  return { paths, fallback: 'blocking' }
}

export default Blog

وما الفرق بين getStaticPaths و getStaticProps ؟

في ى next داخل مجلد pages نستطيع انشاء ملفات و ال route يكون حسب أسماء الملفات والأن انا لدي ملف post.js واريد ال route ان يكون  post/1/ لجلب مستند post بال id الخاص به في react router يمكن فعلها بهذه الطريقة 

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";



export default function ParamsExample() {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>

        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

function Child() {
 
  let { id } = useParams();

  return (
    <div>
      <h3>ID: {id}</h3>
    </div>
  );
}

لكن كيف يمكن ذلك في next js

أنا جديد في next js وقد قمت بانشاء مشروع بنجاح لكن عند تشغيله لا يشتغل وأظن انه بسبب ان ال port 3000 مستخدم لدي لذا هل هناك طريقة لتغيير ال port الذي يشتغل عليه مشروع ال next

أنا جديد في React Native. كيف يمكننا تحديث / إعادة تحميل الشاشة السابقة عند العودة إليها باستدعاء goBack ()؟

لنفترض أن لدينا 3 شاشات a b c
عندما نقوم بتشغيل goBack () من الشاشة C ، فإنه يعود إلى الشاشة B ولكن مع state بالبيانات القديمة. كيف يمكننا تحديثه؟