在 reactjs nextjs 中将 url 重定向到 www 作为服务器端 301

Question

我在将我的网站路由到相同的重定向但使用 www 服务器端时遇到了一些问题。例如，如果用户浏览我的网站 example.com，我应该将其重定向到 www.example.com。我发现 nextjs 重定向并在 next.config.js 中做了如下的事情。

module.exports = {
 async redirects() {
return [
   {
     source: '/',
     destination: 'https://www.example.com/',
     statusCode: 301
   },
   ]
  },
}

但是当我发布此代码时，我通常会遇到太多重定向错误，但我找不到解决方案来设置条件，如果源路径不以 www 开头，然后启动此重定向规则。有人帮我怎么做吗？我不需要客户端重定向。

Answer 1

我认为 nextjs 不会提供这样的机会，因为它针对的是您域名后的基础 url。在我看来，实现此目的的最佳方法是使用 .htaccess 文件。您可以将此代码传递给它。

RewriteEngine On

RewriteCond %{HTTP_HOST} !^www\.

RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/ [R=301,L]

此外，如果您想从 http 重定向到 https，请在下面添加此代码

RewriteCond %{HTTPS}s ^on(s)|

RewriteRule ^(.*)$ http%1://www.%{HTTP_HOST}/ [R=301,L]

Answer 2

我发现https://www.npmjs.com/package/nextjs-redirect这个link对客户端和服务器端都非常有用。

import redirect from 'nextjs-redirect'
export default redirect('https://paypal.me')

Answer 3

您可以使用下面提到的代码在 nextjs 中轻松处理从非 www 到 www 的永久重定向。

export const getServerSideProps = async (context) => {
    const { req, res } = context;
    if (req.headers.host.match(/^www/) === null) {
    res.writeHead(301, {
    location: "https://"+ "www."+ req.headers.host + req.url,
    });
    res.end();
    } 
    return { props: {} };
    };

在 reactjs nextjs 中将 url 重定向到 www 作为服务器端 301

Redirect url to www in reactjs nextjs as a server side 301

reactjs

redirect

next.js

server-side

http-status-code-301