Help needed: "use server" directive must be at the top of the file
Unanswered
Philippine Crocodile posted this in #help-forum
Philippine CrocodileOP
This is really weird and I'm not finding anything online. I have a layout and in the top line I'm adding 'use server', inside the layout component I'm calling drizzle-orm functions.
Here's the related snippet:
Might be noteworthy that without the directive the component becomes a client component which is weird since before adding the
My
Here's the related snippet:
"use server";
import { db } from "@/lib/db";
import { users } from "@/lib/db/schema/auth";
export default async function WebsiteTheme({
children,
}: {
children: React.ReactNode;
}) {
const [{ count: userCount }] = await db
.select({ count: count() })
.from(users);
if (userCount === 0) {
return redirect("/admin/dashboard/setup");
}
// ...
}Might be noteworthy that without the directive the component becomes a client component which is weird since before adding the
userCount code it was behaving as a server component.My
next.config.mjs file if it helps:// @ts-check
/**
* @type {import('next').NextConfig}
**/
const nextConfig = {
webpack: (config) => {
config.externals.push("@node-rs/argon2", "@node-rs/bcrypt");
return config;
},
};
export default nextConfig;1 Reply
@Philippine Crocodile This is really weird and I'm not finding anything online. I have a layout and in the top line I'm adding 'use server', inside the layout component I'm calling drizzle-orm functions.
Here's the related snippet:
"use server";
import { db } from "@/lib/db";
import { users } from "@/lib/db/schema/auth";
export default async function WebsiteTheme({
children,
}: {
children: React.ReactNode;
}) {
const [{ count: userCount }] = await db
.select({ count: count() })
.from(users);
if (userCount === 0) {
return redirect("/admin/dashboard/setup");
}
// ...
}
Might be noteworthy that without the directive the component becomes a client component which is weird since before adding the `userCount` code it was behaving as a server component.
My `next.config.mjs` file if it helps:
// @ts-check
/**
* @type {import('next').NextConfig}
**/
const nextConfig = {
webpack: (config) => {
config.externals.push("@node-rs/argon2", "@node-rs/bcrypt");
return config;
},
};
export default nextConfig;
"use server" isn't the opposite of "use client". meaning you don't need to add "use server" except you're creating/invoking a server action - https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#conventionMight be noteworthy that without the directive the component becomes a client component