Using Astro locals
New Courses Coming Soon
Join the waiting lists
Astro locals are a great way to share variables between middleware and page components (note: not layouts, as discussed in another post).
You can add a property in the src/middleware.ts
file:
import type { MiddlewareHandler } from 'astro'
export const onRequest: MiddlewareHandler = async (context, next) => {
context.locals.test = 'test'
return await next()
}
and access it in the page component:
---
console.log(Astro.locals.test)
---
....
…this unlocks a few useful scenarios.
Mostly setting some property in a page, and using it in the middleware.
Note that if you add a property in the middleware you’ll see this TS issue:
To fix this problem, add to src/env.d.ts
the type of the new property:
/// <reference types="astro/client" />
declare namespace App {
interface Locals {
test: string
}
}
and define your middleware in this way:
import { defineMiddleware } from 'astro:middleware'
export const onRequest = defineMiddleware(async (context, next) => {
context.locals.test = 'test'
return await next()
})
→ Read my Astro Tutorial
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X