SlipItIn/.agents/skills/astro-sites-manager/references/v6-features.md

Astro v6 Features (still current in v7)

These features were introduced or stabilized in Astro v6 and remain fully supported in v7.

---

1. Content Collections v2

Type-safe content management with Zod schemas and flexible data loaders.

// content.config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    date: z.date(),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

Loaders:

• file() — single file (JSON, YAML)
• glob() — match files by pattern
• Custom loaders — fetch from CMS at build or request time (live collections)

Querying:

import { getCollection, getEntry } from 'astro:content';

const posts = await getCollection('blog', ({ data }) => !data.draft);
const post = await getEntry('blog', 'my-post');

---

2. Server Actions

Type-safe RPC endpoints with Zod validation.

// src/actions/index.ts
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';

export const server = {
  subscribe: defineAction({
    input: z.object({ email: z.string().email() }),
    handler: async ({ email }) => {
      // process subscription
      return { success: true };
    },
  }),
};

Usage in components:

import { actions } from 'astro:actions';

const result = await actions.subscribe({ email: 'user@example.com' });

Form integration with progressive enhancement:

<form method="POST" action={actions.subscribe}>
  <input type="email" name="email" />
  <button type="submit">Subscribe</button>
</form>

---

3. Sessions

Server-side session management with pluggable drivers.

Config:

// astro.config.mjs
export default defineConfig({
  session: {
    driver: 'cookie', // also: node-fs, redis, etc.
  },
});

Usage:

// In pages/endpoints
const user = await Astro.session.get('user');
await Astro.session.set('user', { name: 'Alice' });

// In middleware
const user = await context.session.get('user');

---

4. Server Islands

Defer component rendering to request time while keeping the page static.

---
import UserGreeting from '../components/UserGreeting.astro';
---
<UserGreeting server:defer />

• Placeholder rendered at build time
• Component fetched and rendered at request time
• Perfect for personalized content in otherwise static pages

---

5. Environment Variables (astro:env)

Type-safe, validated environment variables.

import { MY_SECRET } from 'astro:env/server';
import { PUBLIC_API_URL } from 'astro:env/client';

Schema definition:

// astro.config.mjs
export default defineConfig({
  env: {
    schema: {
      MY_SECRET: envField.string({ context: 'server', access: 'secret' }),
      PUBLIC_API_URL: envField.string({ context: 'client', access: 'public' }),
    },
  },
});

Variables are validated at build time — missing or invalid values cause build failures.

---

6. On-Demand Rendering

Hybrid static/SSR on a per-page basis.

---
// This page renders on every request
export const prerender = false;
---

Adapters:

• @astrojs/node
• @astrojs/cloudflare
• @astrojs/netlify
• @astrojs/vercel

Hybrid mode: static by default, opt individual pages into SSR with prerender = false.

---

7. View Transitions

Client-side navigation with animated transitions between pages.

---
import { ViewTransitions } from 'astro:transitions';
---
<head>
  <ViewTransitions />
</head>

<h1 transition:name="title" transition:animate="slide">Hello</h1>
<div transition:persist>
  <!-- State preserved across navigation -->
</div>

Lifecycle events:

• astro:before-preparation
• astro:after-swap
• astro:page-load

---

8. Middleware

Request/response pipeline with access to context.

// src/middleware.ts
import { defineMiddleware, sequence } from 'astro:middleware';

const auth = defineMiddleware(async (context, next) => {
  const token = context.cookies.get('token');
  context.locals.user = await validateToken(token?.value);
  return next();
});

const logging = defineMiddleware(async (context, next) => {
  console.log(context.url.pathname);
  return next();
});

export const onRequest = sequence(auth, logging);

Access to context.locals, context.cookies, context.redirect().

---

9. Image Optimization

Built-in image processing with automatic optimization.

---
import { Image } from 'astro:assets';
import hero from '../assets/hero.png';
---
<Image src={hero} alt="Hero" width={800} />

• Automatic format conversion, lazy loading, responsive sizes
• Remote images configured via image.domains and image.remotePatterns:

// astro.config.mjs
export default defineConfig({
  image: {
    domains: ['cdn.example.com'],
    remotePatterns: [{ protocol: 'https', hostname: '**.example.com' }],
  },
});

---

10. Internationalization (i18n)

Built-in i18n routing with locale-aware URL generation.

// astro.config.mjs
export default defineConfig({
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'pt-br', 'es'],
    routing: {
      prefixDefaultLocale: false,
    },
  },
});

URL generation:

import { getRelativeLocaleUrl } from 'astro:i18n';

getRelativeLocaleUrl('pt-br', '/about'); // → /pt-br/about

Strategies: pathname prefixes or domain-based routing.