This project is a demonstration project of TwicPics Components using Next.js.
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run serve
# build for production
$ npm run build# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn dev
# build for production
$ yarn buildWhat is TwicPics?
TwicPics is a Responsive Image Service Solution (SaaS) that enables on-demand responsive image generation.
With TwicPics, developers only deal with high-resolution versions of their media while end-users receive optimized, perfectly sized, device-adapted versions delivered from a server close to them.
TwicPics acts as an image proxy. It requests your master image, be it on your own web server, cloud storage or DAM, then generates a device-adapted version with best-in-class compression, delivered directly to the end-user from the closest delivery point available.
TwicPics Components is a collection of web components that make it dead easy to unleash the power of TwicPics in your own projects.
Basically, TwicPics components replace img and video tags. They greatly and transparently optimize your CLS by providing LQIP (Low-Quality Image Placeholders) and Lazy Loading out of the box.
Simply replace this:
<img src="https://assets.twicpics.com/examples/football.jpg" />With this:
<TwicImg src="https://assets.twicpics.com/examples/football.jpg" />Thanks to the open source TwicPics Components, delivering responsive images in your Next.js projects has never been easier.
The only requirement is to have a TwicPics account. If you don't already have one, you can easily create your own TwicPics account for free.
An example of configuration is set within _app.jsx file.
All you have to do is set your configuration options to the desired values (see documentation).
All the examples proposed in this project are located in the pages directory.
Feel free to inspire yourself from these different use cases to unleash the power of TwicPics in your own projects.
Fell free to submit an issue or to ask us anything by dropping an email at [email protected].
