reactjs - Konvertering av React Typescript-applikasjon til Nextjs

Jeg er ny på Nextjs og jeg har laget en webapplikasjon ved bruk av Reactjs + Typescript, og jeg ønsker å konvertere dette til Nextjs. Jeg er forvirret over filstrukturen for hva som skal hvor og installasjonsdelen. Den nåværende webapplikasjonen (Reactjs med Typescript) har en database (Postdb) og funksjonaliteter som:

1. lag en ny notat
2. kommenter på notatet
3. liker og misliker noten.

Finnes det en måte jeg kan konvertere dette eksisterende prosjektet til Next.js på en smidig måte?

Dette er også filstrukturen min

(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

Svar #1

Nextjs sin pages-mappe er knyttet til ruter (se denne lenken), og det ville være bedre å skille SSR-logikk fra hver React-komponent.
Så jeg foretrekker at pages-filen har rute og SSR-logikk, og komponent-filen har templating og klient-side logikk.

For eksempel.

sider/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

komponenter/notater/index.tsx

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

komponenter/notater/Notat.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>
  )
}