Next.js

// Revalidate every 60 seconds.
export const revalidate = 60;

export default async function BlogPage() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}


import { revalidatePath } from 'next/cache';

export async function POST(request: Request) {
  const { secret, path } = await request.json();

  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ message: 'Invalid secret' }, { status: 401 });
  }

  revalidatePath(path);

  return Response.json({ revalidated: true, now: Date.now() });
}


/** @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
  ],
}

import Image from 'next/image'    
export default function Page() {
    return (       
        <Image         
          src="/photo.jpg"         
          alt="example image"         
          width={500}         
          height={500}  
          quality={75}// Default is 75     
        />     
    )   
} 

// next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
}

<Image
  src="/photo.jpg"
  alt="example image"
  width={500}
  height={500}
  unoptimized
/>