مشكلة في مكون ال head في nextjs

عبد النور محمد · 30 أغسطس 2021

لماذا مكون ال head لا يعرض معلومات ال meta ويرسلها أثناء server side rendering

function Book({ getBook, addBook, removeBook, auth, cart, book }) {
 .......

  return (
    <Box m={['0', '5%']}>
      {data && <Filter categories={data.bookCategories} publishers={data.publishers}></Filter>}
      <Box mt="50px">
       

        <Box>
          {!data && (
            <Box textAlign="center">
              <Spinner size="xl" />
            </Box>
          )}
          <Grid
            pr={['2%', '2%', '7%', '7%']}
            pl={['2%', '2%', '7%', '7%']}
            templateColumns={['1fr', '1fr', '0.5fr 2fr', '0.5fr 2fr']}
            gap="10px"
          >
            {data ? (
              <>
              <Head>
          			<title>{book?.title}</title>
          			<meta name="title" content={book?.title} />
          			<meta name="description" content={book?.description} />

          			<meta property="og:title" content={book?.title} />
          
          			<meta property="og:url" content={`${process.env.NEXT_PUBLIC_BASE}/book/${book?.id}`} />
          			<meta property="og:type" content="book" />
          			<meta property="og:description" content={book?.description} />
         			<meta property="og:image" content={`${process.env.NEXT_PUBLIC_STORAGE}/${book?.cover}`} />
               </Head>
              </Grid>
        </Box>
      </Box>
    </Box>
  );
}

const mapStateToProps = (state) => {
  return { cart: state.cart, auth: state.auth };
};

const mapDispatchToProps = (dispatch) => {
  return {
    getBook: (id) => dispatch(getBook(id)),
    addBook: (book) => dispatch(addBook(book)),
    removeBook: (book) => dispatch(removeBook(book)),
  };
};

export async function getServerSideProps({ params }) {
  const res = await axios.get(`${process.env.NEXT_PUBLIC_API}/books/${params.id}`);
  return {
    props: {
      book: res.data,
    },
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Book);

Salah Eddin Beriani2 · 31 أغسطس 2021

هذه المشكلة من المشكلات التي تعبر جيدا عن معنى server side rendering بحيث أنك وضعا شرطا يتوفر الا في client وهذا الشرط هو تواجد ال data ووضعت ال head داخل ذلك و data لن تكون متوفرة في server side rendering وبالتالي أنت لن تحصل على معلومات داخل ال head والطريقة لاصلاح ذلك هي فقط بعدم وضع أي شرط للشيفرة التي ينبغي لها أن تشتغل في server

   {data ? (
              <>
              <Head>
          			<title>{book?.title}</title>
          			<meta name="title" content={book?.title} />
          			<meta name="description" content={book?.description} />

          			<meta property="og:title" content={book?.title} />
          
          			<meta property="og:url" content={`${process.env.NEXT_PUBLIC_BASE}/book/${book?.id}`} />
          			<meta property="og:type" content="book" />
          			<meta property="og:description" content={book?.description} />
         			<meta property="og:image" content={`${process.env.NEXT_PUBLIC_STORAGE}/${book?.cover}`} />
               </Head>

بدل وضع head داخل الشرط لتواجد data نخرجها لتكون ليست مقيدة بذلك الشرط

              <Head>
          			<title>{book?.title}</title>
          			<meta name="title" content={book?.title} />
          			<meta name="description" content={book?.description} />

          			<meta property="og:title" content={book?.title} />
          
          			<meta property="og:url" content={`${process.env.NEXT_PUBLIC_BASE}/book/${book?.id}`} />
          			<meta property="og:type" content="book" />
          			<meta property="og:description" content={book?.description} />
         			<meta property="og:image" content={`${process.env.NEXT_PUBLIC_STORAGE}/${book?.cover}`} />
               </Head>   
     {data ? (
              .....
            )

مشكلة في مكون ال head في nextjs

السؤال

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

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

Recommended Posts

Salah Eddin Beriani2

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية