https://github.com/twicpics/components-demo-next
Demonstration of TwicPics components in a Next.js project.
https://github.com/twicpics/components-demo-next
Last synced: about 2 months ago
JSON representation
Demonstration of TwicPics components in a Next.js project.
- Host: GitHub
- URL: https://github.com/twicpics/components-demo-next
- Owner: TwicPics
- License: mit
- Created: 2022-12-13T20:31:08.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-11T11:26:06.000Z (3 months ago)
- Last Synced: 2025-02-11T12:31:16.849Z (3 months ago)
- Language: JavaScript
- Size: 740 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# TwicPics Components + Next.js
This project is a demonstration project of [TwicPics Components](https://www.twicpics.com/docs/components/next?utm_source=github&utm_medium=organic&utm_campaign=components) using [Next.js](https://nextjs.org/).
## How to build
### Using npm
```bash
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run serve
# build for production
$ npm run build
```
### Using yarn
```bash
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn dev
# build for production
$ yarn build
```
## Overview
### What is [TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components)?
[TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) is a **Responsive Image Service Solution** (SaaS) that enables **on-demand responsive image generation**.
With [TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components), 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](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) 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.
### What is TwicPics Components?
TwicPics Components is a **collection of web components** that make it dead easy to unleash the power of [TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) 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:
```html
```
With this:
```html
```
Thanks to the open source [TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) Components, delivering responsive images in your [Next.js](https://nextjs.org/) projects has never been easier.
## TwicPics configuration
### Requirement
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](https://account.twicpics.com/signup).
### Configuring `@twicpics/components`
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](https://www.twicpics.com/docs/components/next?utm_source=github&utm_medium=organic&utm_campaign=components#setup-options)).
## Examples
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](https://www.twicpics.com/) in your own projects.
## Questions and feedback
Fell free to submit an [issue](https://github.com/TwicPics/components/issues) or to ask us anything by dropping an email at [[email protected]](mailto:[email protected]).
## Licence
[![License][license-image]][license-url]
[license-image]: https://img.shields.io/npm/l/@twicpics/components.svg?style=flat-square
[license-url]: https://raw.githubusercontent.com/twicpics/components/master/LICENSE