stack/packages/mosaic/framework/skills/next-best-practices/functions.md

Functions

Next.js function APIs.

Reference: https://nextjs.org/docs/app/api-reference/functions

Navigation Hooks (Client)

Hook	Purpose	Reference
useRouter	Programmatic navigation (push, replace, back, refresh)	Docs
usePathname	Get current pathname	Docs
useSearchParams	Read URL search parameters	Docs
useParams	Access dynamic route parameters	Docs
useSelectedLayoutSegment	Active child segment (one level)	Docs
useSelectedLayoutSegments	All active segments below layout	Docs
useLinkStatus	Check link prefetch status	Docs
useReportWebVitals	Report Core Web Vitals metrics	Docs

Server Functions

Function	Purpose	Reference
cookies	Read/write cookies	Docs
headers	Read request headers	Docs
draftMode	Enable preview of unpublished CMS content	Docs
after	Run code after response finishes streaming	Docs
connection	Wait for connection before dynamic rendering	Docs
userAgent	Parse User-Agent header	Docs

Generate Functions

Function	Purpose	Reference
generateStaticParams	Pre-render dynamic routes at build time	Docs
generateMetadata	Dynamic metadata	Docs
generateViewport	Dynamic viewport config	Docs
generateSitemaps	Multiple sitemaps for large sites	Docs
generateImageMetadata	Multiple OG images per route	Docs

Request/Response

Function	Purpose	Reference
NextRequest	Extended Request with helpers	Docs
NextResponse	Extended Response with helpers	Docs
ImageResponse	Generate OG images	Docs

Common Examples

Navigation

Use next/link for internal navigation instead of <a> tags.

// Bad: Plain anchor tag
<a href="/about">About</a>;

// Good: Next.js Link
import Link from 'next/link';

<Link href="/about">About</Link>;

Active link styling:

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

export function NavLink({ href, children }) {
  const pathname = usePathname();

  return (
    <Link href={href} className={pathname === href ? 'active' : ''}>
      {children}
    </Link>
  );
}

Static Generation

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

After Response

import { after } from 'next/server';

export async function POST(request: Request) {
  const data = await processRequest(request);

  after(async () => {
    await logAnalytics(data);
  });

  return Response.json({ success: true });
}