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

#twitter #nextjs #ngrok #react

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">
        <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.

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.
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.