I see the issue with your code. The error "Cookies can only be modified in a server actions or route handler" is occurring because you're trying to modify cookies directly in a Server Component layout file.

While both files have the 'use server' directive, there's an important distinction:

• Your killSession.ts is correctly set up as a server action
• Your layout component is a Server Component, not a server action

In Next.js, cookies can only be modified in:

1. Server Actions (functions marked with 'use server')
2. Route Handlers (API routes)

You probably try something like:

1
import React from 'react'
2
import LogoutHandler from './logout-handler'
3

4
export default function PageLayout({
5
  children,
6
}: Readonly<{
7
  children: React.ReactNode
8
}>) {
9
  return (
10
    <>
11
      <LogoutHandler />
12
      {children}
13
    </>
14
  )
15
}

Then create a client component that calls your server action:

1
'use client'
2

3
import { useEffect } from 'react'
4
import { killSession } from '@actions/killSession'
5

6
export default function LogoutHandler() {
7
  useEffect(() => {
8
    killSession()
9
  }, [])
10
  
11
  return null
12
}

This approach uses a client component with useEffect to call your server action when the component mounts . The client component is rendered inside your layout, but doesn't affect the UI since it returns null.

Hmmm, this isn't really what I want as I wanted the server component to await the session being destroyed

Hi @mildfuzz, you can use await in the Server components but you can't write cookies in a server component, you can only read one. As explained in the docs:

cookies is an async function that allows you to read the HTTP incoming request cookies in Server Components, and read/write outgoing request cookies in Server Actions or Route Handlers.

So, as @swarnava pointed out, you should be performing the cookie writes in Server Actions.

I hope this helps.