How to Fix Next.js 14 Lenis Smooth Scroll Hydration Errors

Smooth scrolling with Lenis in Next.js 14 App Router can sometimes trigger hydration mismatch errors or scroll position flickering when SSR and client-side rendering conflict.

Here is a quick guide on how to properly initialize Lenis smooth scroll in Next.js 14 without hydration errors:

Key Steps

1. Use 'use client' at the top of your smooth scroll component or provider.
2. Initialize Lenis inside a useEffect hook to ensure execution only on client side.
3. Clean up the instance on component unmount.

Check out the full detailed implementation checklist and code guide on our blog:
https://www.nexivtech.online/blog/nextjs-14-lenis-smooth-scroll-hydration-fix