Next.js redirect www to non www

Question

I have been trying to find a workable solution this searching google but can't find anything solid. I am hosting my Next.js application on Vercel.

When I run a seo check it moans about me having the site available on www and non www and says I should pick one and get it to redirect so in my case, if someone types in www.example.com I would prefer it left of the www.

Since I don't have a htaccess file I can do this in, how would I do it?

Not sure if it matters, but I am using WordPress as my backend aka: Headless Wordpress

I'd recommend having a read through [Redirecting Domains](https://vercel.com/blog/redirecting-domains). — juliomalves, May 13 '21 at 11:25
@juliomalves thanks for this. But this is from 2019 and when I tried to find this in my vercel account I didn't see it. I don't know if it might because I am just pointing the A record to vercel and not the nameservers ? — Waterfall, May 17 '21 at 18:06
Did you figure this out? The accepted answer does not work for me. I've tried all sorts of variations aswell. Nothing seems to work... — Reinier68, Jan 12 '23 at 11:29

score 13 · Accepted Answer · answered Dec 01 '21 at 12:18

13

You should be able to use host-based redirects now since Next v10.2. See https://nextjs.org/docs/api-reference/next.config.js/redirects#header-cookie-and-query-matching.

In next.config.js:

module.exports = {
  // ...
  redirects: async () => [
    {
      source: '/:path*',
      has: [{ type: 'host', value: 'www.yourdomain.com' }],
      destination: 'https://yourdomain.com/:path*',
      permanent: true
    }
  ]
}

answered Dec 01 '21 at 12:18

rvanlaarhoven

591
6
16

I want to redirect from non www to www, please help me – haxora Aug 22 '22 at 06:04
@haxora, Just change the `has.value` to `yourdomain.com` and add the www to the destination. – rvanlaarhoven Aug 22 '22 at 07:43
{ source: '/', has: [{ type: 'host', value: 'https://learnbay.co' }], destination: 'https://www.learnbay.co/', permanent: false } **This is my code and i tried all possible way but its not redirecting by default to www** @rvanlaarhoven – haxora Aug 22 '22 at 15:48
The `destination` should be a valid URL, so: `https://www.learnbay.co` – rvanlaarhoven Aug 23 '22 at 07:21
I used something similar, because I don't think this would work. You should do in has like this ```has: [{type: 'header', key: 'host', value: 'www.yourdomain.com'}]``` – Norman Pleitez Dec 19 '22 at 18:58
Is this the correct way to handle making all routes SSL? – AndrewLeonardi Aug 02 '23 at 15:02

Faisal Chughtai · Answer 2 · 2021-07-26T17:22:00.357

0

you can easily handle permanent redirection in nextjs using the below-mentioned code.

export const getServerSideProps = async (context) => {
    const { req, res } = context;

    if (req.headers.host.match(/^www/) !== null) {
        res.writeHead(301, {
            location: "https://" + req.headers.host.replace(/^www./, "") + req.url,
        });
        res.end();
    }

    return { props: {} };
};

edited Jul 26 '21 at 17:22

answered Jul 24 '21 at 08:52

Faisal Chughtai

1
2

Next.js redirect www to non www

2 Answers2