In this article, we are going to learn how we can add Tweets in NextJs. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally.
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.
Create NextJS Application: You can create a new NextJs project using the below command:
npx create-next-app gfg
Install the required package: Now we will install the react-tweet-embed package using the below command:
npm i react-tweet-embed
Project Structure: It will look like this.
Adding the Tweets: We can easily add the tweets in our app after installing the react-tweet-embed package. For this example, we are going to add tweets to our homepage.
Add the below content in the index.js file:
Javascript
import TweetEmbed from 'react-tweet-embed'import React from 'react'Â Â export default function Tweets() { Â Â return ( Â Â Â Â <div> Â Â Â Â Â Â <h3>neveropen - 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:
