DEV Community

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

Posted on • Updated on

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

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


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">
           <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" />
          <Main />
          <NextScript />
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?

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

2023 Update

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

Then paste your auth token into your terminal.

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.

ngrok http 3000 
Enter fullscreen mode Exit fullscreen mode

And voilà! 🎉

Image description

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


2023 Update

This service is no longer supported by Twitter. You can use this site instead of.

Image description

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 account or Twitter account.

Have a nice day. Happy coding :)

Top comments (4)

alpercun profile image
Alper ÇÜN • Edited

Hi Hasan. The twitter card validator link you shared in the article does not work.
You can use this link instead. 🎉

hasantezcan profile image
Hasan TEZCAN • Edited

This link not worked for me I used this one instead of this

But thanks for heads up :thanks:

rhlc profile image

How do I pass dynamic values in meta content?

cerbivore profile image

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