Locally developing NextJS and fetch getting self signed cert error

Question

I'm new to NextJS. I'm writing an app using NextJS for the front end and .NET Core API on the back end.

Usually, I can have visual studio create a self signed cert to run my apis with SSL and then have front end apps use that self signed cert to run things locally (at least I've done this with Angular without any issues).

I'm not sure how to do this with NextJS. My fetch command in my nextjs API, is failing because of the self-signed cert. Is there an easy way to tell NextJS that while I'm running localhost, ignore that a self signed cert is in the chain?

Answer 1

I was running into the same error when developing a front-end NextJS and trying to connect it with a .NET Core API.

error - FetchError: request to https://localhost:7291/product/all failed, reason: self signed certificate

The way I fixed this problem was configuring my .NET Core API to not redirect requests to HTTPS. Inside my Program.cs file, I only removed the line 'app.UseHttpsRedirection()' and it worked perfectly. No more errors.

var app = builder.Build();
{
    app.UseCors();
    // app.UseHttpsRedirection(); 
    app.MapControllers();
    app.Run();
}

I hope it work for you, too. I found the solution for this here: How to Disable SSL on ASP.NET Core 5 Project in Visual Studio 2022?

PS: Also, if you have configured some CORS policy, don't forget to pass it in app.UseCors(my_CORS_policy).

Answer 2

As of version 13.5.0 there's experimental support for this feature.

Update your package.json script with the following:
next dev --experimental-https

It will generate certificates for localhost using mkcert. If you've written your own backend separately using something like NodeJS or NestJS, etc. and have already generated local SSL certificates, replace them with the ones generated by NextJS and update your paths. Both client and API must use the same certificates.

More info via Github here