Try to break down your pages into smaller building blocks - components which are tightly coupled to a page can be placed within the folder components/interfaces/xxx/... (Refer to the README.md under the components folder)
Keep to using useState hooks for any UI related logic, do not create MobX local stores to handle UI logic.
Template for building pages
import{NextPage}from'next'import{observer}from'mobx-react-lite'import{useStore,withAuth}from'hooks'// Import the corresponding layout based on the pageimport{Layout}from'components/layouts'// Import the main building blocks of the pageimport{ ... }from'components/interfaces/xxx'// Import reusable UI components if neededimport{ ... }from'components/ui/xxx'// Name your page accordinglyconstPage: NextPage=()=>{// Access the store via the useStore hookconst{ meta }=useStore()return(<Layout><div>Page content</div></Layout>)}exportdefaultwithAuth(observer(Page))