Add Twitter card to Next.js project and preview with ngrok
Tags: twitter, nextjs, ngrok, react
Published: 2021-03-13 10:59:57


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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfvkf71vkuckq7sdrokc.png)

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. 

 ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqbtq52e30cob4kfad11.png)
> [CRA **example** from hangi-asi-grubundayim project](https://github.com/batin/hangi-asi-grubundayim/blob/65190926146e258901b2d5be241d67831dc41cf7/public/index.html#L27-L32)

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.
 
```js
## 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>
    );
  }
}
```

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.

```bash
npm install -g ngrok
```

> **2023 Update**

> You need to sign in to `ngrok` first to able to publish your site to the whole world. 

> - https://dashboard.ngrok.com/

> Then paste your auth token into your terminal.

> ```bash
ngrok config add-authtoken token
```

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

```bash
ngrok http 3000 
```

And voilà! 🎉


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nonsivim8mg5x0jmylfa.png)

 
Now I can reach my website from this link.
- "http://1989fa8990cb.ngrok.io"

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](https://cards-dev.twitter.com/validator)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqdaxz96aqtxmlh7w9tk.png)

> **2023 Update**

> This service is [no longer supported by Twitter](https://twittercommunity.com/t/card-validator-preview-removal/175006). You can use [this site](https://www.bannerbear.com/tools/twitter-card-preview-tool/#image_result) instead of.


> ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqby5rdn6sms8cdimw14.png)


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**](https://twitter.com/hasantezcann) account. 

Have a nice day. Happy coding :)