Next.js & React 19 Integration
Custom image loader helper, Edge runtime, Server Actions, and React Suspense.
Overview
DriveLoader perfectly integrates into Next.js App Router. Use createDriveNextLoader() to let Next.js Image component handle Drive links.
Code Example
nextjs-react19.tsx
| 1 | import Image from 'next/image'; |
| 2 | import { createDriveNextLoader } from '@driveloader/react'; |
| 3 | |
| 4 | const driveLoader = createDriveNextLoader(); |
| 5 | |
| 6 | export function ProfileImage({ src }: { src: string }) { |
| 7 | return <Image loader={driveLoader} src={src} alt="Next" width={300} height={300} />; |
| 8 | } |
Best Practices
- •Always pass explicit width and height when using Next.js Image.