خطأ عند تحديث صفحة تجلب البيانات في nextjs

عبد النور محمد · 27 يونيو 2021

قمت باتباع مقال حول استخدام 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

عبدالله عبدالرحمن11 · 27 يونيو 2021

كما يوضح الخطأ ، سيتعين عليك استخدام عنوان URL مطلق absolute من أجل fetch الذي تقوم بإستخدامه.

يبدوا أن المشكلة له علاقة بالبيئات المختلفة (العميل والخادم) التي يمكن تنفيذ التعليمات البرمجية الخاصة بك عليها. عناوين URL النسبية relative ليست واضحة وموثوقة بدرجة كافية في هذه الحالة.

تتمثل إحدى طرق حل هذه المشكلة في كتابة عنوان الخادم يدوياً في طلب fetch .

وطريقة أخرى عبر إعداد وحدة config والتي تتفاعل مع بيئتك:

/config/index.js

const dev = process.env.NODE_ENV !== 'production';

export const server = dev ? 'http://localhost:3000' : 'https://your_deployment.server.com';

وفي الكود الخاص بك

import { server } from '../config';

// ...

Products.getInitialProps = async function() {

  const res = await fetch(`${server}/api/psts`)
  const data = await res.json()


  return {
    products: data
  }
}

خطأ عند تحديث صفحة تجلب البيانات في nextjs

السؤال

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

1 جواب على هذا السؤال

Recommended Posts

عبدالله عبدالرحمن11

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية