1export async function getStaticProps({ params }) {
2const post = await getBlogPost(params.slug);
3
4return {
5  props: { post },
6  revalidate: 3600, // Revalidate every hour
7};
8}
9
10export async function getStaticPaths() {
11const posts = await getAllBlogPosts();
12
13return {
14  paths: posts.map(post => ({ params: { slug: post.slug } })),
15  fallback: 'blocking',
16};
17}

1import Image from 'next/image';
2
3function ProductImage({ src, alt }) {
4return (
5
6<Image
7src={src}
8alt={alt}
9width={800}
10height={600}
11priority // Use for above-the-fold images
12placeholder="blur"
13blurDataURL="data:image/jpeg;base64,..."
14/>
15); }

1import dynamic from 'next/dynamic';
2
3const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
4loading: () => <div>Loading...</div>,
5ssr: false, // Disable server-side rendering if needed
6});
7
8// Use with React.lazy for even more control
9const LazyChart = dynamic(() => import('./Chart').then(mod => ({ default: mod.Chart })), {
10loading: () => <ChartSkeleton />,
11});

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3
4export function middleware(request: NextRequest) {
5// A/B testing
6const bucket = request.cookies.get('bucket')?.value || Math.random() < 0.5 ? 'a' : 'b';
7
8const response = NextResponse.next();
9response.cookies.set('bucket', bucket);
10
11// Add custom headers
12response.headers.set('x-middleware', 'active');
13
14return response;
15}
16
17export const config = {
18matcher: ['/dashboard/:path*', '/api/:path*'],
19};