DEV Community

loading...
Cover image for Add Twitter card to Next.js project and preview with ngrok

Add Twitter card to Next.js project and preview with ngrok

Hasan TEZCAN
・2 min read

Don't you see fancy pictures and descriptions like this when you paste your website link somewhere?

image

Today we are learning how to get a fancy link card like this. And preview while you build it.

In this example, I will integrate the Twitter card to the nextJs project.

Let's get start!

1. Add Twitter card to nextJs project

Basically, we are adding the meta tag into the HEAD element. But unlike CRA(Create React App), we don't have any file name with the public directory while working with nextJs, so we can't edit index.html directly in it.

CRA example from hangi-asi-grubundayim project

For this previous reason, we will use the _document.js file under the pages directory. If you don't have this file you can create it like this.

## pages/_document.js

import Document, { Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  render() {
    return (
      <html lang="en">
        <Head>
           <meta name="twitter:card" content="summary_large_image" />
           <meta name="twitter:site" content="@YOUR_TWITTER_USERNAME" />
           <meta name="twitter:title" content="TITLE_FOR_YOUR_PAGE" />
           <meta name="twitter:description" content="DESCRIPTION_FOR_YOUR_PAGE" />
           <meta name="twitter:image" content="URL_FOR_YOUR_IMAGE" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

After adding this file, your Twitter card will appear but you might want to see a live render while you are working on it.

You can provide it in several ways but now we will choose the ngrok.

2. Deploy via ngrok

What is ngrok?

https://ngrok.com/
https://www.npmjs.com/package/ngrok

Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels.

You can share your development workspace on the internet with one click.

npm install -g ngrok
Enter fullscreen mode Exit fullscreen mode

Then you can serve your preview port. For example, I used 3000 port for this project and I serve 3000 port with ngrok.

ngrok http 3000 
Enter fullscreen mode Exit fullscreen mode

And voilà! 🎉

image

Now I can reach my website from this link.

Okay now I have a live preview that I have shared to the whole internet so I can test my Twitter card from twitter.com/validator

image

Okay, that's it. You can add a Twitter card and manipulate live like that. I hope that was helpful for you.

If you like this article please like and if you want to follow my content you can follow from dev.to account or Twitter account.

Have a nice day. Happy coding :)

Discussion (1)

Collapse
cerbivore profile image
Cristian Șerb

I don't know how you managed to make this work with ngrok. This is not working for me. It seems ngrok is blocking access