Next.js Discord

Discord Forum

Fusing Next Js with AspNetCore

Answered
Cão de Gado Transmontano posted this in #help-forum
Open in Discord
Avatar
Cão de Gado TransmontanoOP
I'm migrating an existing Create React App project to Next Js, as CRA got deprecated. Now that I've fixed all the hydration errors, got all the pages migrated, the last step is hooking it into the AspNetCore middleware and deploying it to the QA environment.

Previously, we've used AspNetCore's Startup.cs file to build everything and start the frontend alongside the backend to bundle it into one service. This worked great for Create React App, but not so much for Next Js. No matter how we build the Next Js project, I get the following error when deploying the project:

{
    "error": {
        "type": "InvalidOperationException",
        "message": "The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request.\n",
        "correlationId": "<>"
    },
    "additionalData": null
}


This is obviously due to Next Js not using a traditional index.html, but we don't even route to / as it redirects to a url such as /abc automatically.

We've tried a static export, but due to dynamically loading in components to fix certain errors, generateStaticParams also gives us some problems that I'm trying to see if I can fix. Otherwise, the other solution we're working on is mixing App routing (what everything current uses) with Pages routing (what I don't want to use since it's older). I have no idea which approach would actually work, so I'm asking the community here to see if anyone's gone down the same path as me.

Has anyone else tried to get their project working without a static export and successfully got an app deployed with AspNetCore middleware?
Answered by Xantus's Hummingbird
Has anyone else tried to get their project working without a static export and successfully got an app deployed with AspNetCore middleware?

AspNetCore can only serve a Next-site as a set of static HTML/JS/CSS files. And the only way to produce that from a Next project is (as far as I know) to use [Static Exports](https://nextjs.org/docs/app/building-your-application/deploying/static-exports).

Since it seems that Next Static Exports don't produce a single index.html file as CRA, you may be better off scrapping the SPA middleware and simply use "[default files](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-9.0#serve-default-documents)" together with the "[trailing slash](https://nextjs.org/docs/app/building-your-application/deploying/static-exports#configuration)" configuration?

// Program.cs:
app.UseDefaultFiles();
app.UseStaticFiles();

// next.config.js
trailingSlash: true,
View full answer

6 Replies

Avatar
Xantus's Hummingbird
Has anyone else tried to get their project working without a static export and successfully got an app deployed with AspNetCore middleware?

AspNetCore can only serve a Next-site as a set of static HTML/JS/CSS files. And the only way to produce that from a Next project is (as far as I know) to use [Static Exports](https://nextjs.org/docs/app/building-your-application/deploying/static-exports).

Since it seems that Next Static Exports don't produce a single index.html file as CRA, you may be better off scrapping the SPA middleware and simply use "[default files](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-9.0#serve-default-documents)" together with the "[trailing slash](https://nextjs.org/docs/app/building-your-application/deploying/static-exports#configuration)" configuration?

// Program.cs:
app.UseDefaultFiles();
app.UseStaticFiles();

// next.config.js
trailingSlash: true,
Answer
Avatar
Cão de Gado TransmontanoOP
Okay, that makes sense! Will static export mess up any pages with slugs? I have stuff that’s like /item/[id] but I can’t generate every possible parameter because there’s millions of ID’s 😅
Thank you for the helpful links btw
And by scrapping the SPA middleware, do you mean I’d have to rip out anything that has SPA in the function name? Essentially learn how the startup.cs file works and get a non-SPA middleware working?
Avatar
Xantus's Hummingbird
Will static export mess up any pages with slugs? I have stuff that’s like /item/[id] but I can’t generate every possible parameter because there’s millions of ID’s 😅

Oh that was an aspect I hadn't thought of 🫤 . I have not used static exports myself.

Perhaps you could take a look at this: https://github.com/davidnx/NextjsStaticHosting-AspNetCore
Avatar
Cão de Gado TransmontanoOP
I have found this as well, but wasn't sure if it would fit my use case. I'll definitely look into it again though now that I'm thinking more about a static export. I appreciate your help!