Manually added Razor page doesn't render razor component

I started a project as .NET Minimal API - no UI whatsoever.Then I needed to add a visual tool for the API, to show what the service is doing.

For UI I wanted to use Razor pages and components, as it looked most similar to React (the comments will kill me :) ), but I'm otherwise not familiar with it.

I added a page and a component, where the component is expected to render a key/value pair.Instead, the component name is rendered in HTML, so nothing shows up in the browser.

I'm new to razor/blazor and I want to figure out what went wrong here, even though I can start a new project and move the API there.

Here's the gist of my setup.

There are no wwwroot or any CSS, js or HTML that the regular Visual Studio templates would bring. Only manually added /Pages and /Pages/Components folders.

In my program.cs I added

// Program.cs...builder.Services.AddRazorPages();builder.Services.AddRazorComponents();builder.Services.AddServerSideBlazor();...app.MapGroup("/api/counters").MapCountersEndpoints(); // an API that was the original purposeapp.MapRazorPages();app.MapBlazorHub();

I also added /Pages/Counters.cshtml and /Pages/Components/NamedValue.razor

Counters.cshtml:

@page "/ui/counters"@{<h3>NamedValue:</h3><div><NamedValue Key="AKey" Value="A Value" /></div>}

and NamedValue.razor:

<div class="item-key-value component"><span class="item-key">@Key</span> =<span class="item-value">@Value</span></div>@code {    [Parameter]    public string Key { get; set; } = string.Empty;    [Parameter]    public string Value { get; set; } = string.Empty;}