Server Error: cookies called outside request scope in app router without i18n routing on dynamic routes

[sinhong2011]

Summary

When using the app router in a Next.js 14 project without i18n routing (with next-intl for localization), I encountered a server error while accessing cookies in dynamic routes. The error message is:

Error: cookies was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context

This error occurs only in dynamic routes when attempting to retrieve cookies via the cookies() function from next/headers. Static pages work fine, but dynamic routes generate this error during page generation, indicating that cookies() is being called outside of the request context.

i18n.ts

import type { Locale } from '@/types/i18n'
import { getRequestConfig } from 'next-intl/server'
import { cookies } from 'next/headers'

export default getRequestConfig(async () => {
  // Validate that the incoming `locale` parameter is valid
  const locale = (cookies().get('locale')?.value as Locale) || 'en'

  return {
    locale,
    messages: (await import(`../messages/${locale}.json`)).default,
  }
})

Additional Context

• The issue only arises in dynamic routes.
• next-intl is used without enabling i18n routing.
• The cookies are required for localization purposes, and the error blocks correct locale handling.

Additional information

No response

Example

No response

[dev-enthusias]

Where you able to find an answer to this

[daveycodez]

If you can pass your NextRequest or NextApiRequest to the function you can use it to work with cookies, you can view my custom solution to this bug for Supabase when using edge api routes... You can use req.cookies.getAll()

import { createServerClient } from '@supabase/ssr'
import { NextRequest, NextResponse } from 'next/server'

export function createClient(req: NextRequest, res: NextResponse) {
    const supabase = createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
            cookies: {
                getAll() {
                    return req.cookies.getAll()
                },
                setAll(cookiesToSet) {
                    cookiesToSet.forEach(({ name, value }) => req.cookies.set(name, value))
                    cookiesToSet.forEach(({ name, value, options }) =>
                        res.cookies.set(name, value, options)
                    )
                },
            },
        }
    )

    return supabase
}