CODEWITHSUNDEEP
next.jsvercel
Waterfall
Waterfall

Reputation: 704

Next.js redirect www to non www

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

Upvotes: 10

Views: 10036

Answers (3)

deadrunk
deadrunk

Reputation: 14125

This works with next@14:

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

Upvotes: 5

rvanlaarhoven
rvanlaarhoven

Reputation: 845

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
    }
  ]
}

Upvotes: 21

Faisal Chughtai
Faisal Chughtai

Reputation: 1

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: {} };
};

Upvotes: 0

Related Questions