how/where to put models/controllers in next js app? - reactjs

Question

learning javascript development using next.js. I have created a skeleton project, with following structure. what is the best way for development. create model, controllers? where should be the model and controller folders be? or is there a different way to do this in react world?
app
> .next
> node_modules
> pages
> api
> app.js
> public
> src

Answer 1

TL;DR Since nextjs does not impose conventions at this level, it's totally up to you and your team to decide what architecture to adopt and how to implement it and organize it. You can draw inspiration from an MVC-like framework like https://blitzjs.com/, which successfully brings a lot of concepts from the now old and boring Ruby on Rails.
If you think about it, MVC on the server-side fits very well with nextjs.This is how I look at it from a classic Model-View-Controller perspective:
A Controller manipulates your model based on user interaction, stiching together the results and passing them to the view.
In nextjs' terms, pages do fit very well this responsibility, although they do a bit more than that. You can put models wherever you want, lots of entry-level tutorials drop them under lib/.
Consider this example where I've got a page to show users profiles, in this case I'm also interested in doing Static Site Generation. Side note, I'm writing this off the top of my head, so be aware of copy and pasting to run it, it will prolly not work.
// under app/pages/users/[userId].js
import UserProfile from 'components/user-profile';
import User from 'models/user';
export default UserProfile;
// both at request time and build time, preps the props passed to the View.
export const getStaticProps = async ({params}) => {
const user = await User.find(params.id);
return {
props: { user }
}
}
// instructs next to render all user profiles using SSG
export const getStaticPaths = async () => {
const users = await User.findAll();
const paths = users.map(user => `/users/${user.id}`);
return { paths, fallback: false };
}
My team and I like to go a step further, and follow this structure, although we do not interface a database, but the file system and a few third party APIs over REST and GraphQL. Little secret: we tell nextjs which files to look for to load pages, otherwise it goes a bit cray cray.
project
└── app
├── components
│   ├── user-profile.test.tsx
│   └── user-profile.tsx
├── models
│   └── user.ts
│   └── user.test.ts
└── pages
└── users
├── [userId].page.ts
├── get-static-paths.test.ts
├── get-static-paths.ts
├── get-static-props.test.ts
└── get-static-props.ts

Answer 2

React is not an MVC framework, so architecturally it's a bit different. You can still structure it in a MVC way if you prefer, follow flux / redux patterns etc. Something to note that's different about react is it's unidirectional data flow unlike MVC where data is bound between the view and controller.
You also mentioned just starting to learn JS, I would recommend learning the fundamentals of javascript before diving into next.js, maybe even start with react. There are some things to consider when developing a server rendered app, but next definitely does a good job at making it easy.
Next.js also has their site open sourced here: https://github.com/zeit/next-site
I haven't looked at the code too much, but there are some patterns you could look for there.