Pages & Routing
Adding pages, building dynamic routes, and sharing a layout across them.
Updated: September 2026·License: Commercial & Personal
Adding a page
Create a file in src/pages/. An .astro file has frontmatter above the fence and markup below it:
astro
---
import Layout from '../layouts/Layout.astro';
const heading = 'About the studio';
---
<Layout title="About">
<h1>{heading}</h1>
<p>Anything here is plain HTML.</p>
</Layout>Dynamic routes
A filename in brackets becomes a parameter. Static builds need to know every URL up front, so the file exports getStaticPaths():
astro
---
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
const posts = await getCollection('journal');
return posts.map((post) => ({
params: { slug: post.id },
props: { post },
}));
}
const { post } = Astro.props;
const { Content } = await post.render();
---
<article>
<h1>{post.data.title}</h1>
<Content />
</article>Anything returned in props is available on Astro.props, which avoids re-fetching the entry inside the template.
Explore production-ready themes
Hand-built Astro themes — SaaS, storefront, portfolio, and dashboard.