I'll create a web app for your movie recommendation system using Next.js and React. This app will provide a user-friendly interface for users to input their preferences and view movie recommendations.

Let's start by creating the main components of the app:

This web app provides a simple interface for users to input their movie preferences and view recommendations. Here's a breakdown of the components:

1. app/page.tsx: This is the main page of the app, which renders the MovieRecommendation component.
2. components/MovieRecommendation.tsx: This component handles the user input and displays the movie recommendations. It uses the useState hook to manage the state of the preferences and recommendations.
3. app/api/recommend/route.ts: This is a mock API endpoint that simulates the interaction with your movie recommendation model. In a real-world scenario, you would replace this with actual calls to your machine learning model.

To integrate your actual movie recommendation system:

1. Replace the mock data in the app/api/recommend/route.ts file with actual calls to your machine learning model.
2. Ensure your model can accept user preferences as input and return a list of recommended movies.
3. If your model requires more specific inputs, you can modify the MovieRecommendation component to include additional form fields.

This app provides a basic structure that you can build upon. You might want to add features like:

• User authentication
• Saving user preferences
• More detailed movie information (posters, descriptions, etc.)
• Pagination for recommendations
• Filters for sorting recommendations

Remember to style your components appropriately and ensure the app is responsive for various screen sizes. You can use Tailwind CSS classes (which are already set up in this Next.js project) to further customize the appearance of your app.