diff --git a/web/app/components/base/ga/index.tsx b/web/app/components/base/ga/index.tsx
index 81d84a85d3..7688e0de50 100644
--- a/web/app/components/base/ga/index.tsx
+++ b/web/app/components/base/ga/index.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import Script from 'next/script'
-import { type UnsafeUnwrappedHeaders, headers } from 'next/headers'
+import { headers } from 'next/headers'
 import { IS_CE_EDITION } from '@/config'
 
 export enum GaType {
@@ -18,13 +18,13 @@ export type IGAProps = {
   gaType: GaType
 }
 
-const GA: FC<IGAProps> = ({
+const GA: FC<IGAProps> = async ({
   gaType,
 }) => {
   if (IS_CE_EDITION)
     return null
 
-  const nonce = process.env.NODE_ENV === 'production' ? (headers() as unknown as UnsafeUnwrappedHeaders).get('x-nonce') ?? '' : ''
+  const nonce = process.env.NODE_ENV === 'production' ? (await headers()).get('x-nonce') ?? '' : ''
 
   return (
     <>
diff --git a/web/app/components/base/zendesk/index.tsx b/web/app/components/base/zendesk/index.tsx
index a6971fe1db..031a044c34 100644
--- a/web/app/components/base/zendesk/index.tsx
+++ b/web/app/components/base/zendesk/index.tsx
@@ -1,13 +1,13 @@
 import { memo } from 'react'
-import { type UnsafeUnwrappedHeaders, headers } from 'next/headers'
+import { headers } from 'next/headers'
 import Script from 'next/script'
 import { IS_CE_EDITION, ZENDESK_WIDGET_KEY } from '@/config'
 
-const Zendesk = () => {
+const Zendesk = async () => {
   if (IS_CE_EDITION || !ZENDESK_WIDGET_KEY)
     return null
 
-  const nonce = process.env.NODE_ENV === 'production' ? (headers() as unknown as UnsafeUnwrappedHeaders).get('x-nonce') ?? '' : ''
+  const nonce = process.env.NODE_ENV === 'production' ? (await headers()).get('x-nonce') ?? '' : ''
 
   return (
     <>