Static tweets — the better way to embed Twitter

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • SaaSHub - Software Alternatives and Reviews
  • static-tweets

    Create statically-rendered tweets using Next.js, Tailwind CSS, and Twitter's API

  • A working demo of this code is available on GitHub.

  • murder

    Large scale server deploys using BitTorrent and the BitTornado library (by ervinb)

  • export const fetchTweets = async (tweetIds = []) => { if (tweetIds.length === 0) return [] const options = '&expansions=author_id&tweet.fields=public_metrics,created_at&user.fields=profile_image_url' const response = await fetch( `https://api.twitter.com/2/tweets/?ids=${tweetIds.join(',')}${options}`, { headers: { Authorization: `Bearer ${process.env.TWITTER_TOKEN}` } } ) const body = await response.json() const tweets = body.data.map((t) => { const author = body.includes.users.find((a) => a.id === t.author_id) return { id: t.id, text: t.text, createdAt: new Date(t.created_at).toLocaleDateString('en', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC', }), metrics: { replies: formatMetric(t.public_metrics?.reply_count ?? 0), likes: formatMetric(t.public_metrics?.like_count ?? 0), retweets: formatMetric(t.public_metrics?.retweet_count ?? 0), }, author: { name: author.name, username: author.username, profileImageUrl: author.profile_image_url, }, url: `https://twitter.com/${author.username}/status/${t.id}`, } }) return tweets } export const formatMetric = (number) => { if (number < 1000) { return number } if (number < 1000000) { return `${(number / 1000).toFixed(1)}K` } return `${(number / 1000000).toFixed(1)}M` }

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • twurl

    OAuth-enabled curl for the Twitter API

  • For this, you will need a Twitter account to register at developer.twitter.com. Once registered, you will create a project and obtain a Bearer token to set in your application. For this example, assume the Bearer token is set as an environment variable and fetched using process.env.TWITTER_TOKEN.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts