reactjs - Conversia aplicației React Typescript în Nextjs

Sunt nou în Nextjs și am creat o aplicație web folosind Reactjs + Typescript și vreau să o convertesc în Nextjs. Sunt confuz în legătură cu structura fișierelor, despre ce merge unde și partea de instalare. Aplicația web actuală (Reactjs cu Typescript) are o bază de date (Postdb) și funcționalități precum:

1. creează o notă nouă
2. comentează nota
3. a plăcea și a nu plăcea nota.

Există o modalitate prin care să pot converti acest proiect existent fără probleme la nextjs?

De asemenea, aceasta este structura fișierelor mele

(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

Răspuns #1

Directorul de pagini al Nextjs este asociat cu ruta (vezi acest link), și ar fi mai bine să se separe logica SSR de fiecare componentă React.
Așa că prefer ca fișierul de pagini să aibă ruta și logica SSR, iar fișierul de componente să aibă template-ul și logica de pe partea clientului.

De exemplu.

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

componente/notițe/index.tsx

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

componente/notes/Notă.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>
  )
}