
<Image src="astro-image-error.png" alt="MissingSharp Could not find Sharp error in Astro.js Vercel build logs" />

## TL;DR

Install Sharp and configure `sharpImageService` in your [Astro](/blog/astro) config. This resolves the `[MissingSharp] Could not find Sharp` error on Vercel and other platforms that don't bundle Sharp by default.

## The Error

You run `astro build` or deploy to Vercel, and the build fails with:

```bash
[MissingSharp] Could not find Sharp.
Please install Sharp (`sharp`) manually into your project.
```

This is one of the most common Astro deployment errors. It works locally but fails on Vercel — a classic "works on my machine" problem.

You'll see this error in:

- **Vercel build logs** during deployment
- **`astro build`** output in CI/CD pipelines
- Any environment where Sharp's native binaries aren't available

## Quick Solution

Two steps — configure the image service and install Sharp:

```typescript:astro.config.mjs
import { defineConfig, sharpImageService } from 'astro/config';

export default defineConfig({
  image: {
    service: sharpImageService(),
  },
});
```

```bash
# Install Sharp as a direct project dependency
pnpm add sharp
```

Verify the fix locally before deploying:

```bash
# Build locally to confirm the error is resolved
pnpm run build
```

Deploy again. The error is gone.

<Image src="astro-image.png" alt="Astro Image component working correctly on Vercel after Sharp fix" />

## Why This Happens

[Sharp](https://www.npmjs.com/package/sharp) is a native Node.js image processor that Astro uses for image optimization at build time. It converts, resizes, and compresses images through the `<Image />` component.

The key issue is that Sharp includes **platform-specific native binaries** (C/C++). In local development, Sharp is resolved from Astro's own internal dependencies — your OS already has the matching binary. But on Vercel and other CI/CD platforms, the build environment may not have the correct Sharp binary for its architecture.

Adding Sharp as a direct dependency with `pnpm add sharp` ensures that your package manager installs the correct platform-specific binary during the build step. Instead of relying on Astro's transitive dependency, Sharp becomes a first-class dependency in your project. This is especially important with strict package managers like [pnpm](/blog/pnpm) that don't hoist transitive dependencies by default.

> For more details, see the [MissingSharp error reference](https://docs.astro.build/en/reference/errors/missing-sharp/) and the original [GitHub issue #5253](https://github.com/withastro/astro/issues/5253).

## Common Variations

The `MissingSharp` error isn't the only image issue you'll hit in Astro. Here are three related errors and their fixes.

### MissingImageDimension

```bash
[MissingImageDimension] Missing width and height attributes
```

This happens with remote or external images. Astro can't determine dimensions at build time for URLs, so you must provide them:

```jsx
// ❌ Missing dimensions for remote image
<Image src="https://example.com/photo.jpg" alt="Photo" />
```

```jsx
// ✅ Explicit width and height for remote images
<Image
  src="https://example.com/photo.jpg"
  width={800}
  height={600}
  alt="Photo"
/>
```

### RemoteImageNotAllowed

```bash
[RemoteImageNotAllowed] Remote image is not allowed
```

Astro blocks remote images from domains not in your allowlist. Add the domain to your config:

```typescript:astro.config.mjs
import { defineConfig, sharpImageService } from 'astro/config';

export default defineConfig({
  image: {
    service: sharpImageService(),
    domains: ['example.com', 'cdn.example.com'],
  },
});
```

### ImageMissingAlt

```bash
[ImageMissingAlt] Image missing required "alt" property
```

Astro enforces accessibility. Every `<Image />` needs an `alt` attribute — use `alt=""` for purely decorative images:

```jsx
// ❌ No alt attribute
<Image src={hero} />
```

```jsx
// ✅ Descriptive alt text
<Image src={hero} alt="Dashboard showing analytics overview" />
```

## Astro Image Best Practices

- **Use `<Image />` instead of `<img>`** — Astro's component handles optimization, format conversion, and [lazy loading](/snippets/lazy-loading-images-with-intersection-observer) automatically
- **Use the `densities` prop** for responsive DPI support — `densities={[1, 2]}` generates 1x and 2x variants
- **Leave `quality` at the default** — Astro's defaults balance size and clarity well. Override only when you need lossless (`quality="max"`) or aggressive compression
- **Allowlist domains for remote images** — add them to `image.domains` and always provide `width` + `height`
- **Test `astro build` locally before deploying** — catch image errors early instead of debugging failed Vercel builds
- **Configure global Sharp defaults** (Astro 6.1+) — set codec-specific options once in your config instead of on every image:

```typescript:astro.config.mjs
import { defineConfig, sharpImageService } from 'astro/config';

export default defineConfig({
  image: {
    service: sharpImageService({
      webp: { quality: 80 },
      avif: { quality: 65 },
    }),
  },
});
```

> Read more in the [Astro Image docs](https://docs.astro.build/en/guides/images/).

## Related Articles

- [Astro Framework Guide](/blog/astro) — comprehensive introduction to Astro
- [Build a Link Tree with Astro.js](/blog/linktree) — the project where I first hit this error


Fix the [MissingSharp] Could not find Sharp error when deploying Astro.js to Vercel. Step-by-step Sharp image service setup and configuration guide.

Fix: Could not find Sharp in Astro.js (Vercel Deploy)

<Image src="linktree.jpeg" alt="Custom link tree built with Astro.js" priority />

**1 hour** of work and I had my own link tree with Astro.js and Vercel on a custom subdomain — faster than any Linktree
plan, and fully under my control.

Check out the final result: [links.shramko.dev](https://links.shramko.dev/)

## TL;DR

We're building a link tree website with Astro.js and deploying it to Vercel — a simple beginner project that takes about
an hour.

- **Stack**: Astro 6 + TypeScript + Vercel
- **Result**: A static site with 100/100 Lighthouse scores
- **Features**: Typed link data, image optimization, Vercel Analytics, custom subdomain

## Why Astro.js?

I [wrote a comprehensive guide about Astro](/blog/astro), and its zero-JS-by-default approach makes it perfect for a
link tree. A link tree is static content — no React runtime needed.

Astro ranked [#1 in satisfaction](https://2025.stateofjs.com/en-US/libraries/meta-frameworks/) among meta-frameworks in
the State of JS 2025 survey. For a project like this, the results speak for themselves:

<Image src="lighthouse.png" alt="100/100 Lighthouse scores for links.shramko.dev" />

**Why the scores are high:** Astro ships zero JavaScript by default. Your link tree is pure HTML and CSS — no framework
bundle, no hydration delay. Combined with Vercel's edge CDN, the page loads in under 200ms.

## Setting Up the Project

```bash
# Create a new Astro project
pnpm create astro@latest
```

I use [pnpm](/blog/pnpm) as my package manager, but `npm` or `yarn` work fine too.

## Data Structure with TypeScript

Define a typed interface for your links and store them in a JSON file:

```typescript:types.ts
interface SocialLink {
  url: string;
  icon: string;
  title: string;
  description: string;
}

interface UserData {
  name: string;
  profession: string;
  links: SocialLink[];
}
```

```json:data/user.json
{
  "name": "Serhii Shramko",
  "profession": "Senior Software Engineer",
  "links": [
    {
      "url": "https://shramko.dev/",
      "icon": "url",
      "title": "Personal Portfolio",
      "description": "All my latest news and blog posts"
    },
    {
      "url": "https://github.com/Shramkoweb",
      "icon": "github",
      "title": "Github Profile",
      "description": "My Github"
    }
  ]
}
```

This approach separates data from markup — add, remove, or reorder links by editing JSON, not HTML.

## Layout and Components

Astro's [file-based routing](/blog/astro#file-based-routing) keeps the structure simple. One page, a few components:

```jsx:pages/index.astro
---
import Layout from '../layouts/Layout.astro';
import Profile from '../components/Profile.astro';
import List from '../components/List.astro';
---

<Layout title="Link tree | Serhii Shramko">
  <main class="container" id="container">
    <Profile />
    <List />
  </main>
</Layout>
```

Each link is a typed component that renders an icon, title, and description:

```jsx:components/Link.astro
---
interface Props {
  icon: string;
  title: string;
  description: string;
  url: string;
}

const { icon, title, description, url } = Astro.props;
---

<a href={url} class="link" target="_blank" rel="noopener noreferrer">
  <span class="link__icon">
    {icon === 'github' && <Github />}
    {icon === 'linkedin' && <Linkedin />}
    {icon === 'url' && <Url />}
    {icon === 'youtube' && <Youtube />}
  </span>

  <div class="link__content">
    <h2 class="link__title">{title}</h2>
    <p class="link__description">{description}</p>
  </div>
</a>
```

Astro lets you create components from inline SVG. Each icon is its own `.astro` file — clean, tree-shakeable, and no
icon library needed:

```jsx:components/icons/Github.astro
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
</svg>
```

## SEO and Meta Tags

Even a simple link tree benefits from proper meta tags. Add OpenGraph and social sharing tags in your layout:

```jsx:layouts/Layout.astro
---
interface Props {
  title: string;
}

const { title } = Astro.props;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    <meta name="description" content="Serhii Shramko — links to portfolio, blog, GitHub, and social profiles." />

    
    <meta property="og:title" content={title} />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://links.shramko.dev/" />
    <meta property="og:image" content="https://links.shramko.dev/og-image.png" />

    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  </head>
  <body>
    <slot />
  </body>
</html>
```

Since Astro outputs static HTML, search engines get a fully-rendered page with zero layout shift — great
for [Core Web Vitals and SEO](/blog/ai-seo-audit).

## Analytics

Add [Vercel Web Analytics](https://vercel.com/docs/analytics) to track page views without slowing down your site. The
analytics script is only 1.1KB.

For a static site, you only need the `@astrojs/vercel` adapter if you want to use Vercel services like analytics:

```bash
pnpm add @astrojs/vercel
```

```typescript:astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  adapter: vercel({
    webAnalytics: { enabled: true },
  }),
});
```

> **Note:** `output` defaults to `'static'` in Astro — no need to set it explicitly. A link tree doesn't need SSR.

<Image src="astro-analytics.jpg" alt="Vercel Analytics dashboard showing link tree traffic" />

Enable Analytics in your Vercel dashboard under Project Settings → Analytics.

## Deploying to Vercel

[Vercel auto-detects Astro projects](https://vercel.com/docs/frameworks/frontend/astro) and configures the build
settings:

1. Push your project to a GitHub repository
2. Connect your Vercel account to GitHub
3. Click "New Project" and select your repository
4. Vercel detects Astro and suggests the correct build settings
5. Click "Deploy" — done

## Custom Domain

<Image src="vercel-domain.jpg" alt="Custom subdomain configuration on Vercel dashboard" />

1. In Vercel project settings, go to the **Domains** section
2. Add your subdomain: `links.shramko.dev`
3. Vercel automatically configures the DNS records

For a subdomain, add a CNAME record pointing to `cname.vercel-dns.com` in your domain registrar.

## Common Mistakes

### Using SSR when static is enough

I [did this mistake](https://github.com/Shramkoweb/linkt-tree/commit/aa6ec4eb384007efe924ce55265919e9ae135d0f)
before =)

```typescript
// ❌ Unnecessary server-side rendering for a link tree
export default defineConfig({
  output: 'server',
  adapter: vercel(),
});
```

```typescript
// ✅ 
export default defineConfig({
  adapter: vercel({
    webAnalytics: { enabled: true },
  }),
});
```

### Not optimizing images

Use Astro's `<Image />` component instead of `<img>` for automatic optimization. If you hit the `[MissingSharp]` error
on Vercel, see my [guide to fixing it](/blog/astro-image-on-vercel).

### Missing OpenGraph meta tags

Without OG tags, links shared on social media show a blank preview. Always include `og:title`, `og:image`, and
`og:description` in your layout.

## Related Articles

- [Astro Framework Guide](/blog/astro) — comprehensive introduction to Astro 6
- [Fix: Could not find Sharp in Astro.js](/blog/astro-image-on-vercel) — resolve the MissingSharp error on Vercel

Build a custom link tree with Astro.js and deploy it on Vercel. Step-by-step tutorial with TypeScript, analytics setup, and performance optimization tips.

Build a Link Tree with Astro.js and Vercel (2026 Guide)

<Image src="astro.jpg" alt="Astro Framework Logo" />

**Astro is a web framework that ships zero JavaScript by default, delivering lightning-fast websites through its Islands Architecture.** This Astro framework guide covers everything you need to build content-driven sites — blogs, marketing pages, docs, and e-commerce storefronts. Astro renders HTML at build time and hydrates only the interactive components you choose.

As of 2026, Astro 6.x powers over 1.3 million weekly npm downloads and holds 57K+ GitHub stars. It ranked **#1 in satisfaction** among meta-frameworks in the [State of JS 2025](https://2025.stateofjs.com/en-US/libraries/meta-frameworks/) survey — with a 39% gap over Next.js. In January 2026, [Cloudflare acquired Astro](https://blog.cloudflare.com/astro-joins-cloudflare/), signaling long-term investment in the framework's future.

> **Why Astro over Next.js?** If your site is primarily content (blogs, docs, landing pages), Astro delivers smaller bundles and faster page loads — no React runtime ships unless you need it. Next.js excels for highly interactive apps. Choose the right tool for the job.

## TL;DR

- **Zero JS by default** — Astro renders static HTML; no JavaScript ships unless you opt in
- **Islands Architecture** — hydrate only interactive components, not the entire page
- **UI-agnostic** — use React, Vue, Svelte, Solid, or plain HTML in the same project
- **Content Collections** — type-safe content management with schema validation
- **View Transitions** — native page transitions without a SPA framework
- **Server Islands** — defer server-rendered components with `server:defer`

## Islands Architecture

Astro pioneered the [Islands Architecture](https://docs.astro.build/en/concepts/islands/) for the web. Think of your page as an ocean of static HTML with small "islands" of interactivity.

```md:src/pages/index.astro
---
// Static content — ships as HTML, zero JS
import Header from '../components/Header.astro';
import Newsletter from '../components/Newsletter.tsx';
import Footer from '../components/Footer.astro';
---

<Header />

<main>
  <h1>Welcome to my site</h1>
  <p>This paragraph is static HTML. No JavaScript needed.</p>

  
  <Newsletter client:visible />
</main>

<Footer />
```

The `Header`, `Footer`, and all HTML ship as plain markup. Only the `Newsletter` component loads JavaScript — and only when it scrolls into view. This is why Astro sites score 90+ on Lighthouse by default.

## Content Collections and the Content Layer API

[Content Collections](https://docs.astro.build/en/guides/content-collections/) give you type-safe access to Markdown, MDX, JSON, and YAML content. Define a schema, and Astro validates your frontmatter at build time.

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

const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/data/blog' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };
// Output: type-safe collection with validated frontmatter
```

Query your content with full [TypeScript](/blog/discriminated-unions) autocompletion:

```md:src/pages/blog/index.astro
---
import { getCollection } from 'astro:content';

const posts = await getCollection('blog', ({ data }) => !data.draft);
// Output: Array of type-safe blog post objects
---

<ul>
  {posts.map(post => (
    <li>
      <a href={`/blog/${post.id}`}>{post.data.title}</a>
    </li>
  ))}
</ul>
```

The Content Layer API (Astro 5+) extends this to external sources — CMS platforms, databases, or APIs — using the same type-safe interface. See the [Content Layer docs](https://docs.astro.build/en/guides/content-collections/#the-content-layer) for details.

## View Transitions

Astro provides native [View Transitions](https://docs.astro.build/en/guides/view-transitions/) that create smooth page navigation without client-side routing.

```md:src/layouts/Base.astro
---
import { ViewTransitions } from 'astro:transitions';
---

<html>
  <head>
    <ViewTransitions />
  </head>
  <body>
    <slot />
  </body>
</html>
```

Add per-element animations with the `transition:animate` directive:

```md
<h1 transition:animate="slide">Page Title</h1>
<article transition:animate="fade">Content here</article>
```

> **Gotcha:** Scripts run only on initial page load by default. If you need code to run on every navigation, listen for the `astro:page-load` event:

```html
<script>
  document.addEventListener('astro:page-load', () => {
    // Runs on every page navigation
    console.log('Page loaded');
  });
</script>
```

## Server Islands

[Server Islands](https://docs.astro.build/en/guides/server-islands/) (Astro 5+) let you defer specific components to render on the server at request time while the rest of the page is statically cached.

```md:src/pages/product.astro
---
import ProductInfo from '../components/ProductInfo.astro';
import UserCart from '../components/UserCart.astro';
---


<ProductInfo />


<UserCart server:defer>
  <p slot="fallback">Loading cart...</p>
</UserCart>
```

This is perfect for personalized content (user carts, dashboards) on otherwise static pages. The static parts serve instantly from the CDN while the dynamic island streams in.

## Creating Your First Project

```shell
# Create a new Astro 6.x project
npm create astro@latest

# Start the dev server
npm run dev
```

<Image src="astro-dev.jpeg" alt="Astro welcome screen on localhost" />

Astro scaffolds a project with file-based routing, TypeScript support, and zero configuration. Add integrations like React, Tailwind, or MDX with one command:

```shell
npx astro add react mdx
```

## File-Based Routing

Astro uses [file-based routing](https://docs.astro.build/en/guides/routing/). Files in `src/pages/` become pages on your site:

```shell
# Static routes
src/pages/index.astro        → site.com/
src/pages/about.astro         → site.com/about
src/pages/blog/first-post.md  → site.com/blog/first-post
```

Dynamic routes use bracket syntax with `getStaticPaths()`:

```md:src/pages/blog/[slug].astro
---
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
// Output: renders a page for each blog post
---

<h1>{post.data.title}</h1>
```

## Astro Component Structure

Every `.astro` component has two parts: the Component Script (frontmatter) and the Component Template.

```md:src/components/Greeting.astro
---
// Component Script — runs at build time
const { name } = Astro.props;
const greeting = `Hello, ${name}!`;
---


<h1>{greeting}</h1>

<style>
  h1 { color: navy; }
</style>
```

Use [slots](https://docs.astro.build/en/basics/astro-components/#slots) to pass child content into components:

```md:src/components/Wrapper.astro
---
const { title } = Astro.props;
---

<div class="wrapper">
  <h1>{title}</h1>
  <slot />  
</div>
```

## Client Directives (Hydration)

By default, UI framework components render as static HTML with **no JavaScript**. Use `client:*` directives to hydrate interactive [islands](https://docs.astro.build/en/concepts/islands/).

| Directive | Priority | When It Loads | Use Case |
|-----------|----------|---------------|----------|
| `client:load` | High | Immediately on page load | Buttons, modals, forms |
| `client:idle` | Medium | After page finishes loading | Analytics, non-critical widgets |
| `client:visible` | Low | When scrolled into viewport | Below-fold carousels, comments |
| `client:media` | Low | When CSS media query matches | Mobile-only sidebars |
| `client:only` | — | Client-only, no SSR HTML | Components needing `window` |

### The #1 Beginner Mistake

"Why isn't my `onClick` working?" — Because you forgot the client directive.

```jsx
// ❌ Wrong — renders as static HTML, no JavaScript runs
<Counter />
```

```jsx
// ✅ Correct — hydrates the component on page load
<Counter client:load />
```

Without a `client:*` directive, your React/Vue/Svelte component renders HTML only. Event handlers, state, and effects won't work. See the [client directives reference](https://docs.astro.build/en/reference/directives-reference/#client-directives).

Use `client:only="react"` when a component has no meaningful server-rendered HTML or depends on browser-only APIs like `window` or `localStorage`.

## Data Fetching

Astro supports two primary data fetching patterns.

**Content Collections** (recommended for local content):

```md
---
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
// Output: type-safe array of blog posts
---
```

**Global `fetch()`** for external APIs:

```md:src/pages/users.astro
---
const response = await fetch('https://api.github.com/users/octocat');
const user = await response.json();
// Output: { login: "octocat", name: "The Octocat", ... }
---

<h1>{user.name}</h1>
<p>{user.bio}</p>
```

> Before using React components for fetched data, add the [React integration](https://docs.astro.build/en/guides/integrations-guide/react/).

<Image src="astro-dev.gif" alt="Data fetching in Astro" />

**Build-time vs runtime:** In static mode (default), `fetch()` runs at build time. With [SSR enabled](https://docs.astro.build/en/guides/on-demand-rendering/), it runs on each request. Read more in the [data fetching docs](https://docs.astro.build/en/guides/data-fetching/).

## Styles & CSS

Astro scopes `<style>` blocks to their component by default — no CSS leaks:

```md:src/components/Card.astro
<style>
  /* Only applies to <h2> inside this component */
  h2 { color: navy; }
</style>

<h2>Scoped heading</h2>
```

**Tailwind CSS v4** setup uses the Vite plugin (the `@astrojs/tailwind` integration is deprecated in Astro 5+):

```shell
npm install tailwindcss @tailwindcss/vite
```

```ts:astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});
```

```css:src/styles/global.css
@import 'tailwindcss';
```

Astro also supports [Sass, Less, and CSS Modules](https://docs.astro.build/en/guides/styling/) out of the box.

> **Gotcha:** Styles inside `<style>` blocks cannot target elements inside `<astro-island>` wrappers. Use `:global()` or Tailwind utility classes for hydrated framework components.

## Astro vs Next.js: When to Use Each

Both are excellent frameworks, but they solve different problems.

| | Astro | Next.js |
|---|---|---|
| **Best for** | Content sites, blogs, docs, marketing | Interactive apps, dashboards, SaaS |
| **Default JS** | Zero | Full React runtime |
| **Rendering** | Static-first, opt-in SSR | SSR-first, opt-in static |
| **UI framework** | Any (or none) | React only |
| **Learning curve** | Low (HTML-first) | Medium (React required) |

**Choose Astro** when your site is mostly content with pockets of interactivity. **Choose Next.js** when every page needs heavy client-side state and routing. You can always use React components in Astro for the interactive parts — get the best of both worlds.

## Common Mistakes

### Forgetting `client:*` directives

```jsx
// ❌ No interactivity — renders as static HTML
<ReactForm />
```

```jsx
// ✅ Hydrated — event handlers and state work
<ReactForm client:load />
```

### Using the deprecated Tailwind integration

```shell
# ❌ Deprecated in Astro 5+
npx astro add tailwind
```

```shell
# ✅ Use the Vite plugin instead
npm install tailwindcss @tailwindcss/vite
```

### Ignoring `astro:page-load` with View Transitions

```html

<script>
  document.querySelector('.menu').addEventListener('click', toggle);
</script>
```

```html

<script>
  document.addEventListener('astro:page-load', () => {
    document.querySelector('.menu').addEventListener('click', toggle);
  });
</script>
```

### Fetching content without Content Collections

```md
---
// ❌ Manual glob — no type safety, no validation
const posts = await Astro.glob('../content/blog/*.md');
---
```

```md
---
// ✅ Type-safe with schema validation (Astro 5+)
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
---
```

## Why Learn Astro in 2026?

Astro ranked **#1 in satisfaction** among meta-frameworks in the [State of JS 2025](https://2025.stateofjs.com/en-US/libraries/meta-frameworks/) survey — a 39% gap over Next.js. With ~1.3M weekly npm downloads and 57K+ GitHub stars, it's one of the fastest-growing web frameworks.

In January 2026, [Cloudflare acquired Astro](https://blog.cloudflare.com/astro-joins-cloudflare/), bringing enterprise backing and deeper edge computing integration. The ecosystem continues to grow with [Starlight](https://starlight.astro.build/) (documentation framework) powering docs for Cloudflare, Sentry, and Stripe.

Whether you're building a personal blog, a [link tree](/blog/linktree), or deploying [images on Vercel](/blog/astro-image-on-vercel), Astro keeps your sites fast by default.

## Useful Links

- [Astro home page](https://astro.build/)
- [Astro documentation](https://docs.astro.build/en/getting-started/)
- [Astro GitHub repository](https://github.com/withastro/astro)
- [Astro integrations directory](https://astro.build/integrations/)
- [Starlight — documentation framework built on Astro](https://starlight.astro.build/)
- [State of JS 2025 — meta-frameworks](https://2025.stateofjs.com/en-US/libraries/meta-frameworks/)
- [Are SPAs better than MPAs? | HTTP 203](https://www.youtube.com/watch?v=ivLhf3hq7eM)

## My Astro Projects

- [Building a Link Tree](/blog/linktree) — my personal linktree with Astro and Vercel
- [Astro Image Component on Vercel](/blog/astro-image-on-vercel) — fixing image optimization for Vercel deployments

Master the Astro framework with this hands-on guide. Islands Architecture, Content Collections, View Transitions, and client directives with code examples.

Astro Framework Guide: Build Faster Sites in 2026

Learn Astro.js from basics to advanced. Build fast static sites with partial hydration and seamless React, Vue, or Svelte integrations.

Astro3 articles

Articles

How to Fix MissingSharp Error in Astro.js on Vercel

Build Your Own Link Tree with Astro.js and Vercel

What Is Astro? The Complete Framework Guide for 2026