javascript - אפליקציית NextJS React עם Styled Component לא מציגה נכון: אזהרה: הפרופ `className` לא תואם
ביישום NextJS שלי ב־_app.tsx אני משתמש ב־import Router from 'next/router' כדי להציג סגנונות כפתורי ניווט שונים בתפריט העליון שלי.
כאשר הנתיב הוא / ההצגה עובדת, עם זאת כאשר אני ב-/about ההצגה אינה עובדת ואני מקבל את השגיאה הבאה. למרות שהלוגיקה הבוליאנית עובדת כראוי.
שגיאה :
אזהרה: הפרופ className לא תאם. שרת: "nav__NavActive-sc-6btkfp-2 gJVDzS nav__NavLink-sc-6btkfp-1 bvpMWI" לקוח: "na
קרא עוד →express - לא ניתן להשתמש ב-NextJs + ExpressJs עם TypeScript ו-Webpack
אני רוצה להגדיר ExpressJs עם TypeScript כדי להשתמש ב-IOC עם InversifyJS ו-Nextjs עם es6. אני גם רוצה להשתמש ב-webpack לארוז. מאחר שאני חייב לייבא את Next ב-server.ts כדי לעשות רינדור בצד השרת, אני מגדיר TypeScript עבור Nextjs גם כן, אך אני רוצה שקבצי .js ו-.jsx בתיקיית הלקוח יוכלו לכלול תחביר es6.
אב
קרא עוד →reactjs - המרת אפליקציית React Typescript ל-Nextjs
אני חדש ב-Nextjs ובניתי אפליקציית ווב באמצעות Reactjs + Typescript ואני רוצה להמיר את זה ל-Nextjs. אני מבולבל לגבי מבנה הקבצים של מה נשאר איפה וחלק ההתקנה. אפליקציית הווב הנוכחית (Reactjs עם Typescript) כוללת מסד נתונים (Postdb) ופונקציות כמו:
- צור פתק חדש
- הגב על הפתק
- לאהוב ולשנוא את הפתק קרא עוד →
reactjs - NextJS: לדחוף ערך חדש של מחרוזת שאילתה ל-asPath קיים או לעדכן את מחרוזת השאילתה הקיימת
אני קצת אבוד לגבי איך מערכת הנתיבים של NextJS עובדת:
יש לי מאמרים לפי קטגוריות שיכולות להיות:
Medical Charity Wedding Funeralיש לי סרגל ניווט שבו המשתמש יכול להציג מאמרים לפי קטגוריה, ויכול גם לחפש לפי מילות מפתח. תכונת הקטגוריה פועלת בצורה מושלמת.
זוהי הדרך שבה תפריט הניווט שלי נראה:
קרא עוד →reactjs - למה setState לא עבד במקרה הזה ב-NextJS?
שלום לכולם! יש לי בעיה - setState לא עובד באפליקציה שלי של NextJS + TS. ניסיתי את ה-state שלי דרך ReactHooks, אבל כלום לא עבד, שיניתי את הרכיב למחלקות, אבל כלום לא עבד. ניסיתי להריץ את הרכיב הזה באפליקציה חדשה של CRA בלי TS. שם הכל עבד.
הרכיב מקבל את המערך דרך props
קרא עוד →typescript - פרמטרים בשאילתה ב-Nextjs בנתיב מפוענחים
אנחנו מקבלים קצת נתונים מ-API שבו אנחנו משתמשים ב-URL כדי לנווט באפליקציה. ברכיב ה-Link שלנו אנחנו מעבירים URL כ-<Link href={{ pathname: url , someOtherProperty }} /> כאשר ה-URL נראה כ-/path-to-page?query=value, אבל כשאני מסתכל בצד הלקוח אני רואה שה-URL מוחזר כ-/path-to-page%3
קרא עוד →reactjs - איך לגרום ל-Nextjs להציג שגיאות טיפוס TypeScript בעת שמירה
אני עובד עם פרויקט Nextjs ב-TypeScript ומבחין שהשגיאות סוג לא עוצרות את ביצוע האפליקציה כשמדובר בסוג אחר של שגיאה, זה בעיה עבורי, אבל זו בעיה גדולה יותר מכיוון שה-TypeError מתרחשת בזמן הבנייה, לגלות זאת יש שגיאות סוג בעיקר כשצריך לבצע פריסה.
האם יש דרך לגרום לשגיאות TypeScript לחסום את ביצוע האפליקציה בזמן הפיתוח? איזו הגדרה עלי להשתמש כדי להגיע לכך?
זה ה-tsconfig.json שלי
{ "compilerOptions": { "target" קרא עוד →next.js - בזמן בניית אפליקציית NextJS ב-Nx workspace - מתקבלת שגיאה: לא ניתן למצוא את המודול 'typescript'
בעת יצירת @nrwl/workspace חדש עם אפליקציית Next JS - אני מקבל את השגיאה Error: Cannot find module 'typescript'. האם מישהו נתקל באותה בעיה?
צעדים -
- צור סביבת עבודה חדשה של nx
- צור אפליקציה חדשה עם התבנית של NextJS
- בנה את האפליקציה עם nx run <app-name>:build
- צור תמונה מ-dist/apps/<app-name> או פשוט העתק את הקובץ שנמצא ב-dist למקום כלשהו
- הפעל yarn או npm install
- לאחר שהמודולים קרא עוד →
typescript - איך מכבים את resolveJsonModule עבור קובץ JSON אחד בלבד באפליקציית NextJs?
אני בונה אפליקציית Next.js, ומפרסמת עם Vercel. הכל עבד טוב עד לאחרונה, כאשר עשיתי כמה שינויים בקובץ JSON גדול שהגדילו את גודלו בכ-20%. ההגדלה בגודל נראית כמו ששברה סוג מסוים של מגבלה, וכעת אני מקבל שגיאות של Webpack 5, שנראות כמו בשל פתרון סוגי TypeScript.
אני מייבא את קובץ ה-JSON ישירות עם ייבוא. ממה שהצלחתי להבין, נראה שהאפשרות resolveJsonModule בקובץ tsconfig.json אחראית לאומר ל-webpack לנסות לפתור את סוגי קובצי ה-JSON בזמן אמת, כך שבאופן משוער הוא יכול לבדוק שאני עושה דברים הגיוניים
קרא עוד →reactjs - איך להעביר רכיב Nextjs עם תכונות מותאמות אישית כילדים
להוסיף מאפיין Auth לרכיבים שלי. יצרתי ממשק
interface AuthAppProps extends Omit<AppProps, "Component"> { Component: AppProps["Component"] & { Auth: boolean }; }כדי שאוכל לבצע
const App: React.FC<AuthAppProps> = (props) =>{ const { Component, pageProps: { session, ...pageProps }, } = props; return ( <SessionProvider session={session}> {Component.Auth ? ( <A קרא עוד →