Sitecore JSS URL redirecting to not found

Question

Getting the below error when browsing the app URL in connected mode:

On browsing https://xyz-app.dev.local it gets redirected to https://xyz-app.dev.local/sitecore/service/notfound.aspx

I can see the JSON response for it on https://xyz-app.dev.local/sitecore/api/layout/render/jss?item=/&sc_apikey={ABC}&sc_site=xyz-app

I can also see the content on http://localhost:3000/ and experience editor.

Sitecore version - 10.3

JSS version - 21.0.2

Framework - NextJs

xyz-app.config:

<sites>
    <site patch:before="site[@name='website']" 
    inherits="website" 
    name="xyz-app" 
    hostName="xyz-app.dev.local" 
    rootPath="/sitecore/content/xyz-app" 
    startItem="/home" 
    database="master" />
</sites>

<app name="xyz-app" 
    layoutServiceConfiguration="default" 
    sitecorePath="/sitecore/content/xyz-app" 
    useLanguageSpecificLayout="true" 
    graphQLEndpoint="/sitecore/api/graph/edge" 
    inherits="defaults" 
    serverSideRenderingEngine="http"
    serverSideRenderingEngineEndpointUrl="http://localhost:3000/api/editing/render"
    serverSideRenderingEngineApplicationUrl="http://localhost:3000" />
</apps>

scjssconfig.json:

{
      "sitecore": {
        "instancePath": "C:\\inetpub\\wwwroot\\sitecore103.dev.local",
        "apiKey": "ABC",
        "deploySecret": "abc",
        "deployUrl": "https://xyz-app.dev.local/sitecore/api/jss/import",
        "layoutServiceHost": "https://xyz-app.dev.local"
      }
}

I've allowed all (*) for CORS origin and allowed controls on the API key.