Skip to main content

Next.js

Installation#

1. Install the @flayyer/flayyer module#

Terminal.app
yarn add @flayyer/flayyer

3. Generate smart image URLs for your meta-tags#

Use next/head for appending meta-tags to the <head />, then @flayyer/flayyer to generate the smart image link along with next/router to get the current pathname dynamically.

You can Find your project-slug in your dashboard. Don't have a project yet? Create one here.

This example is on the index page, but it should work on any of your pages as is.

pages/index.js
import React from "react";
import Head from "next/head"
import { useRouter } from "next/router"
import { FlayyerAI } from "@flayyer/flayyer"
export default function IndexPage() {
const flayyer = new FlayyerAI({
project: "your-project-slug",
path: useRouter().asPath,
});
return (
<div>
<Head>
<meta property="og:image" content={flayyer.href()} />
<meta name="twitter:image" content={flayyer.href()} />
<meta name="twitter:card" content="summary_large_image" />
{/* [Recommended] Keep your original og:image handy for your project */
/* <meta name="flayyer:default" content={your-original-og-image} /> */
/* ... */}
</Head>
{/* ... */}
</div>
)
}
note

If you're having trouble, set this up directly on the page handler (inside the pages/ folder) and make sure your og:image and twitter:image meta-tags are not being overwritten elsewhere.

3. Voilà 🎉#

Now you're able to manage your link previews from your dashboard, create content from templates while preserving your brand style and export it as social media formats.

Go to your dashboard 🚀

Advanced usage#

Signed URLs#

The module @flayyer/flayyer supports HMAC and JWT signatures. It's important to instanciate FlayyerAI getServerSideProps so your secret key is not exposed client-side.

To find your secret key, go to your dashboard > your project > Advanced settings > Signed URLS, and enable the signing strategy you desire.

pages/index.js
import Head from "next/head"
import { FlayyerAI } from "@flayyer/flayyer"
export default function IndexPage(props) {
return (
<div>
<Head>
<meta property="og:image" content={props.flayyerHref} />
<meta name="twitter:image" content={props.flayyerHref} />
<meta name="twitter:card" content="summary_large_image" />
{/* [Recommended] Keep your original og:image handy for your project */
/* <meta name="flayyer:default" content={your-original-og-image} /> */
/* ... */}
</Head>
{/* ... */}
</div>
)
}
// This function runs only server-side, it won't be bundled to the client
export async function getServerSideProps(context) {
const flayyer = new FlayyerAI({
project: "your-project-slug",
path: context.resolvedUrl,
secret: "your-secret-key",
strategy: "JWT", // or "HMAC"
});
return {
props: { flayyerHref: flayyer.href() }, // will be passed to the page component as props
}
}
note

You can also instanciate FlayyerAI in getStaticProps (instead getServerSideProps) as it runs at build time. You're invited to extend this guide if you like.

Last updated on by Franco Méndez