ค้นหาเว็บไซต์

javascript - แอป NextJS React ที่ใช้ styled component ไม่เรนเดอร์ถูกต้อง: คำเตือน: Prop `className` ไม่ตรงกัน

ในแอป NextJS ของฉันที่ _app.tsx ฉันกำลังใช้ import Router from 'next/router' เพื่อแสดงสไตล์ปุ่มนำทางที่แตกต่างกันสำหรับเมนูด้านบนของฉัน

เมื่อเส้นทางคือ / การเรนเดอร์ทำงานได้ แต่เมื่อฉันอยู่ที่ /about การเรนเดอร์ไม่ทำงานและฉันได้รับข้อผิดพลาดดังต่อไปนี้ แม้ว่าโลจิกแบบบูลีนจะทำงานถูกต้อง

ข้อผิดพลาด :

คำเตือน: Prop className ไม่ตรงกัน เซิร์ฟเวอร์: "nav__NavActive-sc-6btkfp-2 gJVDzS nav__NavLink-sc

อ่านต่อไป →

express - ไม่สามารถใช้ NextJs + ExpressJs กับ typescript และ webpack

ฉันต้องการตั้งค่า ExpressJs กับ TypeScript เพื่อใช้ IOC กับ InversifyJS และ Nextjs กับ es6 ฉันยังต้องการใช้ webpack สำหรับการรวมไฟล์ เนื่องจากฉันต้องนำเข้า Next ใน server.ts เพื่อทำการเรนเดอร์ฝั่งเซิร์ฟเวอร์ ดังนั้นฉันจึงตั้งค่า TypeScript สำหรับ Nextjs ด้วย แต่ฉันต้องการให้ไฟล์ .js และ .jsx ในโฟลเดอร์ cli

อ่านต่อไป →

reactjs - การแปลงแอปพลิเคชัน React Typescript เป็น Nextjs

ฉันเป็นมือใหม่กับ Nextjs และฉันได้สร้างเว็บแอปพลิเคชันโดยใช้ Reactjs + Typescript และฉันต้องการแปลงสิ่งนี้เป็น Nextjs ฉันสับสนเกี่ยวกับโครงสร้างไฟล์ว่าควรวางอะไรตรงไหนและส่วนการติดตั้ง แอปพลิเคชันเว็บปัจจุบัน (Reactjs กับ Typescript) มีฐานข้อมูล (Postdb) และฟังก์ชันการทำงาน เช่น:

  1. สร้างบันทึกใหม่
  2. อ่านต่อไป →

reactjs - NextJS: เพิ่มค่าสตริงคิวรีใหม่ไปยัง asPath ที่มีอยู่หรืออัปเดตสตริงคิวรีที่มีอยู่

ฉันค่อนข้างงงเกี่ยวกับวิธีการทำงานของระบบเราต์เตอร์ของ NextJS:

ฉันมีบทความตามหมวดหมู่ที่สามารถเป็นได้:

Medical Charity Wedding Funeral

ฉันมีแถบนำทางที่ผู้ใช้สามารถแสดงบทความตามหมวดหมู่ และยังสามารถค้นหาตามคำสำคัญได้ ฟีเจอร์หมวดหมู่ทำงานได้อย่างสมบูรณ์แบบ

นี่คือรูปร่างของแถบเมนูของฉัน:

อ่านต่อไป →

reactjs - ทำไม setState จึงไม่ทำงานในกรณีนี้ใน NextJS?

สวัสดีทุกคน! ฉันมีปัญหา - setState ไม่ทำงานในแอป NextJS + TS ของฉัน ฉันลองใช้ state ผ่าน ReactHooks แต่ก็ไม่ได้ผล แปลงคอมโพเนนต์เป็นคลาสก็ยังไม่ได้ผล ฉันลองเรียกใช้งานคอมโพเนนต์นี้บนแอป CRA ที่สร้างใหม่โดยไม่ใช้ TS ทุกอย่างทำงานได้ที่นั่น

คอมโพเนนต์รับอาร์เรย์ผ่าน p

อ่านต่อไป →

typescript - พารามิเตอร์ในการค้นหาใน pathname ของ Nextjs ถูกถอดรหัส

