Next.js Discord

Discord Forum

Is it okay to put "use client" in the page.tsx (app router)?

Answered
Nebelung posted this in #help-forum
Open in Discord
NebelungOP
Shouldn't that cause any problems with rendering? I'm trying to diagnose an issue and checking different variants right now...
Answered by Nebelung
Yeah I've figured out it isn't using this tool to inspect file system after copies
https://github.com/wagoodman/dive

Thanks for pointing me to /static, i think i wouldn't figure it myself so fast
View full answer

30 Replies

so its better to leave the page as server component and render the child either client or server component
@Ray its fine but you will lose the ability to use server api in the page
NebelungOP
Yeah that's not my problem. My problem is this:
I've created a separate forum post for that long time ago but it doesn't seem to get any answer soon, so i'm trying to figure it out myself using simpler questions xD
where are you hosting it?
@Ray where are you hosting it?
NebelungOP
It is hosted in standalone mode in docker
On my own VPS
yeah I know the problem
hold on
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
you need to copy /app/.next/standalone and /app/.next/static
in standalone mode
@Ray you need to copy `/app/.next/standalone` and `/app/.next/static`
NebelungOP
I'm pretty sure i have that
oh
NebelungOP
Yeah i do
Everything worked fine before, but after some recent code changes or something it broke
can you share the url?
NebelungOP
There wasn't much besides this new page with "use client" and a new line in Dockerfile to add my drizzle migrations to the container. Here's my Dockerfile btw
FROM --platform=linux/amd64 node:16-alpine3.17 AS base

##### PRUNE
FROM base as prune
RUN apk add --no-cache libc6-compat openssl1.1-compat

WORKDIR /app
RUN yarn global add pnpm
RUN yarn global add turbo

COPY . .
RUN turbo prune @medey/nextjs --docker

##### DEPENDENCIES
FROM base AS deps
RUN apk add --no-cache libc6-compat openssl1.1-compat

WORKDIR /app
COPY .gitignore .gitignore
COPY --from=prune /app/out/json/ .
COPY --from=prune /app/out/pnpm-lock.yaml ./pnpm-lock.yaml

RUN yarn global add pnpm
RUN pnpm i

COPY --from=prune /app/out/full/ .

ENV NEXT_TELEMETRY_DISABLED 1
ENV SKIP_ENV_VALIDATION 1
RUN pnpm build -F @medey/nextjs

##### RUNNER
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1
ENV PORT 3000
ENV HOSTNAME 0.0.0.0

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=deps /app/apps/nextjs/next.config.mjs ./
COPY --from=deps /app/apps/nextjs/public ./public
COPY --from=deps /app/apps/nextjs/package.json ./package.json

COPY --from=deps --chown=nextjs:nodejs /app/apps/nextjs/.next/standalone ./
COPY --from=deps --chown=nextjs:nodejs /app/apps/nextjs/.next/static ./.next/static

COPY --from=deps --chown=nextjs:nodejs /app/packages/db/drizzle ./packages/db/drizzle

USER nextjs
EXPOSE 3000

CMD ["node", "apps/nextjs/server.js"]
The problem is now on all pages suddenly
2023-12-30T18:05:28.264406206Z [Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {

2023-12-30T18:05:28.264431187Z   digest: '1360781288'

2023-12-30T18:05:28.264441634Z }
do you get any error on locally with next build && node apps/nextjs/server.js?
@Ray do you get any error on locally with `next build` && `node apps/nextjs/server.js`?
NebelungOP
I'll check it out rn. Although i can add that it seems to work fine in dev mode
@Nebelung I'll check it out rn. Although i can add that it seems to work fine in dev mode
cp the static folder before starting node
@Ray cp the static folder before starting `node`
NebelungOP
Yeah after i cp'd the static folder to standalone/apps/nextjs/.next it works fine
But doesn't my dockerfile do the same thing?
@Nebelung There wasn't much besides this new page with "use client" and a new line in Dockerfile to add my drizzle migrations to the container. Here's my Dockerfile btw dockerfile FROM --platform=linux/amd64 node:16-alpine3.17 AS base ##### PRUNE FROM base as prune RUN apk add --no-cache libc6-compat openssl1.1-compat WORKDIR /app RUN yarn global add pnpm RUN yarn global add turbo COPY . . RUN turbo prune @medey/nextjs --docker ##### DEPENDENCIES FROM base AS deps RUN apk add --no-cache libc6-compat openssl1.1-compat WORKDIR /app COPY .gitignore .gitignore COPY --from=prune /app/out/json/ . COPY --from=prune /app/out/pnpm-lock.yaml ./pnpm-lock.yaml RUN yarn global add pnpm RUN pnpm i COPY --from=prune /app/out/full/ . ENV NEXT_TELEMETRY_DISABLED 1 ENV SKIP_ENV_VALIDATION 1 RUN pnpm build -F @medey/nextjs ##### RUNNER FROM base AS runner WORKDIR /app ENV NODE_ENV production ENV NEXT_TELEMETRY_DISABLED 1 ENV PORT 3000 ENV HOSTNAME 0.0.0.0 RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 nextjs COPY --from=deps /app/apps/nextjs/next.config.mjs ./ COPY --from=deps /app/apps/nextjs/public ./public COPY --from=deps /app/apps/nextjs/package.json ./package.json COPY --from=deps --chown=nextjs:nodejs /app/apps/nextjs/.next/standalone ./ COPY --from=deps --chown=nextjs:nodejs /app/apps/nextjs/.next/static ./.next/static COPY --from=deps --chown=nextjs:nodejs /app/packages/db/drizzle ./packages/db/drizzle USER nextjs EXPOSE 3000 CMD ["node", "apps/nextjs/server.js"]
NebelungOP
standalone is copied to ./ and then static is copied to ./.next/static
yeah I've checked inside running container, it has no static in .next for some reason...
is the path correct in your dockerfile
@Ray is the path correct in your dockerfile
NebelungOP
Yeah I've figured out it isn't using this tool to inspect file system after copies
https://github.com/wagoodman/dive

Thanks for pointing me to /static, i think i wouldn't figure it myself so fast
Answer