Next.js | PreviewLinks

Integrating with Next.js is easy. This is because Next.js uses Node.js to generate dynamic, or static pages which come from the server.

Just make sure you call PreviewLinks from either getServerSideProps or getStaticProps.

Here's an example using getServerSideProps:

import { previewlinks } from '@/lib/previewlinks'

export async function getServerSideProps(context) {
    const preview = previewlinks.signedImageUrl({
        siteId: 167,
        templateId: 234,
        fields: {
            'previewlinks:title': 'Hello from Node.js!',
            'previewlinks:subtitle': 'This is an example...',
        },
    })

    return {
        props: { preview },
    }
}

export default function Home({ preview }) {
    return (
        <Head>
            <meta name="twitter:image" content={preview} />
            <meta property="og:image" content={preview} />
        </Head>
    )
}

We recommend to make your own lib/previewlinks.js instance which you can import across components, otherwise you'd need to specify the API token each time you generate an image.

// lib/previewlinks.js

const { PreviewLinks } = require('@previewlinks/node-previewlinks')

const previewlinks = new PreviewLinks({ apiToken: '<YOUR_API_TOKEN>' })

export { previewlinks }