DEV Community

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

Posted 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

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à! 🎉


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


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 :)

Discussion (2)

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