את הדוגמה הזאת אני מודה שאני לא לגמרי מבין אבל מפרסם לפי תצפית. בקוד ריאקט צד-לקוח רגיל ב vite הייתי רגיל לכתוב:

import { memo } from 'react';

const NewMessage = memo(() => {
  return <p>demo</p>;
})

NewMessage.displayName = "foo";

export default NewMessage;

והקומפוננטה בכלי הפיתוח הופיעה עם השם foo. וכן ברוב המקרים כדאי לבחור שם את שם הקומפוננטה המקורי כדי שהיא תיקרא בשם האמיתי שלה ולא באיזה _c עם תוספת Memo.

כשהעברתי את אותו קוד ל next זה לא עבד ושם הקומפוננטה שהופיע בכלי הפיתוח היה _c. הפיתרון היה להגדיר את ה displayName על הקומפוננטה לפני שמפעילים memo באופן הבא:

'use client';

import { memo } from 'react';

const NewMessage = () => {
  return <p>demo</p>;
}
NewMessage.displayName = 'foo';

export default memo(NewMessage);

ה AI האשים את מנגנון ה build של next, אבל אני לא בטוח שהוא צודק. אם יש לכם רעיונות אל תתביישו לשתף בתגובות.