Next.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',  // enable static export
  images: {
    unoptimized: true  // disable image optimization for static export
  },
  trailingSlash: true,  // add a trailing slash for high compatibility
};

import { Suspense } from 'react';
import { PostFeed, Weather } from './Components';

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Loading post...</p>}>
        <PostFeed />  {/* This component will asynchronously fetch data and stream rendering */}
      </Suspense>
      <Suspense fallback={<p>Loading weather...</p>}>
        <Weather />
      </Suspense>
    </section>
  );
}

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

// Export the proxy named function, receive request object as parameter
export function proxy(request: NextRequest) {
  // Example 1: Redirection - Navigate to /home when accessing paths related to /about
  return NextResponse.redirect(new URL('/home', request.url))

  // Example 2: Rewrite - Rewrite /about to /about-new when accessing /about
  // return NextResponse.rewrite(new URL('/about-new', request.url))

  // Example 3: Direct response - Block the request and return 403
  // return new NextResponse('Access denied', { status: 403 })
}

// Middleware matching configuration: define which requests trigger middleware
export const config = {
  matcher: [
    '/about/:path*', // match /about subpath
    '/((?!api|_next/static|_next/image|favicon.ico).*)', // exclude API, static resource, match all webpages
  ],
}