Skip to content

README.md

Latest commit

 

History

History
67 lines (47 loc) · 2.76 KB

README.md

File metadata and controls

67 lines (47 loc) · 2.76 KB
Raw

Next.js Video Optimization

Demo app for the blog post: The Complete Guide to Video Optimization in Next.js.

Demonstrates resize, format conversion, audio stripping, lazy loading, and adaptive bitrate streaming all via URL-based transformations with ImageKit and the @imagekit/next SDK. Every section measures the actual file size so you can see the savings in real numbers.

What's on the page

Section What it shows
Summary table Auto-populated comparison of all variants including format, size and savings %
01 — Raw baseline Unoptimized source via ?tr=orig-true
02 — ImageKit default No explicit transforms. Auto format negotiation + default compression
03 — Resize width: 1280 downsized to match the viewport
04 — Resize + strip audio width: 1280, audioCodec: 'none' resized and removed the audio track
05 — Lazy loading Two videos with an Intersection Observer. Throttle to Slow 3G in DevTools to see the second video load on scroll.
06 — HLS streaming ImageKit Video Player with adaptive bitrate sr-360_480_720_1080

Setup

  1. Clone the repo and navigate to this folder:

    cd nextjs-video-optimization

  2. Install dependencies:

    npm install

  3. Create .env.local in the project root:

    NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your_imagekit_id
NEXT_PUBLIC_IMAGEKIT_ID=your_imagekit_id
NEXT_PUBLIC_DEMO_VIDEO_PATH=/path/to/your/video.mp4

  4. Start the dev server:

    npm run dev

    Open http://localhost:3000.

Environment variables

Variable Description
NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT Your ImageKit URL endpoint, e.g. https://ik.imagekit.io/your_imagekit_id
NEXT_PUBLIC_IMAGEKIT_ID Your ImageKit account ID (used by the Video Player)
NEXT_PUBLIC_DEMO_VIDEO_PATH Path to the source video in your ImageKit media library

Customization

To use a different source video, update NEXT_PUBLIC_DEMO_VIDEO_PATH in .env.local. The video should ideally be a high-resolution (1080p or 4K) MP4 so the optimization savings are visible.

Related