DEV Community

Cover image for Discord Status Widget in Next.js
Sujal Agre
Sujal Agre

Posted on

1

Discord Status Widget in Next.js

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:

Copy 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:

Update User ID

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';
Enter fullscreen mode Exit fullscreen mode
  1. Add the DiscordStatus component in your JSX:
   <DiscordStatus />
Enter fullscreen mode Exit fullscreen mode

Here's an example of how to integrate it:

Add Discord Status Widget

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.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay