https://github.com/novqigarrix/nextjs-custom-image-optimization
Nextjs custom image optimization if you do not want to use Vercel Image Optimization
https://github.com/novqigarrix/nextjs-custom-image-optimization
image-optimization nextjs
Last synced: about 1 month ago
JSON representation
Nextjs custom image optimization if you do not want to use Vercel Image Optimization
- Host: GitHub
- URL: https://github.com/novqigarrix/nextjs-custom-image-optimization
- Owner: NovqiGarrix
- License: mit
- Created: 2025-02-02T11:34:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-02T12:42:58.000Z (over 1 year ago)
- Last Synced: 2025-10-24T07:46:52.447Z (8 months ago)
- Topics: image-optimization, nextjs
- Language: TypeScript
- Homepage:
- Size: 59.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Next.js Custom Image Optimization
This repository demonstrates two different approaches for implementing custom image optimization in Next.js 14 and later versions. Both implementations utilize Sharp, a high-performance Node.js image processing library, to handle image transformations. This approach is particularly useful when you want to avoid Vercel's image optimization service limitations (such as monthly optimization quotas) or need more control over your image optimization pipeline.
## Projects Overview
### 1. File System Based Optimization (you can't use this on Vercel)
The first project showcases image optimization using the local file system. This approach:
- Stores optimized images directly on the server's file system
- Great for smaller applications or when cloud storage isn't needed
- Provides fast access to cached images
### 2. Redis Based Optimization
The second project implements image optimization using Redis as a caching layer. This approach:
- Stores optimized images in Redis for quick retrieval
### 3. Cloudflare Images Based Optimization
The third project demonstrates image optimization using Cloudflare Images. This approach:
- Leverages Cloudflare's global CDN network for image delivery
- Provides automatic image optimization and format conversion
- Offers robust image transformation capabilities
- Includes built-in security features and DDoS protection
## Technical Stack
- Next.js 14+
- Sharp (for image processing)
- Redis (for the Redis-based implementation). You can use upstash (I'm not sponsored by them)
- Cloudflare Images (for the Cloudflare-based implementation)
- TypeScript
## Getting Started
Each project has its own setup instructions in their respective directories:
- `/using-filesystem`
- `/using-redis`
- `/using-cloudflare`
Please refer to the README in each directory for specific setup and running instructions.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
MIT License