将 React Typescript 应用程序转换为 Nextjs

Question

I am new to Nextjs and I have built a web application using Reactjs + Typescript and I want to convert this to Nextjs. I am confused about the file structure of what goes where and the installation part. The current web application (Reactjs with Typescript) has a database(Postdb) and functionalities like:

1. create a new note
2. comment on the note
3. like and dislike the note.

Is there a way that I can convert this existing project smoothly to nextjs?

Also this is my file structure

(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

Answer 1

Nextjs's pages directory is associated with route (see this link ), and it'd be better spliting SSR logic from each react component.
So I prefer pages file have route and SSR logic and components file have templating and client-side logic.

For example.

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

components/notes/index.tsx

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

components/notes/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>
  )
}