struxadotcloud/struxa

public

initial commitd4cb9e15 months ago108 lines · 5.8 KB

1	# Functions
2
3	Next.js function APIs.
4
5	Reference: https://nextjs.org/docs/app/api-reference/functions
6
7	## Navigation Hooks (Client)
8
9	\| Hook \| Purpose \| Reference \|
10	\| --------------------------- \| -------------------------------------------------------------- \|
11	\| `useRouter` \| Programmatic navigation (`push
12	\| `usePathname` \| Get current pathname \|
13	\| `useSearchParams` \| Read URL search parameters \|
14	\| `useParams` \| Access dynamic route parameters \|
15	\| `useSelectedLayoutSegment` \| Active child segment (one level) \|
16	\| `useSelectedLayoutSegments` \| All active segments below layout \|
17	\| `useLinkStatus` \| Check link prefetch status \|
18	\| `useReportWebVitals` \| Report Core Web Vitals metrics \|
19
20	## Server Functions
21
22	\| Function \| Purpose \| Reference \|
23	\| ------------ \| -------------------------------------------- \|
24	\| `cookies` \| Read/write cookies \|
25	\| `headers` \| Read request headers \|
26	\| `draftMode` \| Enable preview of unpublished CMS content \|
27	\| `after` \| Run code after response finishes streaming \|
28	\| `connection` \| Wait for connection before dynamic rendering \|
29	\| `userAgent` \| Parse User-Agent header \|
30
31	## Generate Functions
32
33	\| Function \| Purpose \| Reference \|
34	\| ----------------------- \| --------------------------------------- \|
35	\| `generateStaticParams` \| Pre-render dynamic routes at build time \|
36	\| `generateMetadata` \| Dynamic metadata \|
37	\| `generateViewport` \| Dynamic viewport config \|
38	\| `generateSitemaps` \| Multiple sitemaps for large sites \|
39	\| `generateImageMetadata` \| Multiple OG images per route \|
40
41	## Request/Response
42
43	\| Function \| Purpose \| Reference \|
44	\| --------------- \| ------------------------------ \|
45	\| `NextRequest` \| Extended Request with helpers \|
46	\| `NextResponse` \| Extended Response with helpers \|
47	\| `ImageResponse` \| Generate OG images \|
48
49	## Common Examples
50
51	### Navigation
52
53	Use `next/link` for internal navigation instead of `<a>` tags.
54
55	```tsx
56	// Bad: Plain anchor tag
57	<a href="/about
58
59	// Good: Next.js Link
60	import Link from "next/link
61
62	<Link href="
63	```
64
65	Active link styling:
66
67	```tsx
68	"use client";
69
70	import Link from "next/link
71	import { usePathname }
72
73	export function NavLink({
74	const pathname =
75
76	return (
77	<Link href=
78	{children}
79	</Link>
80	);
81	}
82	```
83
84	### Static Generation
85
86	```tsx
87	// app/blog/[slug]/page.tsx
88	export async function generateStaticParams
89	const posts =
90	return posts.map
91	}
92	```
93
94	### After Response
95
96	```tsx
97	import { after }
98
99	export async function POST
100	const data =
101
102	after(async ()
103	await logAnalytics(data
104	});
105
106	return Response.json
107	}
108	```