Discord Status Widget in Next.js

This guide will help you integrate a dynamic Discord status widget into your Next.js project.

Step 1: Create the Discord Status Component

1. Create a folder named components in your project folder if it doesn't exist.
2. Inside the components folder, create a file named DiscordStatus.js.
3. Copy the code for the Discord Status component from this link and paste it into DiscordStatus.js.

Step 2: Add Status Images

1. Create a folder named public in your project root if it doesn't exist.
2. Inside the public folder, create a subfolder named status.
3. Download the status images from this folder and place them in the public/status folder.

Step 3: Get Your Discord User ID

To display your own Discord status, you need to use your Discord user ID:

1. Enable Developer Mode in Discord:

1. Right-click on your profile in a Discord chat and copy your user ID:

Step 4: Join the Lanyard API Discord Server

To get your Discord status information, we are using the Lanyard API. For the widget to show your own status Join this Discord server and your discord data will be visible at https://api.lanyard.rest/v1/users/[your_id_here]

Learn more about the Lanyard API.

Step 5: Update the User ID in the Component

Open the DiscordStatus.js file and replace the user ID in the fetch URL with your own:

Step 6: Import and Use the Discord Status Component

1. In the file where you want to display the widget (e.g., app/page.js), import the DiscordStatus component:

   import DiscordStatus from '@/components/DiscordStatus';

1. Add the DiscordStatus component in your JSX:

   <DiscordStatus />

Here's an example of how to integrate it:

Result

After following these steps, your Discord status widget should be integrated and look similar to this:

It will change according to your current Discord status.