How to unfurl a URL in NextJS

To unfurl a Next.js TypeScript Tailwind URL in Slack or WhatsApp, you can use Open Graph meta tags in the head of your HTML document. These meta tags provide information about your website to social media platforms and messaging apps, which they can then use to display a preview of your website when someone shares a link.

Here’s an example of how you can set up Open Graph meta tags in a Next.js TypeScript Tailwind project:

1. Install the next-seo package:

npm install next-seo

1. Import the NextSeo component from next-seo in the _app.tsx file:

import { NextSeo } from 'next-seo';

Next wrap app components and pass in title and description

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <NextSeo
        title="My App"
        description="This is my app"
        openGraph={{
          type: 'website',
          url: 'https://myapp.com',
          title: 'My App',
          description: 'This is my app',
          images: [
            {
              url: 'https://myapp.com/images/og-image.jpg',
              width: 1200,
              height: 630,
              alt: 'My App',
            },
          ],
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Thats it . That should do it .

Now when you post your URL in slack, whatsapp or anyy other social media or messaging platform you should see an unfurl preview!’

BTW .. I used this approach in this site at http://www.buzzwin.com when sharing a buzz about your favorite movie or show.