Next.js Discord

Discord Forum

use discord.js in app directory

Answered
Chinese perch posted this in #help-forum
Open in Discord
Avatar
Chinese perchOP
Getting a guild from the Client instance. Tried getServerSideProp and getStaticProp but both of them doesn't work with the app directory. Can someone help me with this?
export default async function GuildPage({
  params: { guildId },
}: {
  params: { guildId: string };
}) {
  const data = await Guild.findOne({ guildId });
  if (!data) return <Container>Guild not found!</Container>;
  // issue is here:
  const guild = discordClient.guilds.cache.get(data.guildId);
  console.log(guild);
  return <Container>test</Container>;
}
Answered by risky
you can use the raw api good tho (ie @discordjs/rest)
View full answer

22 Replies

Avatar
Chinese perchOP
The "data fetching" docs sounds pretty confusing
Avatar
Ray
import { notFound } from "next/navigation";

export default async function GuildPage({
  params: { guildId },
}: {
  params: { guildId: string };
}) {
  const data = await Guild.findOne({ guildId });
  if (!data) notFound();
  // issue is here:
  const guild = discordClient.guilds.cache.get(data.guildId);
  console.log(guild);
  return <Container>test</Container>;
}

try this
Avatar
Chinese perchOP
huh?
// issue is here:
  const guild = discordClient.guilds.cache.get(data.guildId);
  console.log(guild);
Avatar
Ray
what issue
Avatar
Chinese perchOP
Module not found: Can't resolve 'zlib-sync'

https://nextjs.org/docs/messages/module-not-found


I went to that link, but it was pretty confusing for me, the code isn't async or anything
Avatar
Alfonsus Ardani
npm i zlib-sync?
Avatar
Chinese perchOP
it should be installed when i installed discord.js
Avatar
Ray
Image
Avatar
Chinese perchOP
./node_modules/zlib-sync/build/Release/zlib_sync.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
I don't use that
there are no uses of websockets in my code
Avatar
risky
im confused why you want that tho... nextjs is desinged for serverless (process only short lived) so i kinda don't see how it would work well
Avatar
risky
you can use the raw api good tho (ie @discordjs/rest)
Answer
Avatar
Chinese perchOP
"use server";
import discordClient from "@/client";
import { notFound } from "next/navigation";
export async function GET(
  request: Request,
  { params }: { params: { guildId: string } }
) {
  const guild = discordClient.guilds.cache.get(params.guildId);
  if (!guild) return notFound();
  return Response.json({ guildId: params.guildId });
}

Ended up using route, I still have the exact same problem despite removing this from the page i showed earlier
but yes imma look into the api
Avatar
risky
so what exactly do you want with discord.js
just fetching?
if so, i think the discordjs fetch wrapper and unstable_cache may be good (if you want it cached)
Avatar
Chinese perchOP
hm ill use @discordjs/rest
Avatar
risky
can i ask how did your adventures go, did things work out well, or more questions to help you support this?
Avatar
Chinese perchOP
Yep. This way doesn't need the bot to be logged in from the dashboard backend itself, so it's a win I'd say.
client.ts:
import { REST } from "@discordjs/rest";
const discordRest = new REST({ version: "10" }).setToken(
  process.env.DISCORD_TOKEN
);
export default discordRest;

in my api route:
const guild = (await discordRest.get(
  Routes.guild(params.guildId)
)) as Guild;