How to Add Tweets in Next.js ?

Adding tweets in Next.js involves using Twitter's embed feature or API to display tweets. You can embed tweets directly in components or fetch and display them using server-side rendering or client-side data fetching. In this article, we are going to learn how we can add Tweets in NextJs.

Approach

To add our tweets we are going to use the react-tweet-embed package. The react-tweet-embed package helps us to add tweets anywhere in our app. So first, we will install the react-tweet-embed package and then we will add a tweet on our homepage. It takes the tweet id to access and display the tweet on the page.

Steps to Create Next.js Project

Step 1: You can create a new NextJS project using the below command:

npx create-next-app gfg

Step 2: Switch to the Project directory

cd gfg

Step 3: Now we will install the react-tweet-embed package using the below command:

npm i react-tweet-embed

Project Structure:

The updated dependencies in the package.json file are:

"dependencies": {
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18",
    "react-tweet-embed": "^2.0.0"
}

Example: This example demonstrates addingtweets in the next app using the react-tweet-embed package which accepts the tweed id and display the tweet to the page.

// Filename - pages/index.js

import TweetEmbed from "react-tweet-embed";
import React from "react";

export default function Tweets() {
	return (
		<div>
			<h3>
            	GeeksforGeeks - Tweet
            </h3>
			<TweetEmbed 
            	id="1456503289512710147" 
				options={{ theme: "dark" }} 
            />
		</div>
	);
}

Explanation: In the above example first, we are importing the TweetEmbed component from the installed package. After that, we are adding the id and options parameter in our TweetEmbed component. You can find the tweet id in the tweet link.

Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

Output: