重定向(redirecting)

在 Next.js 中有几种方式可以处理重定向。本页将介绍每种可用选项、使用场景以及如何管理大量重定向。

API	用途	使用位置	状态码
`redirect`	在突变或事件后重定向用户	服务器组件、服务器操作、路由处理程序	307 (临时) 或 303 (服务器操作)
`permanentRedirect`	在突变或事件后重定向用户	服务器组件、服务器操作、路由处理程序	308 (永久)
`useRouter`	执行客户端导航	客户端组件中的事件处理程序	不适用
`next.config.js` 中的 `redirects`	基于路径重定向传入请求	`next.config.js` 文件	307 (临时) 或 308 (永久)
`NextResponse.redirect`	基于条件重定向传入请求	中间件	任意

`redirect` 函数

redirect 函数允许你将用户重定向到另一个 URL。你可以在服务器组件、路由处理程序和服务器操作中调用 redirect。

redirect 通常在突变或事件之后使用。例如，创建帖子后:

app/actions.tsx

"use server";
 
import { redirect } from "next/navigation";
import { revalidatePath } from "next/cache";
 
export async function createPost (id: string) {
  try {
    // 调用数据库
  } catch (error) {
    // 处理错误
  }
 
  revalidatePath("/posts"); // 更新缓存的帖子
  redirect(`/post/${id}`); // 导航到新的帖子页面
}

app/actions.js

"use server";
 
import { redirect } from "next/navigation";
import { revalidatePath } from "next/cache";
 
export async function createPost (id) {
  try {
    // 调用数据库
  } catch (error) {
    // 处理错误
  }
 
  revalidatePath("/posts"); // 更新缓存的帖子
  redirect(`/post/${id}`); // 导航到新的帖子页面
}

值得注意的是:

redirect 默认返回 307 (临时重定向) 状态码。在服务器操作中使用时，它返回 303 (查看其他)，这通常用于在 POST 请求后重定向到成功页面。

redirect 内部抛出一个错误，因此应该在 try/catch 块之外调用。

redirect 可以在渲染过程中在客户端组件中调用，但不能在事件处理程序中调用。你可以使用 useRouter hook 替代。

redirect 也接受绝对 URL，可用于重定向到外部链接。

如果你想在渲染过程之前进行重定向，请使用 next.config.js 或中间件。

有关更多信息，请参阅 redirect API 参考。

`permanentRedirect` 函数

permanentRedirect 函数允许你将用户永久重定向到另一个 URL。你可以在服务器组件、路由处理程序和服务器操作中调用 permanentRedirect。

permanentRedirect 通常在改变实体规范 URL 的突变或事件之后使用，例如在用户更改用户名后更新他们的个人资料 URL:

app/actions.ts

"use server";
 
import { permanentRedirect } from "next/navigation";
import { revalidateTag } from "next/cache";
 
export async function updateUsername (username: string, formData: FormData) {
  try {
    // 调用数据库
  } catch (error) {
    // 处理错误
  }
 
  revalidateTag("username"); // 更新所有对用户名的引用
  permanentRedirect(`/profile/${username}`); // 导航到新的用户资料
}

app/actions.js

"use server";
 
import { permanentRedirect } from "next/navigation";
import { revalidateTag } from "next/cache";
 
export async function updateUsername (username, formData) {
  try {
    // 调用数据库
  } catch (error) {
    // 处理错误
  }
 
  revalidateTag("username"); // 更新所有对用户名的引用
  permanentRedirect(`/profile/${username}`); // 导航到新的用户资料
}

值得注意的是:

permanentRedirect 默认返回 308 (永久重定向) 状态码。

permanentRedirect 也接受绝对 URL，可用于重定向到外部链接。

如果你想在渲染过程之前进行重定向，请使用 next.config.js 或中间件。

有关更多信息，请参阅 permanentRedirect API 参考。

`useRouter()` hook

如果你需要在客户端组件的事件处理程序中进行重定向，可以使用 useRouter hook 的 push 方法。例如:

app/page.tsx

"use client";
 
import { useRouter } from "next/navigation";
 
export default function Page () {
  const router = useRouter();
 
  return (
    <button type="button" onClick={() => router.push("/dashboard")}>
      仪表板
    </button>
  );
}

app/page.js

"use client";
 
import { useRouter } from "next/navigation";
 
export default function Page () {
  const router = useRouter();
 
  return (
    <button type="button" onClick={() => router.push("/dashboard")}>
      仪表板
    </button>
  );
}

值得注意的是:

如果你不需要以编程方式导航用户，应该使用 <Link> 组件。

有关更多信息，请参阅 useRouter API 参考。

`next.config.js` 中的 `redirects`

