reactjs - React Typescript -sovelluksen muuntaminen Nextjs:ksi

Olen uusi Nextjs:ssä ja olen rakentanut web-sovelluksen käyttäen Reactjs + Typescript ja haluan muuntaa tämän Nextjs:ksi. Olen hämmentynyt tiedostorakenteesta, eli mikä menee minne ja asennusosasta. Nykyisellä web-sovelluksella (Reactjs Typescriptillä) on tietokanta (Postdb) ja toiminnallisuuksia kuten:

1. luo uusi muistiinpano
2. kommentoi muistiinpanosta
3. tykätä ja olla pitämättä muistiosta.

Onko olemassa tapaa, jolla voisin muuntaa tämän olemassa olevan projektin sujuvasti Nextj:ksi?

Tässä on myös tiedostorakenteeni

(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

Vastaus #1

Nextjs-sovelluksen pages-hakemisto on liitetty reitteihin (katso tämä linkki), ja olisi parempi jakaa SSR-logiikka jokaisesta React-komponentista erilleen.
Joten mieluummin pages-tiedostoilla olisi reitit ja SSR-logiikka ja components-tiedostoilla mallinnus ja asiakaspuolen logiikka.

Esimerkiksi.

sivut/index.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

komponentit/muistiinpanot/index.tsx

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

komponentit/muistiinpanot/Muistiinpano.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>
  )
}