RedirectPage Component

A static, client-side redirect stub for hosts without server-side redirect support (GitHub Pages, S3, any plain CDN). Renders a page that redirects via <meta http-equiv="refresh">, a <link rel="canonical"> for search engines, and a window.location.replace() fallback for browsers that ignore meta-refresh.

Basic Usage

1
---
2
import { RedirectPage } from '@lad-sapienza/scms-core';
3
export const prerender = true;
4
---
5
<RedirectPage target="/it/chi-siamo" />

Props API

When to use this vs. Astro’s native redirects

Astro’s own redirects config option in astro.config.mjs generates the same kind of stub automatically for output: 'static' sites, and should be preferred whenever it applies — it’s zero extra code:

1
export default defineConfig({
2
  redirects: {
3
    '/chi-siamo': '/it/chi-siamo',
4
  },
5
});

This works fine even when the destination is produced by a dynamic route (e.g. /it/chi-siamo generated by src/pages/[locale]/chi-siamo.astro), as long as the source path itself is static. Astro only rejects a redirect when the source has dynamic segments of its own and the destination needs a parameter the source doesn’t carry — the common case being a locale prefix added to every URL of a content collection:

1
redirects: {
2
  // Fails at build time: InvalidRedirectDestination — the destination
3
  // doesn't match any registered route, since `it` can't be hardcoded
4
  // into a path that's supposed to satisfy the [locale] param.
5
  '/notizie/[...slug]': '/it/notizie/[...slug]',
6
}

For that case — redirecting every entry of a collection whose new URL carries a param the old flat URL didn’t have — use RedirectPage with getStaticPaths, reading the slug list straight from the collection so it can’t drift out of sync with the content:

1
---
2
import { RedirectPage } from '@lad-sapienza/scms-core';
3
import { getCollection } from 'astro:content';
4

5
export const prerender = true;
6

7
export async function getStaticPaths() {
8
  const articles = await getCollection('notizie');
9
  return articles
10
    .filter((a) => a.id.startsWith('it/'))
11
    .map((a) => ({ params: { slug: a.id.slice('it/'.length) } }));
12
}
13

14
const { slug } = Astro.params;
15
---
16
<RedirectPage target={`/it/notizie/${slug}/`} />

See the RedirectPage README in the @lad-sapienza/scms-core repo for the full recipe and rationale.

Related Components

• TableOfContents: another plain .astro utility component, same import style
• Works together with Astro’s redirects config rather than replacing it — see above

See the documentation index for the rest of the component reference.