使用 NextJs 将 www 永久重定向到非 www 站点

Question

我用 Nextjs 构建了一个网站（使用版本

12.1.4

）。出于 SEO 目的，我想将我的

www

版本的网站永久重定向到我的

non-www

。通常，这可以使用 nginx 或 apache 的

.htaccess

文件轻松完成。但是，Digitalocean 上托管的静态网站不运行 apache 或 nginx，因此 .htaccess 文件不起作用。我读到这应该可以使用 Nextjs 重定向。

我尝试了以下 3 个重定向：

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

---------------------------------------------------

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

------------------------------------------------------

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

所有这些似乎都没有重定向到非 www 版本。我不知道它是否相关，但我确实在配置中使用了

trailingSlash: true

。

我尝试的下一步是添加中间件文件。我都尝试将它添加到根目录并调用它

middleware.js

并在页面文件夹中调用它

_middleware.js

。

这是我用于重定向的代码：

--> https://github.com/vercel/next.js/discussions/33554
import { NextRequest, NextResponse } from 'next/server';

export function middleware(req: NextRequest) {
  const host = req.headers.get('host');
  const wwwRegex = /^www\./;
  // This redirect will only take effect on a production website (on a non-localhost domain)
  if (wwwRegex.test(host) && !req.headers.get('host').includes('localhost')) {
    const newHost = host.replace(wwwRegex, '');
    return NextResponse.redirect(`https://${newHost}${req.nextUrl.pathname}`, 301);
  }
  return NextResponse.next();
}

也根本不起作用...没有做任何我相信的事情。

如何将 Nextjs 网站从

www

重定向到

non-www

？

Answer 1

尝试删除

https://

，如果您在本地计算机上测试它，您应该重新启动服务器。从 Next.js 12 开始，中间件在边缘运行，这意味着它在 Vercel Edge Network 或其他支持的平台上尽可能靠近用户执行。 DigitalOcean 托管 Next.js 应用程序的标准方法涉及使用 DigitalOcean Droplet 配置，并使用 Nginx 作为反向代理。

redirects: async () => [
  {
    source: '/:path*',
    has: [
      {
        type: 'host',
        value: 'www.cvtips.nl',
        // remove 👆 https://
      },
    ],
    destination: 'https://cvtips.nl/:path*',
    permanent: true,
  },
],