Search code examples
reactjsherokunext.js

Next.js 13 Force HTTPS

I'm working with Next.js 13 and Heroku. I've seen shockingly few up to date guides on how to handle SSL with Next & Heroku. My current set up is taken from this blog post and shown below. This works, but Google does not like the redirect so it hurts SEO. What is the current best practice to ensure HTTPS with Next.js 13 & Heroku?

import React, {useEffect} from 'react';
import {useLocation} from "react-router";

const UseRedirectToHttps = () => {
    let location = useLocation()
    useEffect(() => {
        
        if (window.location.protocol!=="https:") {
            window.location.replace("https://your-website-url.com"+location.pathname);
        }
    })
};

export default UseRedirectToHttps;
Solution

  • I realized the best way to solve this is to not use Heroku. Deploying the website to Vercel (the company that maintains Next.js) solves this issue and makes SSL far easier.