Discord Bot Dashboard Next

Discord Bot Dashboard Next is a TypeScript and Next.js 13 template for building web dashboards that let Discord server admins configure bot features through a clean Chakra UI interface. It is available on GitHub and includes a built-in Discord OAuth flow, a feature configuration system, and support for light/dark themes plus multi-language (i18n) localization.

What is Discord Bot Dashboard Next?

Discord Bot Dashboard Next is a front-end template that connects a Discord bot to a web dashboard using Next.js 13 API Routes for authorization. It takes configuration files and a running backend server as inputs, and produces a responsive dashboard where users can log in via Discord OAuth, select a guild, enable/disable bot features, and edit feature options. The template is built with React 18 and Chakra UI 2.0, and its source is organized into pages, components, API utilities, and config folders. The project is deprecated: the maintainer recommends considering alternatives, and no support is provided, though it remains usable.

Key Features

• Tech stack — TypeScript, Next.js 13, React 18, and Chakra UI 2.0 deliver a modern React development experience with server-side rendering.
• Light/Dark theme — Users can switch between light and dark modes; the README shows both.
• Multi-language support (i18n) — Built-in localization support is documented in the localization.md file.
• Discord OAuth authorization — The template implements a login flow using Next.js API Routes: /api/auth/login redirects to Discord, /api/auth/callback stores the access token in HTTP-only cookies.
• Feature configuration system — Developers can define features in src/config/features.tsx; each feature has an ID, name, description, icon, and a useRender function that renders a configuration panel.
• Built-in API client — src/api/bot.ts defines a client for fetching guild data and feature states from a backend server.
• Customizable via config files — src/config/common.tsx holds bot name, icon, invite URL, and guild settings; TypeScript types in src/config/types/custom-types.ts control feature shapes.
• Documentation — The repo includes guides for localization and forms, plus a detailed setup walkthrough.

Who should use Discord Bot Dashboard Next?

• Discord bot developers who want to give their bot a professional web dashboard without building the UI from scratch.
• TypeScript/React developers looking for a real-world example of integrating Discord OAuth with Next.js.
• Open-source contributors who want a customizable base for a community bot dashboard and can maintain their own backend server.
• Developers comfortable with backend programming because the template requires a separate backend service for guild and feature data.

What can you do with Discord Bot Dashboard Next?

• Bot developers: Let server admins enable or disable bot features like a welcome message, then configure those features with custom forms.
• Guild administrators: Log in with Discord, pick a server, and manage the bot's per-server settings in a friendly web UI.
• Learners: Follow the documented setup and authorization flow to see how to build an OAuth-2-based dashboard with Next.js and the Discord API.

How does Discord Bot Dashboard Next work?

The setup involves eight steps: clone the repo, install dependencies (PNpm preferred), customize files under src/pages, src/components, src/api, and src/config, define feature types in custom-types.ts, configure general information in src/config/common.tsx, create a .env file for required variables, implement a backend server with the documented API routes, then run pnpm run dev on port 3000. The authorization flow is Login -> Discord OAuth -> API Routes -> Client: after the user authorizes, the access token is stored in HTTP-only cookies and the client uses it to call the backend with a Bearer header.

Pros and cons

• Pro: Clear, documented project structure with separation between pages, components, API utilities, and configuration.
• Pro: Supports i18n and theme switching out of the box.
• Pro: Feature system is extensible; you can add custom features beyond the included welcome-message example.
• Con: The project is deprecated; the README says no support will be provided.
• Con: A custom backend server must be implemented; the README only includes the required route specification and links to a Node.js TypeScript example.
• Con: The live demo currently shows only the 'Welcome message' feature; the template itself can be extended.

Pricing

The template is publicly available on GitHub with no stated price, so it can be used as a free starting point. No paid tiers or license restrictions are mentioned in the README.

FAQ

Is Discord Bot Dashboard Next free?

Yes, the template is publicly accessible on GitHub and the README does not mention any payment or licensing cost. You can clone the repository and use it as the base for your own dashboard, but the maintainer warns that support is no longer provided.

What technologies does Discord Bot Dashboard Next use?

The template uses TypeScript, Next.js 13, React 18, and Chakra UI 2.0. Authorization is handled through Next.js API Routes with Discord OAuth. The backend is not included; you must write your own server in any language that exposes the required REST routes.

Why is the template deprecated?

The README starts with a 'Deprecated' notice stating that the maintainer recommends other alternatives and will no longer provide support. You can still use the code, but you should be prepared to maintain or extend it yourself.

Do I need a backend server?

Yes, the dashboard requires a backend to provide guild info, roles, channels, and feature storage. The README specifies GET, PATCH, POST, and DELETE routes under /guilds/{guild}/features and similar endpoints, and it links to an official Node.js TypeScript example backend.

How do I set up Discord OAuth for the dashboard?

Create an application in the Discord Developer Portal, add the callback URL APP_URL/api/auth/callback to the OAuth2 redirects, and configure the required environment variables. The built-in flow handles the rest, storing the access token in HTTP-only cookies.