🐦

Next.jsでXのポストをreact-tweetで表示する(JSONファイル利用)

2023/10/22に公開

Next.js

React

JSON

tech

趣味開発でXのポストをまとめて表示する画面を作りたくて調べたことをまとめます。環境はNode.js 21、Next.js 13.5.6で試しました。

Next.js

プロジェクトを作成します。サンプルコードでは全部デフォルト選択でApp Routerを使いました。

npx create-next-app@latest

✔ What is your project named? … x-post-viewer-from-json
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

X(旧Twitter)

Xのポストはreact-tweetというライブラリを使います。ポストのIDを指定するだけで埋め込んでくれるので非常に便利です。

https://github.com/vercel/react-tweet
https://react-tweet.vercel.app/

npm install react-tweet

IDはリンクのURLから取りました。

これだけ書けばOK。

import { Tweet } from 'react-tweet'
 
export default function Page() {
  return <Tweet id="1707313498156622307" />
}

実行します。

npm run dev

ポストの埋め込み表示をしてくれました。簡単。

JSONファイルから読み込み

複数のポストをまとめて表示したいのでJSONファイルを使ってURLをまとめます。本当はDBを使いたいのですが、まだNext.js周りの知識が追いつかず...。

JSONファイルの読み込みは公式サイトに記述がありました。

ポストのURLをまとめたJSONファイルを作成します（といっても今回は単なる配列...）。

[
    "https://x.com/sasaki_maika/status/1707313498156622307?s=20",
    "https://x.com/sasaki_maika/status/1697831521942659191?s=20",
    "https://x.com/sasaki_maika/status/1696331164632653978?s=20",
    "https://x.com/sasaki_maika/status/1693807074927624260?s=20",
    "https://x.com/sasaki_maika/status/1634174406011531264?s=20",
    "https://x.com/sasaki_maika/status/1631646325350744065?s=20",
    "https://x.com/sasaki_maika/status/1629481483500150784?s=20"
]

処理はJSONファイルを読み込んでIDを抽出するだけです。Tailwind CSSで4カラム表示にしています。

import { promises as fs } from 'fs';
import { Tweet } from 'react-tweet'

export default async function Home() {
  const file = await fs.readFile(process.cwd() + '/app/post.json', 'utf8');
  const postUrls = JSON.parse(file);

  const postList:any[] = [];

  postUrls.forEach( (url:string) => {
      const id = url.substring(34,53);
      console.log(id);
      postList.push(<Tweet id={id} />);
  })

  return (
    <>
      <div className="grid grid-cols-1 md:grid-cols-4">
          {postList}
      </div>
    </>
  )
}

表示結果です。いい感じ！写真の可愛い子はイコラブの佐々木舞香さんです。最近ハマってます。

Next.js

X(旧Twitter)

JSONファイルから読み込み

Discussion