What Causes This Error?
This error occurs when you visit a URL that matches a dynamic route pattern, but getStaticPaths() didn’t return that specific path. The route exists, but the requested path wasn’t generated.
The Problem
---
// src/pages/blog/[slug].astro
export function getStaticPaths() {
return [
{ params: { slug: 'post-1' } },
{ params: { slug: 'post-2' } },
];
}
---
<!-- Visiting /blog/post-3 throws error - not in getStaticPaths -->
The Fix
Add Missing Path
---
export function getStaticPaths() {
return [
{ params: { slug: 'post-1' } },
{ params: { slug: 'post-2' } },
{ params: { slug: 'post-3' } }, // ✅ Add the missing path
];
}
---
Generate Paths Dynamically
---
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
// ✅ Generate from actual content
const posts = await getCollection('blog');
return posts.map((post) => ({
params: { slug: post.slug },
props: { post },
}));
}
---
Add Catch-All Route
---
// src/pages/blog/[...slug].astro
export function getStaticPaths() {
const posts = await getCollection('blog');
return [
...posts.map((post) => ({
params: { slug: post.slug },
props: { post, is404: false },
})),
// ✅ Catch-all for unknown paths
{
params: { slug: undefined },
props: { is404: true },
},
];
}
const { post, is404 } = Astro.props;
---
{is404 ? <h1>Post Not Found</h1> : <h1>{post.data.title}</h1>}
Common Scenarios
Content Was Deleted
---
// If you deleted a blog post but still have links to it
export async function getStaticPaths() {
const posts = await getCollection('blog');
// Check if your content collection has the expected entries
console.log('Available posts:', posts.map(p => p.slug));
return posts.map((post) => ({
params: { slug: post.slug },
props: { post },
}));
}
---
Case Sensitivity
---
// URLs are case-sensitive!
export function getStaticPaths() {
return [
{ params: { slug: 'my-post' } }, // Matches /blog/my-post
// Does NOT match /blog/My-Post or /blog/MY-POST
];
}
---
Enable SSR for Dynamic Content
---
// src/pages/blog/[slug].astro
export const prerender = false; // ✅ Handle at runtime
const { slug } = Astro.params;
const post = await db.posts.findOne({ slug });
if (!post) {
return Astro.redirect('/404');
}
---
Quick Checklist
- Verify the path exists in
getStaticPaths()return - Check for typos and case sensitivity
- Ensure content collection entries exist
- Consider SSR for dynamic/user-generated paths
- Add catch-all for graceful 404 handling