Next.js Discord

Discord Forum

Most app dynamically rendered problem

Answered
M7ilan posted this in #help-forum
Open in Discord
Avatar
M7ilanOP
Hello, I'm getting this message forcing my app to be mostly dynamic rendered, I have checked the docs and everything seems fine for me but still getting the message, I'm avoiding using [route configs](https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config).

[Error]: Dynamic server usage: Page couldn't be rendered statically because it used cookies. See more info here: https://nextjs.org/docs/messages/dynamic-server-error

description: "Page couldn't be rendered statically because it used cookies. See more info here: https://nextjs.org/docs/messages/dynamic-server-error"

digest: 'DYNAMIC_SERVER_USAGE'
Answered by M7ilan
Fixed the DYNAMIC_SERVER_USAGE Message, The problem was in the src\app\(Home)\profile\page.tsx file where I was using @supabase/auth-helpers-nextjs package from supabase that was causing the problem and has been replaced with the @supabase/ssr package.

Ref: https://supabase.com/docs/guides/auth/auth-helpers/nextjs
View full answer

4 Replies

Avatar
M7ilanOP
Here's a result for searching "cookies()" in my codebase.
9 results - 6 files

src\actions\auth.ts:
  12      const password = values.password;
  13:     const cookieStore = cookies();
  14      const supabase = createClient(cookieStore);

  49      const password = values.password;
  50:     const cookieStore = cookies();
  51      const supabase = createClient(cookieStore);

  75  export async function logout(): Promise<ErrorResponse> {
  76:     const cookieStore = cookies();
  77      const supabase = createClient(cookieStore);

  98  export async function verifyOTP(email: string, otp: string): Promise<ErrorResponse> {
  99:     const cookieStore = cookies();
  100      const supabase = createClient(cookieStore);

src\actions\supabase.ts:
  8  export async function createPost(values: z.infer<typeof postSchema>): Promise<ErrorResponse> {
  9:     const cookieStore = cookies();
  10      const supabase = createClient(cookieStore);

src\app\(Home)\layout.tsx:
  5  export default async function HomeLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  6:     const cookie = cookies();
  7      const supabase = createClient(cookie);

src\app\(Home)\page.tsx:
  6  export default async function Home() {
  7:     const cookie = cookies();
  8      const supabase = createClientServer(cookie);

src\app\(Home)\product\[id]\page.tsx:
  16  export default async function Product({ params }: { params: { id: string } }) {
  17:     const cookieStore = cookies();
  18      const supabase = createClientServer(cookieStore);

src\app\api\auth\callback\route.ts:
  12      if (code) {
  13:         const cookieStore = cookies();
  14          const supabase = createClient(cookieStore);
Avatar
M7ilanOP
Fixed the DYNAMIC_SERVER_USAGE Message, The problem was in the src\app\(Home)\profile\page.tsx file where I was using @supabase/auth-helpers-nextjs package from supabase that was causing the problem and has been replaced with the @supabase/ssr package.

Ref: https://supabase.com/docs/guides/auth/auth-helpers/nextjs
Answer
Avatar
M7ilanOP
But most of the routes are still dynamically rendered as shown here:
Route (app)                              Size     First Load JS
┌ λ /                                    175 B          91.3 kB
├ ○ /_not-found                          0 B                0 B
├ λ /api/auth/callback                   0 B                0 B
├ λ /auth                                9.99 kB         146 kB
├ λ /auth/otp                            4.66 kB        95.8 kB
├ λ /contact                             3.36 kB         117 kB
├ λ /post                                64 kB           211 kB
├ λ /product/[id]                        1.62 kB        99.5 kB
└ λ /profile                             144 B          84.5 kB
+ First Load JS shared by all            84.4 kB
  ├ chunks/69-b88a984d71972cf1.js        29 kB
  ├ chunks/fd9d1056-824252e2cefcfdce.js  53.4 kB
  â”” other shared chunks (total)          1.99 kB


Æ’ Middleware                             56.4 kB

â—‹  (Static)   prerendered as static content
λ  (Dynamic)  server-rendered on demand using Node.js
Avatar
M7ilanOP
Fixed it. The problem was fetching data in the Home Layout (src\app\(Home)\layout.tsx), leading to dynamic rendering of all the children.