如何在Next.js应用程序中将页面组件划分到多个`/pages`目录中

mkdir -p src/pages/blog
mkdir -p src/pages/users

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

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

  if (pathname.startsWith('/blog')) {
    return NextResponse.rewrite(new URL(`/src/pages/blog${pathname}`, req.url));
  }

  if (pathname.startsWith('/users')) {
    return NextResponse.rewrite(new URL(`/src/pages/users${pathname}`, req.url));
  }
}

// next.config.js
module.exports = {
  experimental: {
    runtime: 'experimental-edge',
  },
  async rewrites() {
    return [
      {
        source: '/blog/:path*',
        destination: '/src/pages/blog/:path*',
      },
      {
        source: '/users/:path*',
        destination: '/src/pages/users/:path*',
      },
    ];
  },
};

// src/pages/blog/index.js
import React from 'react';

const BlogHome = () => {
  return <div>Welcome to the Blog Home Page</div>;
};

export default BlogHome;

// src/pages/users/profile.js
import React from 'react';

const UserProfile = () => {
  return <div>User Profile Page</div>;
};

export default UserProfile;