fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
109 lines
5.8 KiB
Markdown
109 lines
5.8 KiB
Markdown
# 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](https://nextjs.org/docs/app/api-reference/functions/use-router) |
|
|
| `usePathname` | Get current pathname | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-pathname) |
|
|
| `useSearchParams` | Read URL search parameters | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-search-params) |
|
|
| `useParams` | Access dynamic route parameters | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-params) |
|
|
| `useSelectedLayoutSegment` | Active child segment (one level) | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment) |
|
|
| `useSelectedLayoutSegments` | All active segments below layout | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segments) |
|
|
| `useLinkStatus` | Check link prefetch status | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-link-status) |
|
|
| `useReportWebVitals` | Report Core Web Vitals metrics | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-report-web-vitals) |
|
|
|
|
## Server Functions
|
|
|
|
| Function | Purpose | Reference |
|
|
| ------------ | -------------------------------------------- | ---------------------------------------------------------------------- |
|
|
| `cookies` | Read/write cookies | [Docs](https://nextjs.org/docs/app/api-reference/functions/cookies) |
|
|
| `headers` | Read request headers | [Docs](https://nextjs.org/docs/app/api-reference/functions/headers) |
|
|
| `draftMode` | Enable preview of unpublished CMS content | [Docs](https://nextjs.org/docs/app/api-reference/functions/draft-mode) |
|
|
| `after` | Run code after response finishes streaming | [Docs](https://nextjs.org/docs/app/api-reference/functions/after) |
|
|
| `connection` | Wait for connection before dynamic rendering | [Docs](https://nextjs.org/docs/app/api-reference/functions/connection) |
|
|
| `userAgent` | Parse User-Agent header | [Docs](https://nextjs.org/docs/app/api-reference/functions/userAgent) |
|
|
|
|
## Generate Functions
|
|
|
|
| Function | Purpose | Reference |
|
|
| ----------------------- | --------------------------------------- | ----------------------------------------------------------------------------------- |
|
|
| `generateStaticParams` | Pre-render dynamic routes at build time | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-static-params) |
|
|
| `generateMetadata` | Dynamic metadata | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-metadata) |
|
|
| `generateViewport` | Dynamic viewport config | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-viewport) |
|
|
| `generateSitemaps` | Multiple sitemaps for large sites | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps) |
|
|
| `generateImageMetadata` | Multiple OG images per route | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-image-metadata) |
|
|
|
|
## Request/Response
|
|
|
|
| Function | Purpose | Reference |
|
|
| --------------- | ------------------------------ | -------------------------------------------------------------------------- |
|
|
| `NextRequest` | Extended Request with helpers | [Docs](https://nextjs.org/docs/app/api-reference/functions/next-request) |
|
|
| `NextResponse` | Extended Response with helpers | [Docs](https://nextjs.org/docs/app/api-reference/functions/next-response) |
|
|
| `ImageResponse` | Generate OG images | [Docs](https://nextjs.org/docs/app/api-reference/functions/image-response) |
|
|
|
|
## Common Examples
|
|
|
|
### Navigation
|
|
|
|
Use `next/link` for internal navigation instead of `<a>` tags.
|
|
|
|
```tsx
|
|
// 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:
|
|
|
|
```tsx
|
|
'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
|
|
|
|
```tsx
|
|
// app/blog/[slug]/page.tsx
|
|
export async function generateStaticParams() {
|
|
const posts = await getPosts();
|
|
return posts.map((post) => ({ slug: post.slug }));
|
|
}
|
|
```
|
|
|
|
### After Response
|
|
|
|
```tsx
|
|
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 });
|
|
}
|
|
```
|