Next.js 提供了中间件功能，可以在请求处理过程中执行特定的逻辑，此外还支持重定向和自定义错误页面的处理。以下是关于如何使用这些功能的详细说明。

1. 中间件的使用

中间件允许你在 Next.js 的请求处理过程中执行自定义代码。中间件可以用于身份验证、请求日志、处理 CORS 等。

创建中间件：

在 Next.js 13 及更高版本中，你可以在 middleware.js 文件中定义中间件。中间件会在所有请求之前运行。

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(req) {
  const { pathname } = req.nextUrl;

  // 进行身份验证或其他逻辑
  if (pathname.startsWith('/protected')) {
    const token = req.cookies.get('token');

    if (!token) {
      return NextResponse.redirect(new URL('/login', req.url));
    }
  }

  // 继续处理请求
  return NextResponse.next();
}

// 配置中间件作用的路径
export const config = {
  matcher: ['/protected/:path*'],
};

在上面的示例中，如果用户访问 /protected 路径但没有有效的令牌，系统会将用户重定向到登录页面。

2. 重定向

重定向可以通过 Next.js 的路由系统或在中间件中处理。你可以使用 NextResponse.redirect() 方法进行重定向。

示例重定向：

// 在 middleware.js 中重定向
export function middleware(req) {
  const { pathname } = req.nextUrl;

  if (pathname === '/old-path') {
    return NextResponse.redirect(new URL('/new-path', req.url));
  }

  return NextResponse.next();
}

你也可以在页面组件中使用 getServerSideProps 进行重定向：

// pages/old-path.js
export async function getServerSideProps(context) {
  return {
    redirect: {
      destination: '/new-path',
      permanent: false,
    },
  };
}

3. 自定义错误页面

Next.js 允许你自定义错误页面，例如 404 页面或 500 页面。你可以在 pages 目录下创建相应的文件。

创建自定义 404 页面：

// pages/404.js
const Custom404 = () => {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>Sorry, the page you are looking for does not exist.</p>
    </div>
  );
};

export default Custom404;

创建自定义 500 页面：

// pages/500.js
const Custom500 = () => {
  return (
    <div>
      <h1>500 - Server Error</h1>
      <p>Sorry, there was an internal server error.</p>
    </div>
  );
};

export default Custom500;

当应用发生未处理的错误时，Next.js 会自动呈现这些自定义错误页面。

总结

Next.js 中的中间件、重定向和自定义错误页面的处理为构建灵活和用户友好的应用提供了强大的支持。通过使用中间件，你可以在请求处理之前执行特定逻辑，重定向可以引导用户到正确的页面，而自定义错误页面则能提升用户体验，帮助用户理解发生了什么。