withastro · Princesseuh · Mar 18, 2026 · Mar 16, 2026 · Mar 16, 2026 · Mar 16, 2026
diff --git a/.changeset/ready-times-wave.md b/.changeset/ready-times-wave.md
@@ -0,0 +1,5 @@
+---
+'astro': major
+---
+
+allow dynamic parameters in .html.astro routes
diff --git a/packages/astro/src/core/app/base.ts b/packages/astro/src/core/app/base.ts
@@ -470,11 +470,27 @@ export abstract class BaseApp<P extends Pipeline = AppPipeline> {
 			});
 		}
 		let pathname = this.getPathnameFromRequest(request);
-		// In dev, the route may have matched a normalized pathname (after .html stripping).
-		// Apply the same normalization for correct param extraction.
-		if (this.isDev()) {
-			pathname = pathname.replace(/\/index\.html$/, '/').replace(/\.html$/, '');
-		}
+		// In dev, normalized paths (like stripping .html) are often used for matching.
+    // However, if the route explicitly matches the .html path (e.g., [slug].html.astro),
+    // we skip normalization to ensure correct param extraction.
+    if (this.isDev()) {
+      if (pathname.endsWith('.html')) {
+        const isIndexHtml = /\/index\.html$/.test(pathname);
+        const isExactMatch = routeData && routeData.pattern.test(pathname);
+
+        // Normalize only if it's index.html or if the current route doesn't 
+        // explicitly support the .html extension.
+        if (isIndexHtml || !isExactMatch) {
+          pathname = pathname.replace(/\/index\.html$/, '/').replace(/\.html$/, '');
+
+          // Re-match to ensure routeData aligns with the newly normalized pathname.
+          const result = await this.devMatch(pathname);
+          if (result) {
+            routeData = result.routeData;
+          }
+        }
+      }
+    }
 		const defaultStatus = this.getDefaultStatusCode(routeData, pathname);
 
 		let response;

diff --git a/packages/astro/src/core/render/params-and-props.ts b/packages/astro/src/core/render/params-and-props.ts
@@ -88,15 +88,19 @@ export function getParams(route: RouteData, pathname: string): Params {
 	// The RegExp pattern expects a decoded string, but the pathname is encoded
 	// when the URL contains non-English characters.
 	let path = pathname;
-	// The path could contain `.html` at the end. We remove it so we can correctly the parameters
-	// with the generated keyed parameters.
-	if (pathname.endsWith('.html')) {
-		path = path.slice(0, -5);
-	}
+	// The path could contain `.html` at the end. We remove it for standard routes
+	// to match parameters correctly, but we keep it if the route explicitly 
+	// targets `.html` files (e.g. [slug].html.astro) to ensure correct extraction.
+	let paramsMatch =
+    route.pattern.exec(path) ||
+    route.fallbackRoutes.map((fallbackRoute) => fallbackRoute.pattern.exec(path)).find((x) => x);
 
-	const paramsMatch =
-		route.pattern.exec(path) ||
-		route.fallbackRoutes.map((fallbackRoute) => fallbackRoute.pattern.exec(path)).find((x) => x);
+  if (!paramsMatch && pathname.endsWith('.html')) {
+    path = pathname.slice(0, -5);
+    paramsMatch =
+      route.pattern.exec(path) ||
+      route.fallbackRoutes.map((fallbackRoute) => fallbackRoute.pattern.exec(path)).find((x) => x);
+  }
 	if (!paramsMatch) return {};
 	const params: Params = {};
 	route.params.forEach((key, i) => {

diff --git a/packages/astro/test/fixtures/ssr-html-route/astro.config.mjs b/packages/astro/test/fixtures/ssr-html-route/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import node from '@astrojs/node';
+
+export default defineConfig({
+  output: 'server',
+  adapter: node({ mode: 'standalone' }),
+});
diff --git a/packages/astro/test/fixtures/ssr-html-route/package.json b/packages/astro/test/fixtures/ssr-html-route/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "ssr-html-route",
+  "type": "module",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/node": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/ssr-html-route/src/pages/[slug].html.astro b/packages/astro/test/fixtures/ssr-html-route/src/pages/[slug].html.astro
@@ -0,0 +1,9 @@
+---
+const { slug } = Astro.params;
+---
+<html>
+  <head><title>Dynamic HTML Route</title></head>
+  <body>
+    <div>Slug: {slug}</div>
+  </body>
+</html>
diff --git a/packages/astro/test/fixtures/ssr-html-route/src/pages/index.astro b/packages/astro/test/fixtures/ssr-html-route/src/pages/index.astro
@@ -0,0 +1,3 @@
+---
+---
+<div>Home</div>
diff --git a/packages/astro/test/fixtures/ssr-html-route/src/pages/standard.astro b/packages/astro/test/fixtures/ssr-html-route/src/pages/standard.astro
@@ -0,0 +1,9 @@
+---
+// URL: /standard.html
+---
+<html>
+  <head><title>Standard Route</title></head>
+  <body>
+    <div>standard</div>
+  </body>
+</html>
diff --git a/packages/astro/test/ssr-html-route.test.js b/packages/astro/test/ssr-html-route.test.js
@@ -0,0 +1,40 @@
+import assert from 'node:assert/strict';
+import { before, after, describe, it } from 'node:test';
+import { loadFixture } from './test-utils.js';
+
+describe('SSR: [slug].html.astro routing', () => {
+  let fixture;
+  let devServer;
+
+  before(async () => {
+    fixture = await loadFixture({
+      root: './fixtures/ssr-html-route/',
+    });
+    devServer = await fixture.startDevServer();
+  });
+
+  after(async () => {
+    if (devServer) await devServer.stop();
+  });
+
+  it('extracts params correctly from [slug].html.astro', async () => {
+    const response = await fixture.fetch('/dummy.html');
+    assert.equal(response.status, 200);
+    const html = await response.text();
+    assert.match(html, /Slug: dummy/);
+  });
+
+  it('should still work for standard [slug].astro by stripping .html from URL', async () => {
+    const response = await fixture.fetch('/standard.html');
+    assert.equal(response.status, 200);
+    const html = await response.text();
+    assert.match(html, /standard/); 
+  });
+
+  it('should normalize index.html to /', async () => {
+  const response = await fixture.fetch('/index.html');
+  assert.equal(response.status, 200);
+  const html = await response.text();
+  assert.match(html, /Home/);
+});
+});