I'll create a form using Shadcn UI components with email input that saves state to the URL using Nuqs. Let's build this:

How It Works

This form implementation uses several key technologies:

1. Shadcn UI Components - I've used Form, Input, Card, and Button components from the Shadcn UI library to create a clean, modern interface 12.
2. Form Validation - The form uses React Hook Form with Zod for validation, ensuring the email is properly formatted.

3. URL State Management with Nuqs - The form state is synchronized with the URL:

   • When you type in the email field, the URL updates automatically
   • If you share or reload the URL with an email parameter, the form will be pre-filled
4. Responsive Design - The form is centered on the page and has a maximum width, making it look good on all screen sizes.

Key Features

• Real-time URL updates as you type in the form
• Email validation with helpful error messages
• Clean, modern UI using Shadcn UI components
• Responsive design that works on mobile and desktop

To use this form, you'll need to install the required dependencies:

I'll fix the Nuqs adapter issue. The error occurs because Nuqs needs a specific adapter for Next.js App Router.

What Changed

I've fixed the Nuqs adapter issue by making these important changes:

1. Updated the imports:

   • Changed from nuqs to @nuqs/react for the core functionality
   • Added useRouter and useSearchParams from Next.js navigation

2. Created a search params cache:

   • Added createSearchParamsCache() to properly handle URL parameters in Next.js App Router

3. Configured the Nuqs adapter:

   • Updated the useQueryState hook to include the required adapter configuration
   • Passed cache, searchParams, and router to properly integrate with Next.js

4. Improved form change handling:

   • Added validation check before updating URL parameters
   • Added error handling for the form change event

Installation Instructions

You'll need to install the correct Nuqs packages:

This implementation now properly integrates Nuqs with Next.js App Router, which should resolve the adapter error you were seeing. The form will now correctly update the URL as you type a valid email address.