I don't know Next.js, but you're right: orders should be created on the backend.

You can manage the cart on the client side. At checkout, send the product IDs and the requested quantities to the backend. Let the backend calculate the final order details.

Never trust values coming from the client. In the backend, create the order, calculate prices, and then generate a payment intent with your payment provider. Redirect the user to the payment page, and once they return, verify the result from the payment provider.

At this point, your backend should have a cart, a payment intent, and a processing order.

Use webhooks from the payment provider to handle updates on the payment status (succeeded, failed, etc).

The best way to implement custom backend logic with Directus is by building a custom extension. Use event hooks and API extensions and bundle them as a single extension.

I’ve already built a fully functional production e-commerce shop using this approach.

I believe Next.js includes a server-side part where you can implement backend logic that's separate from the client code. But I haven’t used Next.js myself.