Next.js中的HTTP到HTTPS永久重定向

txu3uszq  于 2023-05-17  发布在  其他
关注(0)|答案(3)|浏览(426)

如何在Next.js应用程序中将所有对http://example.com的请求重定向到https://example.com
我还没怎么用过Next.js。来自后端。我正在寻找一个初始化Next.js服务器的文件,但似乎找不到。最接近的是/src/pages/_app.tsx
我发现this answer解决了同样的问题,但在我的项目中没有地方可以访问reqres对象。该应用程序只需使用next start启动。
official docs有关于重定向单独端点的信息,但我想将其作为所有端点的默认配置。

kqqjbcuj

kqqjbcuj1#

对我来说,我个人不会在Next.JS端做重定向。相反,我在DNS端做重定向,使用类似Cloudflare的东西。但是,如果你真的想在next.js应用程序上进行重定向,Heroku redirect Next.js React client app http to https将是一个很好的开始。

enxuqcxy

enxuqcxy2#

  • 我usig下面的代码为搜索引擎优化的网址重定向在未来的js。
  • 首先在根目录下创建一个名为next.config.js的文件,然后复制下面的代码并根据需要更改URL。
const urlItems = [
   {
     id: 1,
     old_url: "category/mirror-polish",
     new_url: "category/mirror-polish-124",
     status: 308,
   },
   {
     id: 2,
     old_url: "category/nano-crystal",
     new_url: "category/nano-crystal-125",
     status: 307, //temporary redirection
   },

   {
     id: 3,
     old_url: "/about",
     new_url: "/",
     status: 308,//premanent
   },
 ];

       module.exports = {
            reactStrictMode: true,
               redirects() {
                    return urlItems.map((item) => {
                return {
                    source: `/${item.old_url}`,
                    destination: `/${item.new_url}`,
                    permanent: item.status === 308 ? true : false,
                 };
              });
            },
         };
  • 当您使用fetch获取URL数据时,请使用以下代码
module.exports = {
      reactStrictMode: true,
      redirects: async () => {
      const result = await fetch("//api end point here");
      const urlItems = await result.json();
      return urlItems.map((item) => {
        return {
               source: `/${item.old_url}`,
               destination: `/${item.new_url}`,
               permanent: item.status === 308 ? true : false,
             };
           });
          },
    };
wz1wpwve

wz1wpwve3#

从Next.js v12开始,就有了所谓的“中间件”。它是一个唯一的文件,充当服务器和客户端之间的中间件。下面是我在TypeScript中的实现:

import { NextRequest, NextResponse } from "next/server";

type Environment = "production" | "development" | "other";

export function middleware(request: NextRequest) {
  const currentEnv = process.env.NODE_ENV as Environment;
  const isLocalhost = request.headers.get("host")?.includes("localhost");
  const isProtocolHTTP = request.headers.get("x-forwarded-proto") === "http";

  if (currentEnv === "production" && !isLocalhost && isProtocolHTTP) {
    return NextResponse.redirect(
      `https://${request.headers.get("host")}${request.nextUrl.pathname}${
        request?.nextUrl?.search || ""
      }`,
      301,
    );
  }
}

export const config = {
  matcher: ["/*"],
};

在根路径中创建一个名为“middleware.ts”的新文件,然后所有的奇迹将自动发生。
我认为代码本身会说话,但这里有一个简短的解释:我们检查环境是否为生产环境,是否不在本地主机上,以及协议是否为HTTP。如果是,我们将用户重定向到没有HTTP的相同URL,然后将HTTP添加到URL。
这工作完美,我用它在很多项目,也在Heroku。

相关问题