next.config.js 文件中的 redirects 选项允许你将传入的请求路径重定向到不同的目标路径。当你更改页面的 URL 结构或有预先已知的重定向列表时，这非常有用。

redirects 支持路径、标头、cookie 和查询匹配，让你可以根据传入请求灵活地重定向用户。

要使用 redirects，请将该选项添加到你的 next.config.js 文件中:

next.config.js

module.exports = {
  async redirects () {
    return [
      // 基本重定向
      {
        source: "/about",
        destination: "/",
        permanent: true,
      },
      // 通配符路径匹配
      {
        source: "/blog/:slug",
        destination: "/news/:slug",
        permanent: true,
      },
    ];
  },
};

有关更多信息，请参阅 redirects API 参考。

值得注意的是:

redirects 可以通过 permanent 选项返回 307 (临时重定向) 或 308 (永久重定向) 状态码。

redirects 在某些平台上可能有限制。例如，在 Vercel 上，限制为 1,024 个重定向。要管理大量重定向 (1000+)，请考虑使用中间件创建自定义解决方案。有关更多信息，请参阅大规模管理重定向。

redirects 在中间件之前运行。

中间件中的 `NextResponse.redirect`

中间件允许你在请求完成之前运行代码。然后，基于传入请求，使用 NextResponse.redirect 重定向到不同的 URL。这在你想基于条件 (例如身份验证、会话管理等) 重定向用户或有大量重定向时非常有用。

例如，如果用户未经身份验证，将其重定向到 /login 页面:

middleware.ts

import { NextResponse, NextRequest } from "next/server";
import { authenticate } from "auth-provider";
 
export function middleware (request: NextRequest) {
  const isAuthenticated = authenticate(request);
 
  // 如果用户已通过身份验证，继续正常处理
  if (isAuthenticated) {
    return NextResponse.next();
  }
 
  // 如果未通过身份验证，重定向到登录页面
  return NextResponse.redirect(new URL("/login", request.url));
}
 
export const config = {
  matcher: "/dashboard/:path*",
};

middleware.js

import { NextResponse } from "next/server";
import { authenticate } from "auth-provider";
 
export function middleware (request) {
  const isAuthenticated = authenticate(request);
 
  // 如果用户已通过身份验证，继续正常处理
  if (isAuthenticated) {
    return NextResponse.next();
  }
 
  // 如果未通过身份验证，重定向到登录页面
  return NextResponse.redirect(new URL("/login", request.url));
}
 
export const config = {
  matcher: "/dashboard/:path*",
};

值得注意的是:

中间件在 next.config.js 中的 redirects 之后运行，但在渲染之前运行。

有关更多信息，请参阅中间件文档。

大规模管理重定向 (高级)

要管理大量重定向 (1000+)，你可以考虑使用中间件创建自定义解决方案。这允许你以编程方式处理重定向，而无需重新部署应用程序。

要做到这一点，你需要考虑:

创建和存储重定向映射。
优化数据查找性能。

Next.js 示例: 请参阅我们的带有布隆过滤器的中间件示例，了解以下建议的实现。

1. 创建和存储重定向映射

重定向映射是你可以存储在数据库 (通常是键值存储)或 JSON 文件中的重定向列表。

考虑以下数据结构:

{
  "/old": {
    "destination": "/new",
    "permanent": true
  },
  "/blog/post-old": {
    "destination": "/blog/post-new",
    "permanent": true
  }
}

在中间件中，你可以从数据库 (如 Vercel 的 Edge Config 或 Redis) 读取数据，并根据传入请求重定向用户:

middleware.ts

import { NextResponse, NextRequest } from "next/server";
import { get } from "@vercel/edge-config";
 
type RedirectEntry = {
  destination: string;
  permanent: boolean;
};
 
export async function middleware (request: NextRequest) {
  const pathname = request.nextUrl.pathname;
  const redirectData = await get(pathname);
 
  if (redirectData && typeof redirectData === "string") {
    const redirectEntry: RedirectEntry = JSON.parse(redirectData);
    const statusCode = redirectEntry.permanent ? 308 : 307;
    return NextResponse.redirect(redirectEntry.destination, statusCode);
  }
 
  // 未找到重定向，继续处理请求
  return NextResponse.next();
}

middleware.js

import { NextResponse } from "next/server";
import { get } from "@vercel/edge-config";
 
export async function middleware (request) {
  const pathname = request.nextUrl.pathname;
  const redirectData = await get(pathname);
 
  if (redirectData) {
    const redirectEntry = JSON.parse(redirectData);
    const statusCode = redirectEntry.permanent ? 308 : 307;
    return NextResponse.redirect(redirectEntry.destination, statusCode);
  }
 
  // 未找到重定向，继续处理请求
  return NextResponse.next();
}

2. 优化数据查找性能

