View Code? Open in Web Editor
NEW
This project forked from peerlisthq/social-link-preview
This repository shows how you can generate dynamic social previews for your NextJS applications
Shell 0.90%
JavaScript 98.08%
CSS 1.01%
social-link-preview's Introduction
Social Previews in NextJS
![Social Link Preview](/public/images/link-preview-example.png)
- Importance to user's information (sense of ownership)
- Better SEO
- Personalisation
- Consistent brand identity
- Better UX outside your website
Which packages we will need?
- React + NextJS
- Puppeteer
- Axios
- AWS S3
How we will achieve the goal
- Save user data
- Check if the fields that needs to be updated in a preview images are updated
- Start generating preview image
- Create an HTML and CSS for that along with user's updated data
- Open the headless browser using puppeter
- Add our HTML to that browser
- Take a screenshot
- Save that screenshot to some file storage (here s3)
- Use that link to access the saved image and add it to the meta tags to respective page.
social-link-preview's People
Contributors