Next.js 프로젝트에 Twitter 카드를 추가하고 ngrok로 미리보기

웹사이트 링크를 어딘가에 붙여넣기 하면 이런 멋진 사진과 설명이 보이지 않나요?



오늘 우리는 이와 같은 멋진 링크 카드를 얻는 방법을 배우고 있습니다. 빌드하는 동안 미리 봅니다.

이 예에서는 Twitter 카드를 nextJs 프로젝트에 통합합니다.

시작하자!

1. nextJs 프로젝트에 Twitter 카드 추가



기본적으로 메타 태그를 HEAD 요소에 추가하고 있습니다. 하지만 CRA(Create React App)와 달리 nextJs로 작업할 때 public 디렉토리에 파일 이름이 없기 때문에 그 안에서 직접 index.html를 편집할 수 없습니다.



CRA example from hangi-asi-grubundayim project



이전의 이유로 페이지 디렉토리 아래의 _document.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>
    );
  }
}


이 파일을 추가하면 Twitter 카드가 표시되지만 작업하는 동안 실시간 렌더링을 보고 싶을 수 있습니다.

여러 가지 방법으로 제공할 수 있지만 이제 ngrok를 선택하겠습니다.

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



한 번의 클릭으로 인터넷에서 개발 작업 공간을 공유할 수 있습니다.

npm install -g ngrok


그런 다음 미리 보기 포트를 제공할 수 있습니다. 예를 들어, 저는 이 프로젝트에 3000 포트를 사용했고 ngrok와 함께 3000 포트를 제공합니다.

ngrok http 3000 


그리고 짜잔! 🎉



이제 이 링크에서 내 웹사이트에 연결할 수 있습니다.
  • "http://1989fa8990cb.ngrok.io "

  • 자, 이제 전체 인터넷에 공유한 라이브 미리 보기가 있으므로 다음에서 내 Twitter 카드를 테스트할 수 있습니다.



    좋아, 그게 다야. Twitter 카드를 추가하고 라이브로 조작할 수 있습니다. 도움이 되었기를 바랍니다.

    이 기사가 마음에 들면 좋아요를 누르고 내 콘텐츠를 팔로우하려면 dev.to 계정 또는 계정에서 팔로우할 수 있습니다.

    좋은 하루 되세요. 행복한 코딩 :)

    좋은 웹페이지 즐겨찾기