CODEWITHSUNDEEP
next.js
JakeHova
JakeHova

Reputation: 1365

Locally developing NextJS and fetch getting self signed cert error

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?

Upvotes: 15

Views: 27027

Answers (5)

pallav deshmukh
pallav deshmukh

Reputation: 253

Make sure your .env.production file has

NEXT_PUBLIC_API_MOCKING=disabled

Upvotes: 0

iicaptain
iicaptain

Reputation: 1195

If you haven't already you need to setup a custom local server for NextJS because it doesn't support local development with SSL out of the box. Here is a guide on how to do that. This is a highly requested feature for NextJS.

Update Jan 2024:

As of NextJS 13.5.1 you can use https with the flag --experimental-https

Upvotes: 7

Kyle
Kyle

Reputation: 4449

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

Upvotes: 8

direnc
direnc

Reputation: 11

There is now experimental support for this at release 13.5.4 of NextJS.

Upvotes: 1

Matheus Oliveira Damião
Matheus Oliveira Damião

Reputation: 161

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).

Upvotes: 11

Related Questions