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

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

สร้างบันทึกใหม่
แสดงความคิดเห็นเกี่ยวกับบันทึก
ชอบและไม่ชอบบันทึกนั้น

มีวิธีใดบ้างที่ฉันสามารถแปลงโปรเจกต์ที่มีอยู่ให้เป็น Next.js ได้อย่างราบรื่น?

นี่ก็เป็นโครงสร้างไฟล์ของฉันด้วย

(New-App)
 * node_modules
 * public
   * index.html
   * manifest.json
   * robots.txt
 * src
   * App.tsx
   * db.tsx
   * serviceWorker.ts
   * index.tsx
   * components
       *Notes.tsx
       *Header.tsx
       *List.tsx

   *pages
       *index.tsx
       *Quest.tsx
       *Page.tsx

    * test (has all the test files)
    * images

 *build

คำตอบ #1

ไดเรกทอรี pages ของ Nextjs ถูกเชื่อมโยงกับเส้นทาง (ดูลิงก์นี้) และจะดีกว่าถ้าแยกตรรกะ SSR ออกจากคอมโพเนนต์ React แต่ละตัว
ดังนั้นฉันจึงชอบให้ไฟล์ pages มีเส้นทางและตรรกะ SSR และไฟล์ components มีการสร้างเทมเพลตและตรรกะฝั่งลูกค้า

ตัวอย่างเช่น

หน้า/ดัชนี.tsx

import Notes from '../components/notes'
function HomePage({ notes }) {
  return (
    <div>
      <Notes notes={notes}></Notes>
    </div>
  )
}

HomePage.getInitialProps = async ({ req }) => {
  // DO SSR
  const res = await fetch('https://some/api/endpoint')
  const json = await res.json()
  return { notes: json.notes }
}

export default HomePage

ส่วนประกอบ/บันทึก/index.tsx

import Note from './Note';
export default (props) => {
  return (
    <div>
    {
      props.notes && props.notes.map((note) => <Note note={note}></Note>)
    }
    </div>
  )
}

ส่วนประกอบ/บันทึก/Note.tsx

export default (props) => {
  return (
    <div>
      <p>comment {props.note.comment}</p>
      <p>like {props.note.like}</p>
      <p>dislike {props.note.dislike}</p>
    </div>
  )
}