对每个传入请求读取大型数据集可能会很慢且昂贵。你可以通过以下两种方式优化数据查找性能:

使用针对快速读取进行优化的数据库，例如 Vercel Edge Config 或 Redis。
使用数据查找策略，如布隆过滤器，在读取更大的重定向文件或数据库之前高效地检查重定向是否存在。

考虑前面的示例，你可以将生成的布隆过滤器文件导入到中间件中，然后检查传入请求的路径名是否存在于布隆过滤器中。

如果存在，将请求转发到路由处理程序，该处理程序将检查实际文件并将用户重定向到适当的 URL。这避免了将大型重定向文件导入中间件，这可能会减慢每个传入请求的速度。

middleware.ts

import { NextResponse, NextRequest } from "next/server";
import { ScalableBloomFilter } from "bloom-filters";
import GeneratedBloomFilter from "./redirects/bloom-filter.json";
 
type RedirectEntry = {
  destination: string;
  permanent: boolean;
};
 
// 从生成的 JSON 文件初始化布隆过滤器
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter as any);
 
export async function middleware (request: NextRequest) {
  // 获取传入请求的路径
  const pathname = request.nextUrl.pathname;
 
  // 检查路径是否在布隆过滤器中
  if (bloomFilter.has(pathname)) {
    // 将路径名转发到路由处理程序
    const api = new URL(
      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
      request.nextUrl.origin
    );
 
    try {
      // 从路由处理程序获取重定向数据
      const redirectData = await fetch(api);
 
      if (redirectData.ok) {
        const redirectEntry: RedirectEntry | undefined =
          await redirectData.json();
 
        if (redirectEntry) {
          // 确定状态码
          const statusCode = redirectEntry.permanent ? 308 : 307;
 
          // 重定向到目标
          return NextResponse.redirect(redirectEntry.destination, statusCode);
        }
      }
    } catch (error) {
      console.error(error);
    }
  }
 
  // 未找到重定向，继续处理请求而不进行重定向
  return NextResponse.next();
}

middleware.js

import { NextResponse } from "next/server";
import { ScalableBloomFilter } from "bloom-filters";
import GeneratedBloomFilter from "./redirects/bloom-filter.json";
 
// 从生成的 JSON 文件初始化布隆过滤器
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter);
 
export async function middleware (request) {
  // 获取传入请求的路径
  const pathname = request.nextUrl.pathname;
 
  // 检查路径是否在布隆过滤器中
  if (bloomFilter.has(pathname)) {
    // 将路径名转发到路由处理程序
    const api = new URL(
      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
      request.nextUrl.origin
    );
 
    try {
      // 从路由处理程序获取重定向数据
      const redirectData = await fetch(api);
 
      if (redirectData.ok) {
        const redirectEntry = await redirectData.json();
 
        if (redirectEntry) {
          // 确定状态码
          const statusCode = redirectEntry.permanent ? 308 : 307;
 
          // 重定向到目标
          return NextResponse.redirect(redirectEntry.destination, statusCode);
        }
      }
    } catch (error) {
      console.error(error);
    }
  }
 
  // 未找到重定向，继续处理请求而不进行重定向
  return NextResponse.next();
}

然后，在路由处理程序中:

app/redirects/route.ts

import { NextRequest, NextResponse } from "next/server";
import redirects from "@/app/redirects/redirects.json";
 
type RedirectEntry = {
  destination: string;
  permanent: boolean;
};
 
export function GET (request: NextRequest) {
  const pathname = request.nextUrl.searchParams.get("pathname");
  if (!pathname) {
    return new Response("Bad Request", { status: 400 });
  }
 
  // 从 redirects.json 文件中获取重定向条目
  const redirect = (redirects as Record<string, RedirectEntry>)[pathname];
 
  // 考虑布隆过滤器的假阳性
  if (!redirect) {
    return new Response("No redirect", { status: 400 });
  }
 
  // 返回重定向条目
  return NextResponse.json(redirect);
}

app/redirects/route.js

import { NextResponse } from "next/server";
import redirects from "@/app/redirects/redirects.json";
 
export function GET (request) {
  const pathname = request.nextUrl.searchParams.get("pathname");
  if (!pathname) {
    return new Response("Bad Request", { status: 400 });
  }
 
  // 从 redirects.json 文件中获取重定向条目
  const redirect = redirects[pathname];
 
  // 考虑布隆过滤器的假阳性
  if (!redirect) {
    return new Response("No redirect", { status: 400 });
  }
 
  // 返回重定向条目
  return NextResponse.json(redirect);
}

值得注意的是：

要生成布隆过滤器，你可以使用像 bloom-filters 这样的库。

你应该验证对路由处理程序的请求，以防止恶意请求。

重定向(redirecting)

中间件

permanentRedirect

redirect

重定向（Redirects）