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:
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
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>
)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.