I wanted to build a high-performance Movie Database that felt like a native app – instant search, blurred backdrop UI, and a headless content management system. The goal was to migrate from a standard React setup to the cutting-edge Next.js 15 architecture using Sanity.io as the backend.
The “Next.js 15” Breaking Change The biggest hurdle was the migration to Next.js 15. In previous versions, accessing URL query parameters (like ?query=batman) was synchronous. However, Next.js 15 introduced a breaking change where searchParams became a Promise.
My initial build failed with type errors because I was trying to access searchParams.query directly.
The Fix
I re-architected the page component to handle the asynchronous nature of the new router:
// The Old Way (Next.js 14) ❌
export default function Home({ searchParams }: { searchParams: { query: string } }) {
const query = searchParams.query;
}
// The Next.js 15 Way ✅
interface HomeProps {
searchParams: Promise<{ query?: string }>;
}
export default async function Home({ searchParams }: HomeProps) {
const resolvedParams = await searchParams; // Await the promise
const query = resolvedParams?.query || "";
// Now fetch data safely
const data = await getMovie(query);
}
The “Netflix” UI Effect To give the detail page a premium feel, I implemented a dynamic backdrop strategy. Instead of fetching a separate background image, I used the movie poster, scaled it to fill the viewport, and applied a heavy CSS blur (blur-xl) with a dark gradient overlay. This creates an immersive, color-matched atmosphere for every movie automatically.
The Result
Performance: 100/100 Lighthouse Score.
Scale: Automatically imported 100+ movies via a custom Node.js script.
Speed: Instant search filtering using Server Actions and Debouncing.
