將 React Typescript 應用程序轉換為 Nextjs

Question

我是 Nextjs 的新手，我已經使用 Reactjs + Typescript 構建了一個 Web 應用程序，我想將其轉換為 Nextjs。 我對去哪里和安裝部分的文件結構感到困惑。 當前的 Web 應用程序（帶有 Typescript 的 Reactjs）有一個數據庫（Postdb）和如下功能：

1. 創建新筆記
2. 注釋注釋
3. 喜歡和不喜歡筆記。

有沒有辦法可以將這個現有項目順利轉換為nextjs？

這也是我的文件結構

(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 的 pages 目錄與 route 相關聯（見此鏈接），最好將 SSR 邏輯從每個 react 組件中分離出來。
所以我更喜歡頁面文件有路由和 SSR 邏輯，組件文件有模板和客戶端邏輯。

例如。

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

組件/注釋/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>
  )
}