เรากำลังดึงข้อมูลบางส่วนจาก API ซึ่งเราใช้ URL เพื่อไปยังส่วนต่าง ๆ ของแอปพลิเคชัน ในคอมโพเนนต์ลิงก์ของเรา เรากำลังส่ง URL เป็น <Link href={{ pathname: url , someOtherProperty }} /> โดย URL จะมีลักษณะเหมือน /path-to-page?query=value แต่เมื่อผมดูบนฝั่งไคลเอนต์ ผมเห็นว่า URL ถูกส่งกลั

อ่านต่อไป →

reactjs - วิธีทำให้ Nextjs แสดงข้อผิดพลาดของประเภท TypeScript เมื่อบันทึก

ฉันกำลังทำงานกับโปรเจกต์ Nextjs Typescript และพบว่าข้อผิดพลาดของประเภทไม่ได้หยุดการทำงานของแอปเหมือนกับข้อผิดพลาดประเภทอื่น ซึ่งนั่นเป็นปัญหาสำหรับฉัน แต่เป็นปัญหาที่ใหญ่กว่าตั้งแต่เกิด TypeError ในเวลาสร้างโปรเจกต์ การค้นพบว่าโปรเจกต์มีข้อผิดพลาดของประเภทส่วนใหญ่เกิดขึ้นเมื่อจำเป็นต้องทำการ deploy

มีวิธีที่จะทำให้ typescript errors หยุดการทำงานของแอปในขณะที่กำลังพัฒนาได้ไหม? ฉันควรใช้การตั้งค่าแบบไหนเพื่อให้ถึงจุดนี้?

นั่นคือ tsconfig.json ข

อ่านต่อไป →

next.js - ขณะสร้างแอปพลิเคชัน NextJS ในพื้นที่ทำงาน Nx - ได้รับข้อผิดพลาด: ไม่พบโมดูล 'typescript'

ขณะสร้าง @nrwl/workspace ใหม่พร้อมแอป next JS - ผมได้รับข้อผิดพลาด Error: Cannot find module 'typescript' มีใครเจอปัญหาเดียวกันไหม ?

ขั้นตอน -

  1. สร้างพื้นที่ทำงาน nx ใหม่
  2. สร้างแอปใหม่ด้วย NextJS Preset
  3. สร้างแอปด้วย nx run <app-name>:build
  4. สร้างภาพจาก dist/apps/<app-name> หรือเพียงแค่คัดลอก dist ไปที่ใดที่หนึ่ง
  5. รัน yarn หรือ npm install
  6. หลังจากติดตั้งโมดูลแล้ว - เริ่มแอปพลิเคช

    อ่านต่อไป →

typescript - ฉันจะปิดการใช้งาน resolveJsonModule สำหรับไฟล์ JSON เพียงไฟล์เดียวในแอปพลิเคชัน NextJs ได้อย่างไร?

ฉันกำลังสร้างแอปพลิเคชัน Next.js และนำไปใช้งานด้วย Vercel ทุกอย่างทำงานได้ดีจนกระทั่งฉันเพิ่งทำการเปลี่ยนแปลงไฟล์ JSON ขนาดใหญ่บางไฟล์ ซึ่งทำให้ขนาดเพิ่มขึ้นประมาณ 20% การเพิ่มขึ้นของขนาดนี้ดูเหมือนจะทำให้เกิดข้อจำกัดบางอย่าง และตอนนี้ฉันได้รับข้อผิดพลาด Webpack 5 ซึ่งดูเหมือนว่าจะเกิดจากการแก้ไขประเภทของ TypeScript

ฉันกำลังนำเข้าไฟล์ JSON โดยตรงด้วยการ import จากสิ่งที่ฉันสามารถรวบรวมได้ ดูเหมือนว่า compilerOption resolveJsonModule ใน tsconfig.json มีหน้าที่บอก webpack ให้พยายามแก้ไขปร

อ่านต่อไป →

reactjs - วิธีส่งคอมโพเนนต์ Nextjs พร้อมคุณสมบัติที่กำหนดเองเป็น Children

เพื่อเพิ่มคุณสมบัติ 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}>

อ่านต่อไป →