chore(nextjs): Use ezheaders to access headers and cookies (clerk#4392)

Author: panteliselef

.changeset/nasty-meals-call.md

@@ -0,0 +1,5 @@
+---
+"@clerk/nextjs": minor
+---
+
+Replace `next/headers` with `ezheaders`

package-lock.json

@@ -72,6 +72,7 @@
     "@clerk/shared": "2.10.1",
     "@clerk/types": "4.28.0",
     "crypto-js": "4.2.0",
+    "ezheaders": "0.1.0",
     "server-only": "0.0.1",
     "tslib": "2.4.1"
   },

packages/nextjs/package.json

@@ -1,11 +1,11 @@
 'use server';
 
-import { cookies } from 'next/headers';
+import { cookie } from 'ezheaders';
 
 // This function needs to be async as we'd like to support next versions in the range of [14.1.2,14.2.0)
 // These versions required 'use server' files to export async methods only. This check was later relaxed
 // and the async is no longer required in newer next versions.
 // ref: https://github.com/vercel/next.js/pull/62821
-export async function invalidateCacheAction() {
-  void (await cookies()).delete(`__clerk_invalidate_cache_cookie_${Date.now()}`);
+export async function invalidateCacheAction(): Promise<void> {
+  await cookie(`__clerk_invalidate_cache_cookie_${Date.now()}`, '');
 }

packages/nextjs/src/app-router/server-actions.ts

@@ -1,6 +1,6 @@
 import type { AuthObject } from '@clerk/backend';
 import type { InitialState, Without } from '@clerk/types';
-import { headers } from 'next/headers';
+import { header } from 'ezheaders';
 import nextPkg from 'next/package.json';
 import React from 'react';
 
@@ -21,7 +21,7 @@ const getDynamicClerkState = React.cache(async function getDynamicClerkState() {
 });
 
 const getNonceFromCSPHeader = React.cache(async function getNonceFromCSPHeader() {
-  return getScriptNonceFromHeader((await headers()).get('Content-Security-Policy') || '') || '';
+  return getScriptNonceFromHeader((await header('Content-Security-Policy')) || '') || '';
 });
 
 export async function ClerkProvider(

packages/nextjs/src/app-router/server/ClerkProvider.tsx

@@ -23,9 +23,8 @@ export async function buildRequestLike() {
   try {
     // Dynamically import next/headers, otherwise Next12 apps will break
     // @ts-ignore: Cannot find module 'next/headers' or its corresponding type declarations.ts(2307)
-    const { headers } = await import('next/headers');
-    const resolvedHeaders = await headers();
-    return new NextRequest('https://placeholder.com', { headers: resolvedHeaders });
+    const { getHeaders } = await import('ezheaders');
+    return new NextRequest('https://placeholder.com', { headers: await getHeaders() });
   } catch (e: any) {
     // rethrow the error when react throws a prerendering bailout
     // https://nextjs.org/docs/messages/ppr-caught-error

packages/nextjs/src/app-router/server/utils.ts

@@ -23,6 +23,7 @@
     "next": "^14.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "ezheaders": "^0.0.3"
   }
 }

playground/app-router/package.json

@@ -1,14 +1,14 @@
-import { useAuth, ClerkLoaded, SignedIn, SignedOut, UserButton } from '@clerk/nextjs';
+import { ClerkLoaded, SignedIn, SignedOut, UserButton } from '@clerk/nextjs';
+import { auth } from '@clerk/nextjs/server';
 import React from 'react';
 import { ClientSideWrapper } from '@/app/protected/ClientSideWrapper';
-import { headers } from 'next/headers';
+import { header } from 'ezheaders';
 
 export default async function Page() {
-  const { userId } = useAuth();
-  const resolvedHeaders = await headers().get('x-clerk-debug');
+  const { userId } = await auth();
+  const xClerkDebug = await header('x-clerk-debug');
 
-  console.log('Auth run in /protected', userId, resolvedHeaders.get('x-clerk-debug'), resolvedHeaders.keys());
-  // console.log(auth());
+  console.log('Auth run in /protected', userId, xClerkDebug);
   return (
     <div>
       <h1>Protected page</h1>