5 rules available
Prioritize React Server Components for data fetching and static content. Client components only when interactivity is required.
'use server';
import { db } from '@/lib/database';
import { cache } from 'react';
export const getProjects = cache(async () => {
return db.project...Use the Image component with proper sizing, formats, and loading strategies for maximum performance.
import Image from 'next/image';
import Link from 'next/link';
export function ProjectCard({ project }: { project: Project }) {
return (
<Link h...Implement authentication at the edge with Next.js Middleware for protected routes.
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { jwtVerify } from 'jose';
const JWT_SECRET = new ...Use the Metadata API for SEO optimization with dynamic titles, descriptions, and OpenGraph images.
import { Metadata, ResolvingMetadata } from 'next';
import { notFound } from 'next/navigation';
import { db } from '@/lib/db';
import { SchemaMarkup }...Master Next.js caching with fetch, revalidation, and Route Handler caching for optimal performance.
import { unstable_cache } from 'next/cache';
import { revalidatePath, revalidateTag } from 'next/cache';
import { cookies, headers } from 'next/header...