How can I use Next.js over HTTPS instead of HTTP? #10935
-
I want to make a request to an API, however, it must be done over HTTPS. I want to configure next so that the app is running at https://localhost:3000 and not http://localhost:3000. Can someone help me with this? |
Beta Was this translation helpful? Give feedback.
Replies: 55 comments 128 replies
-
@m-abdelwahab check this out https://gist.github.com/cecilemuller/9492b848eb8fe46d462abeb26656c4f8 or mkcert |
Beta Was this translation helpful? Give feedback.
-
Once you have certificates, based on the following example: https://github.com/zeit/next.js/tree/canary/examples/custom-server
|
Beta Was this translation helpful? Give feedback.
-
Why doesn't next have a config to force ssl? I had to setup a separate node server.js just to use the express force ssl middleware and then I lose the next server optimizations |
Beta Was this translation helpful? Give feedback.
-
I opened a PR for this, but no one has commented. It's not ready for merge, but wanted some feedback on whether there's interest before I convert to typescript |
Beta Was this translation helpful? Give feedback.
-
One way to enable https during local development is to use something like local-ssl-proxy. |
Beta Was this translation helpful? Give feedback.
-
What needs to be done for this to become a thing? |
Beta Was this translation helpful? Give feedback.
-
I know this is kind of a silly thing, but I have a client using a third-party JS that basically does nothing when rendered without SSL which is quite difficult to test. Using a custom server isn't really worth it for us at this time, but having a quick and easy way to add a self-signed certificate would be super handy. |
Beta Was this translation helpful? Give feedback.
-
@Timer I see the pull request was closed for further discussion. Will the discussion happen on this thread or is it between maintainers elsewhere? |
Beta Was this translation helpful? Give feedback.
-
In order to keep the next server as it is (I don't like the idea of losing the next server optimizations), but still access the GeoLocation API from my browser in my local environment (and the other APIs that are available only in secure contexts (HTTPS), I'm using ngrok which works flawlessly (and is free for normal usage): $ ngrok http 3000 👈 replace with the port you are using locally
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Account xxx (Plan: Free)
Version 2.3.35
Region Europe (eu)
Web Interface http://127.0.0.1:4040
Forwarding http://xxxxxx.eu.ngrok.io -> http://localhost:3000
Forwarding https://xxxxxx.eu.ngrok.io -> http://localhost:3000 You can then access https://xxxxxx.eu.ngrok.io and have fun 😉. On top of that, people outside of your network can access your app. |
Beta Was this translation helpful? Give feedback.
-
This is useful if you are using chrome and want a quick workaround Got to Insert the URL(s) of your development environment relaunch chrome This allowed me to test getUserMedia with the camera, I have not tested it for other use cases. Cheers |
Beta Was this translation helpful? Give feedback.
-
Facebook login now only works over https, it would be really good to have a simple way to run local Next.js on |
Beta Was this translation helpful? Give feedback.
-
For everyone complaining about running next on https, there is an easy solution. I don't know if it works with You'll need Then you may update your host file, usually
|
Beta Was this translation helpful? Give feedback.
-
@NoelBaron I had a similar custom server, but there are problems with this approach. Here's another issue I created detailing one of the problems: nextauthjs/next-auth#1324 (comment) |
Beta Was this translation helpful? Give feedback.
-
There are a lot of reasons developers need https support for local testing. Losing server optimization is not an option, especially in this new era of Core Web Vitals testing that absolutely requires static optimization support. Developers should not be forced to chose between https and a server that works (people answering this thread should point out that a custom server comes with a cost): Before deciding to use a custom server, please keep in mind that it should only be used when the integrated router of Next.js can't meet your app requirements. A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization. We'll implement our own workaround using a reverse proxy, but we'll also have to implement browsersync or similar to not degrade the developer experience (we don't want them to have to manually refresh). |
Beta Was this translation helpful? Give feedback.
-
If you are not interested in setting up a custom server (which will break the integrated NextJs router) and are cool with running your app locally on a port other than 3000 (which is the default NextJs port), here is what worked for me (these instructions assume using Windows WSL terminal, and yarn commands instead of npm). In your Linux terminal, change to your project directory and then copy and paste the following command to setup the self-signed certificate (which creates a localhost.crt and localhost.key file within your project): openssl req -x509 -out localhost.crt -keyout localhost.key \
-days 365 \
-newkey rsa:2048 -nodes -sha256 \
-subj '/CN=localhost' -extensions EXT -config <( \
printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")
...
"scripts": {
"dev-ssl": "(local-ssl-proxy --source 8080 --target 3000) & next dev",
...
|
Beta Was this translation helpful? Give feedback.
-
This article was greatly able to help me: https://ilango.hashnode.dev/serving-a-nextjs-application-over-https-in-localhost Just make sure to move localhost.pem and localhost-key.pem from C:\Windows\system32 to /certs of your project |
Beta Was this translation helpful? Give feedback.
-
get request can have a body as parameter and can i use getserversideprops but i have to pass body |
Beta Was this translation helpful? Give feedback.
-
I want call get request to an API, however, it need to pass body as parameter but not pass into header or params |
Beta Was this translation helpful? Give feedback.
-
The latest Next.js version release 13.5.1 has an experimental flag for the dev server to run over https. See the release notes under "Other Improvements"
Uses "mkcert" and stores certificates under your project root in a folder named "certificates" where it will store 2x certs: "localhost-key.pem" and "localhost.pem" As a sanity test, I ran my local dev server with the |
Beta Was this translation helpful? Give feedback.
-
So exciting that this is getting attention! I just tried the new --experimental-https and the server appears to be up and running fine, but I'm getting the following error when I try to visit the root page: /node_modules/@mui/material/node/Divider/index.js#" in the React Client Manifest. This is probably a bug in the React Server Components bundler. This is certainly not an error I get in regular dev mode over http or using custom server config. Any ideas? |
Beta Was this translation helpful? Give feedback.
-
It's been a while since I did this for my auth 0 implementation. But pretty sure I installed:
and then added this do my scripts in package json:
no I can do |
Beta Was this translation helpful? Give feedback.
-
New flags added, see: https://github.com/search?q=repo%3Avercel%2Fnext.js%20--experimental-https&type=code |
Beta Was this translation helpful? Give feedback.
-
I have a question about how you are running the nextJs server on CI. The Are you facing the same problem? How have you fixed it? |
Beta Was this translation helpful? Give feedback.
-
I am doing this the old way. 😅 I have a domain(eg: example.com) and a server. let's say I'm going to use
|
Beta Was this translation helpful? Give feedback.
-
😍 Enabling HTTPS in Next.js Dev Mode (Version 13.5 and above) To enable HTTPS in Next.js Dev Mode (Version 13.5 and above), you can follow these steps:
Now, when you run Note: Ensure that you are using Next.js version 13.5 or above to utilize this [Feature] HTTPS support for development. |
Beta Was this translation helpful? Give feedback.
-
The problem is with the self-signed cert. You can fix it by adding this line right before your fetch call: process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0"; Just a heads-up, though - this approach is strictly for development purposes only. It disables TLS/SSL certificate validation, which could expose your application to security vulnerabilities. Make sure it doesn't get pushed to production. |
Beta Was this translation helpful? Give feedback.
-
This entire thread is essentially confirming that self-hosting is not supported by Vercel. "this approach is strictly for development purposes only. It disables TLS/SSL certificate validation, which could expose your application to security vulnerabilities. Make sure it doesn't get pushed to production" In my view, this only sprays some bad perfume on the already overwhelming code stench. I am compelled to conclude that Vercel VERY MUCH wants to capture -- as in hosting -- nodejs applications. The companies I work with would not even consider this. Surely the breach history of companies that rely on third-party hosting of strategic assets shows the many vulnerabilities that result -- and the complete inability of the client to manage those vulnerabilities. No development shop doing packages that will ultimate run on production servers will accept this kind of hackery. This is especially true for enterprise-scale backends of big companies. I ditched vercel/next.js in favor of vite months ago and I've never looked back. The transition was trivially easy. The vite code is well-documented and works as described. I don't think the vite is even IN the hosting business. If you need the server-side capabilities that next.js offers and you're OK with hosting on vercel, then perhaps you can persuade your engineering management to look the other way about these hacks. My projects do not meet this criteria. |
Beta Was this translation helpful? Give feedback.
-
A nice feature would be to redirect HTTP calls to HTTPS in dev mode. This would make it easy to flip between both without having to change ports or protocols. Next.js creates the HTTPS server here: https://github.com/vercel/next.js/blob/canary/packages/next/src/server/lib/start-server.ts#L172 The following code could be used to implement this: |
Beta Was this translation helpful? Give feedback.
-
A solution for me ( tempfix ) Don't run npm run dev
|
Beta Was this translation helpful? Give feedback.
-
Is there a way to make https work also with |
Beta Was this translation helpful? Give feedback.
The latest Next.js version release 13.5.1 has an experimental flag for the dev server to run over https.
See the release notes under "Other Improvements"
npm i next@latest react@latest react-dom@latest eslint-config-next@latest
next dev --experimental-https
Uses "mkcert" and stores certificates under your project root in a folder named "certificates" where it will store 2x certs: "localhost-key.pem" and "localhost.pem"
As a sanity test, I ran my local dev server with the
--experimental-https
flag and set an FB/Instagram App's OAuth callback value to "https://localhost:3000/api/auth/callback". Instagram provided the w…