Integration mobx , mobx-react-lite

[languid quartz]

Hi @main anchor. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

In Next.js 13, a new directory named app was introduced alongside the pages directory. This new directory introduces support for React's new Server Components architecture, allowing you to build fast, highly-interactive apps with a single programming model.

The app directory works alongside the pages directory to allow for incremental adoption. This means you can opt some routes of your application into the new behavior while keeping other routes in the pages directory for previous behavior.

Here's a basic example of how you might structure your components using the app directory:

// app/components/example-server-component.js
import { ExampleClientComponent } from './components/example-client-component.js'
 
function ExampleServerComponent({ id }) {
 async function updateItem(data) {
 'use server'
 modifyItem({ id, data })
 }
 
 return <ExampleClientComponent updateItem={updateItem} />
}

// app/components/example-client-component.js
'use client'
 
function ExampleClientComponent({ updateItem }) {
 return (
 <form action={updateItem}>
 <input type="text" name="name" />
 <button type="submit">Update Item</button>
 </form>
 )
}

In this example, ExampleServerComponent is a server component that imports a client component ExampleClientComponent. The server component defines an async function updateItem that is passed down to the client component as a prop.

Remember, the App Router takes priority over the Pages Router. Routes across directories should not resolve to the same URL path and will cause a build-time error to prevent a conflict.

For more information, you can refer to the Next.js documentation on routing (https://nextjs.org/docs/app/building-your-application/routing) and React essentials (https://nextjs.org/docs/getting-started/react-essentials).

Please note that the code provided is a general example and may need to be adjusted to fit the specific needs of your application.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@main anchor kapa.ai is still learning and improving, please let us know how it did by reacting below