Question

我是Nextjs的新手，我已经使用Reactjs + Typescript构建了一个Web应用程序，我想将其转换为Nextjs。我对安装位置和安装位置的文件结构感到困惑。当前的Web应用程序（带有Typescript的Reactjs）具有数据库（Postdb）和类似以下功能：

创建新笔记
对笔记的评论
喜欢和不喜欢笔记。

有没有办法可以将现有项目顺利转换为nextjs？

这也是我的文件结构

encodeURIComponent

Answer 1

Nextjs的pages目录与路由相关联（请参见此link），最好从每个react组件中拆分SSR逻辑。
因此，我更喜欢页面文件具有路由和SSR逻辑，而组件文件具有模板和客户端逻辑。

例如。

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>
  )
}

将React Typescript应用程序转换为Nextjs

1 个答案: