@enjoys/context-engine 1.2.0 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/codeActions/angular.json +126 -0
- package/data/codeActions/css.json +111 -0
- package/data/codeActions/nestjs.json +124 -0
- package/data/codeActions/nextjs.json +198 -0
- package/data/codeActions/react.json +154 -0
- package/data/codeActions/shadcn.json +112 -0
- package/data/codeActions/shell.json +169 -26
- package/data/codeActions/tailwindcss.json +76 -0
- package/data/codeLens/angular.json +22 -0
- package/data/codeLens/css.json +68 -0
- package/data/codeLens/nestjs.json +21 -0
- package/data/codeLens/nextjs.json +117 -0
- package/data/codeLens/react.json +89 -0
- package/data/codeLens/shadcn.json +89 -0
- package/data/codeLens/shell.json +59 -17
- package/data/codeLens/tailwindcss.json +103 -0
- package/data/color/angular.json +21 -0
- package/data/color/css.json +124 -0
- package/data/color/nestjs.json +18 -0
- package/data/color/nextjs.json +22 -0
- package/data/color/react.json +93 -0
- package/data/color/shadcn.json +66 -0
- package/data/color/shell.json +106 -80
- package/data/color/tailwindcss.json +53 -0
- package/data/commands/angular.json +312 -0
- package/data/commands/css.json +41 -0
- package/data/commands/manifest.json +734 -727
- package/data/commands/nestjs.json +273 -0
- package/data/commands/nextjs.json +123 -0
- package/data/commands/react.json +210 -0
- package/data/commands/shadcn.json +410 -0
- package/data/commands/shell.json +571 -41
- package/data/commands/tailwindcss.json +53 -0
- package/data/completion/angular.json +1490 -0
- package/data/completion/css.json +1176 -0
- package/data/completion/javascript.json +27 -0
- package/data/completion/nestjs.json +1454 -0
- package/data/completion/nextjs.json +1373 -0
- package/data/completion/react.json +1319 -0
- package/data/completion/redis-cli.json +1 -1
- package/data/completion/shadcn.json +1202 -0
- package/data/completion/shell.json +2446 -510
- package/data/completion/tailwindcss.json +284 -0
- package/data/completion/typescript.json +27 -0
- package/data/declaration/angular.json +46 -0
- package/data/declaration/css.json +59 -0
- package/data/declaration/nestjs.json +47 -0
- package/data/declaration/nextjs.json +274 -0
- package/data/declaration/react.json +199 -0
- package/data/declaration/shadcn.json +211 -0
- package/data/declaration/shell.json +343 -24
- package/data/declaration/tailwindcss.json +137 -0
- package/data/definition/angular.json +670 -0
- package/data/definition/css.json +115 -0
- package/data/definition/nestjs.json +684 -0
- package/data/definition/nextjs.json +439 -0
- package/data/definition/react.json +397 -0
- package/data/definition/redis-cli.json +1 -1
- package/data/definition/shadcn.json +99 -0
- package/data/definition/shell.json +820 -0
- package/data/definition/tailwindcss.json +115 -0
- package/data/documentHighlight/angular.json +414 -0
- package/data/documentHighlight/css.json +125 -0
- package/data/documentHighlight/nestjs.json +115 -0
- package/data/documentHighlight/nextjs.json +212 -0
- package/data/documentHighlight/react.json +119 -0
- package/data/documentHighlight/shadcn.json +168 -0
- package/data/documentHighlight/shell.json +664 -334
- package/data/documentHighlight/tailwindcss.json +160 -0
- package/data/documentRangeFormatting/angular.json +45 -0
- package/data/documentRangeFormatting/css.json +101 -0
- package/data/documentRangeFormatting/nestjs.json +17 -0
- package/data/documentRangeFormatting/nextjs.json +17 -0
- package/data/documentRangeFormatting/react.json +78 -0
- package/data/documentRangeFormatting/shadcn.json +45 -0
- package/data/documentRangeFormatting/shell.json +120 -53
- package/data/documentRangeFormatting/tailwindcss.json +55 -0
- package/data/documentSymbol/angular.json +180 -0
- package/data/documentSymbol/css.json +96 -0
- package/data/documentSymbol/nestjs.json +152 -0
- package/data/documentSymbol/nextjs.json +159 -0
- package/data/documentSymbol/react.json +145 -0
- package/data/documentSymbol/shadcn.json +131 -0
- package/data/documentSymbol/shell.json +166 -26
- package/data/documentSymbol/tailwindcss.json +110 -0
- package/data/foldingRange/angular.json +99 -0
- package/data/foldingRange/css.json +66 -0
- package/data/foldingRange/nestjs.json +26 -0
- package/data/foldingRange/nextjs.json +26 -0
- package/data/foldingRange/react.json +120 -0
- package/data/foldingRange/shadcn.json +93 -0
- package/data/foldingRange/shell.json +106 -46
- package/data/foldingRange/tailwindcss.json +60 -0
- package/data/formatting/angular.json +21 -0
- package/data/formatting/css.json +73 -0
- package/data/formatting/nestjs.json +23 -0
- package/data/formatting/nextjs.json +23 -0
- package/data/formatting/react.json +71 -0
- package/data/formatting/shadcn.json +61 -0
- package/data/formatting/shell.json +103 -19
- package/data/formatting/tailwindcss.json +48 -0
- package/data/hover/angular.json +455 -0
- package/data/hover/css.json +300 -0
- package/data/hover/nestjs.json +296 -0
- package/data/hover/nextjs.json +305 -0
- package/data/hover/react.json +173 -0
- package/data/hover/redis-cli.json +1 -1
- package/data/hover/shadcn.json +450 -0
- package/data/hover/shell.json +684 -75
- package/data/hover/tailwindcss.json +968 -0
- package/data/implementation/angular.json +22 -0
- package/data/implementation/css.json +65 -0
- package/data/implementation/nestjs.json +24 -0
- package/data/implementation/nextjs.json +137 -0
- package/data/implementation/react.json +125 -0
- package/data/implementation/shadcn.json +89 -0
- package/data/implementation/shell.json +59 -3
- package/data/implementation/tailwindcss.json +59 -0
- package/data/inlayHints/angular.json +24 -0
- package/data/inlayHints/css.json +87 -0
- package/data/inlayHints/nestjs.json +24 -0
- package/data/inlayHints/nextjs.json +143 -0
- package/data/inlayHints/react.json +177 -0
- package/data/inlayHints/shadcn.json +109 -0
- package/data/inlayHints/shell.json +223 -35
- package/data/inlayHints/tailwindcss.json +111 -0
- package/data/inlineCompletions/angular.json +135 -0
- package/data/inlineCompletions/css.json +125 -0
- package/data/inlineCompletions/javascript.json +12 -0
- package/data/inlineCompletions/nestjs.json +25 -0
- package/data/inlineCompletions/nextjs.json +179 -0
- package/data/inlineCompletions/react.json +203 -0
- package/data/inlineCompletions/shadcn.json +115 -0
- package/data/inlineCompletions/shell.json +185 -35
- package/data/inlineCompletions/tailwindcss.json +411 -0
- package/data/inlineCompletions/typescript.json +12 -0
- package/data/linkedEditingRange/angular.json +23 -0
- package/data/linkedEditingRange/css.json +40 -0
- package/data/linkedEditingRange/nestjs.json +10 -0
- package/data/linkedEditingRange/nextjs.json +11 -0
- package/data/linkedEditingRange/react.json +75 -0
- package/data/linkedEditingRange/shadcn.json +23 -0
- package/data/linkedEditingRange/shell.json +25 -25
- package/data/linkedEditingRange/tailwindcss.json +30 -0
- package/data/links/angular.json +95 -0
- package/data/links/css.json +55 -0
- package/data/links/nestjs.json +130 -0
- package/data/links/nextjs.json +91 -0
- package/data/links/react.json +75 -0
- package/data/links/shadcn.json +98 -0
- package/data/links/shell.json +56 -0
- package/data/links/tailwindcss.json +65 -0
- package/data/manifest.json +399 -150
- package/data/onTypeFormatting/angular.json +14 -0
- package/data/onTypeFormatting/css.json +82 -0
- package/data/onTypeFormatting/nestjs.json +16 -0
- package/data/onTypeFormatting/nextjs.json +17 -0
- package/data/onTypeFormatting/react.json +127 -0
- package/data/onTypeFormatting/shadcn.json +54 -0
- package/data/onTypeFormatting/shell.json +72 -68
- package/data/onTypeFormatting/tailwindcss.json +63 -0
- package/data/rangeSemanticTokens/angular.json +140 -0
- package/data/rangeSemanticTokens/css.json +125 -0
- package/data/rangeSemanticTokens/nestjs.json +27 -0
- package/data/rangeSemanticTokens/nextjs.json +28 -0
- package/data/rangeSemanticTokens/react.json +216 -0
- package/data/rangeSemanticTokens/shadcn.json +140 -0
- package/data/rangeSemanticTokens/shell.json +247 -69
- package/data/rangeSemanticTokens/tailwindcss.json +186 -0
- package/data/references/angular.json +26 -0
- package/data/references/css.json +65 -0
- package/data/references/nestjs.json +24 -0
- package/data/references/nextjs.json +178 -0
- package/data/references/react.json +192 -0
- package/data/references/shadcn.json +101 -0
- package/data/references/shell.json +323 -92
- package/data/references/tailwindcss.json +125 -0
- package/data/rename/angular.json +131 -0
- package/data/rename/css.json +91 -0
- package/data/rename/nestjs.json +32 -0
- package/data/rename/nextjs.json +31 -0
- package/data/rename/react.json +88 -0
- package/data/rename/shadcn.json +79 -0
- package/data/rename/shell.json +101 -31
- package/data/rename/tailwindcss.json +58 -0
- package/data/selectionRange/angular.json +95 -0
- package/data/selectionRange/css.json +55 -0
- package/data/selectionRange/nestjs.json +21 -0
- package/data/selectionRange/nextjs.json +22 -0
- package/data/selectionRange/react.json +87 -0
- package/data/selectionRange/shadcn.json +89 -0
- package/data/selectionRange/shell.json +65 -35
- package/data/selectionRange/tailwindcss.json +35 -0
- package/data/semanticTokens/angular.json +198 -0
- package/data/semanticTokens/css.json +107 -0
- package/data/semanticTokens/nestjs.json +35 -0
- package/data/semanticTokens/nextjs.json +38 -0
- package/data/semanticTokens/react.json +215 -0
- package/data/semanticTokens/shadcn.json +180 -0
- package/data/semanticTokens/shell.json +238 -65
- package/data/semanticTokens/tailwindcss.json +161 -0
- package/data/signatureHelp/angular.json +182 -0
- package/data/signatureHelp/css.json +137 -0
- package/data/signatureHelp/nestjs.json +128 -0
- package/data/signatureHelp/nextjs.json +127 -0
- package/data/signatureHelp/react.json +281 -0
- package/data/signatureHelp/shadcn.json +237 -0
- package/data/signatureHelp/shell.json +797 -104
- package/data/signatureHelp/tailwindcss.json +64 -0
- package/data/typeDefinition/angular.json +362 -0
- package/data/typeDefinition/css.json +53 -0
- package/data/typeDefinition/nestjs.json +334 -0
- package/data/typeDefinition/nextjs.json +285 -0
- package/data/typeDefinition/react.json +236 -0
- package/data/typeDefinition/shadcn.json +292 -0
- package/data/typeDefinition/shell.json +104 -40
- package/data/typeDefinition/tailwindcss.json +47 -0
- package/package.json +1 -1
- package/data/codeActions/bash.json +0 -169
- package/data/codeActions/zsh.json +0 -49
- package/data/codeLens/bash.json +0 -75
- package/data/codeLens/zsh.json +0 -19
- package/data/color/bash.json +0 -100
- package/data/color/zsh.json +0 -80
- package/data/commands/bash.json +0 -102
- package/data/commands/zsh.json +0 -166
- package/data/completion/bash.json +0 -1184
- package/data/completion/zsh.json +0 -973
- package/data/declaration/bash.json +0 -301
- package/data/declaration/zsh.json +0 -205
- package/data/definition/bash.json +0 -565
- package/data/definition/zsh.json +0 -350
- package/data/documentHighlight/bash.json +0 -393
- package/data/documentHighlight/zsh.json +0 -266
- package/data/documentRangeFormatting/bash.json +0 -41
- package/data/documentRangeFormatting/zsh.json +0 -59
- package/data/documentSymbol/bash.json +0 -124
- package/data/documentSymbol/zsh.json +0 -26
- package/data/foldingRange/bash.json +0 -76
- package/data/foldingRange/zsh.json +0 -46
- package/data/formatting/bash.json +0 -88
- package/data/formatting/zsh.json +0 -28
- package/data/hover/bash.json +0 -579
- package/data/hover/zsh.json +0 -96
- package/data/implementation/bash.json +0 -44
- package/data/implementation/zsh.json +0 -41
- package/data/inlayHints/bash.json +0 -207
- package/data/inlayHints/zsh.json +0 -43
- package/data/inlineCompletions/bash.json +0 -155
- package/data/inlineCompletions/zsh.json +0 -17
- package/data/linkedEditingRange/bash.json +0 -25
- package/data/linkedEditingRange/zsh.json +0 -25
- package/data/links/bash.json +0 -56
- package/data/links/zsh.json +0 -15
- package/data/onTypeFormatting/bash.json +0 -68
- package/data/onTypeFormatting/zsh.json +0 -68
- package/data/rangeSemanticTokens/bash.json +0 -90
- package/data/rangeSemanticTokens/zsh.json +0 -76
- package/data/references/bash.json +0 -221
- package/data/references/zsh.json +0 -166
- package/data/rename/bash.json +0 -37
- package/data/rename/zsh.json +0 -31
- package/data/selectionRange/bash.json +0 -35
- package/data/selectionRange/zsh.json +0 -35
- package/data/semanticTokens/bash.json +0 -71
- package/data/semanticTokens/zsh.json +0 -71
- package/data/signatureHelp/bash.json +0 -111
- package/data/signatureHelp/zsh.json +0 -118
- package/data/typeDefinition/bash.json +0 -95
- package/data/typeDefinition/zsh.json +0 -40
|
@@ -0,0 +1,305 @@
|
|
|
1
|
+
{
|
|
2
|
+
"language": "nextjs",
|
|
3
|
+
"hovers": {
|
|
4
|
+
"page": {
|
|
5
|
+
"contents": [{ "value": "```tsx\nexport default function Page({ params, searchParams }: PageProps): JSX.Element\n```\nA `page.tsx` is the unique UI of a route in the App Router. It is the default export that renders when the route is matched. Pages receive `params` for dynamic segments and `searchParams` for query parameters." }]
|
|
6
|
+
},
|
|
7
|
+
"layout": {
|
|
8
|
+
"contents": [{ "value": "```tsx\nexport default function Layout({ children, params }: LayoutProps): JSX.Element\n```\nA `layout.tsx` defines shared UI for a segment and its children. Layouts preserve state, remain interactive, and do not re-render on navigation. The root layout must contain `<html>` and `<body>` tags." }]
|
|
9
|
+
},
|
|
10
|
+
"loading": {
|
|
11
|
+
"contents": [{ "value": "```tsx\nexport default function Loading(): JSX.Element\n```\nA `loading.tsx` creates instant loading UI with React Suspense. The content is displayed while the segment's content loads. It automatically wraps the page in a `<Suspense>` boundary." }]
|
|
12
|
+
},
|
|
13
|
+
"error": {
|
|
14
|
+
"contents": [{ "value": "```tsx\n'use client'\nexport default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }): JSX.Element\n```\nAn `error.tsx` defines an error UI boundary for a route segment. It must be a Client Component. Receives `error` (the thrown error) and `reset` (a function to attempt re-rendering)." }]
|
|
15
|
+
},
|
|
16
|
+
"not-found": {
|
|
17
|
+
"contents": [{ "value": "```tsx\nexport default function NotFound(): JSX.Element\n```\nA `not-found.tsx` renders UI when the `notFound()` function is thrown within a route segment. It also serves as a catch-all for unmatched URLs at the app level." }]
|
|
18
|
+
},
|
|
19
|
+
"template": {
|
|
20
|
+
"contents": [{ "value": "```tsx\nexport default function Template({ children }: { children: React.ReactNode }): JSX.Element\n```\nA `template.tsx` is similar to `layout.tsx` but creates a new instance on each navigation. It does not preserve state between navigations and re-mounts DOM elements." }]
|
|
21
|
+
},
|
|
22
|
+
"route": {
|
|
23
|
+
"contents": [{ "value": "```tsx\nexport async function GET(request: NextRequest, context: { params: Promise<Params> }): Promise<NextResponse>\n```\nA `route.ts` file defines a Route Handler. Route Handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs." }]
|
|
24
|
+
},
|
|
25
|
+
"middleware": {
|
|
26
|
+
"contents": [{ "value": "```tsx\nimport { NextResponse } from 'next/server'\nimport type { NextRequest } from 'next/server'\n\nexport function middleware(request: NextRequest): NextResponse\n```\nMiddleware runs before a request is completed. It can rewrite, redirect, modify headers, or respond directly. Define in `middleware.ts` at the project root." }]
|
|
27
|
+
},
|
|
28
|
+
"default": {
|
|
29
|
+
"contents": [{ "value": "```tsx\nexport default function Default({ params }: { params: Params }): JSX.Element\n```\nA `default.tsx` is a fallback for parallel routes when Next.js cannot recover a slot's active state after a full-page load. It serves as the default content for `@slot` folders." }]
|
|
30
|
+
},
|
|
31
|
+
"global-error": {
|
|
32
|
+
"contents": [{ "value": "```tsx\n'use client'\nexport default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }): JSX.Element\n```\nA `global-error.tsx` handles uncaught errors in the root layout. It must define its own `<html>` and `<body>` tags since it replaces the root layout when active." }]
|
|
33
|
+
},
|
|
34
|
+
"generateStaticParams": {
|
|
35
|
+
"contents": [{ "value": "```tsx\nexport async function generateStaticParams(): Promise<Array<{ [key: string]: string }>>\n```\nUsed in combination with dynamic route segments to statically generate routes at build time instead of on-demand at request time. Returns an array of params objects for each route to pre-render." }]
|
|
36
|
+
},
|
|
37
|
+
"generateMetadata": {
|
|
38
|
+
"contents": [{ "value": "```tsx\nexport async function generateMetadata({ params, searchParams }: Props, parent: ResolvingMetadata): Promise<Metadata>\n```\nGenerates dynamic metadata for a page. Receives route params and parent metadata. Returns a `Metadata` object that sets `<head>` elements like title, description, Open Graph, etc." }]
|
|
39
|
+
},
|
|
40
|
+
"revalidatePath": {
|
|
41
|
+
"contents": [{ "value": "```tsx\nimport { revalidatePath } from 'next/cache'\n\nrevalidatePath(path: string, type?: 'page' | 'layout'): void\n```\nPurges cached data for a specific path on-demand. Can be used in Server Actions or Route Handlers. The `type` parameter controls whether to revalidate a page or its layout tree." }]
|
|
42
|
+
},
|
|
43
|
+
"revalidateTag": {
|
|
44
|
+
"contents": [{ "value": "```tsx\nimport { revalidateTag } from 'next/cache'\n\nrevalidateTag(tag: string): void\n```\nPurges cached data associated with a specific cache tag on-demand. Tags are assigned via `fetch` options: `fetch(url, { next: { tags: ['tagName'] } })`. Use in Server Actions or Route Handlers." }]
|
|
45
|
+
},
|
|
46
|
+
"use client": {
|
|
47
|
+
"contents": [{ "value": "```tsx\n'use client'\n```\nThe `\"use client\"` directive marks a component as a Client Component. Client Components are rendered on the client and can use React hooks like `useState`, `useEffect`, event handlers, and browser APIs. Must be at the top of the file." }]
|
|
48
|
+
},
|
|
49
|
+
"use server": {
|
|
50
|
+
"contents": [{ "value": "```tsx\n'use server'\n```\nThe `\"use server\"` directive marks a function or module as a Server Action. Server Actions can be called from Client Components and run exclusively on the server. They can be used in form actions and event handlers." }]
|
|
51
|
+
},
|
|
52
|
+
"useRouter": {
|
|
53
|
+
"contents": [{ "value": "```tsx\nimport { useRouter } from 'next/navigation'\n\nconst router = useRouter(): AppRouterInstance\n```\nReturns a router instance for programmatic navigation in Client Components. Methods: `router.push(href)`, `router.replace(href)`, `router.refresh()`, `router.prefetch(href)`, `router.back()`, `router.forward()`." }]
|
|
54
|
+
},
|
|
55
|
+
"usePathname": {
|
|
56
|
+
"contents": [{ "value": "```tsx\nimport { usePathname } from 'next/navigation'\n\nconst pathname = usePathname(): string\n```\nReturns the current URL pathname as a string. For example, `/dashboard/settings`. Client Component hook that reads the current route. Updates on navigation." }]
|
|
57
|
+
},
|
|
58
|
+
"useSearchParams": {
|
|
59
|
+
"contents": [{ "value": "```tsx\nimport { useSearchParams } from 'next/navigation'\n\nconst searchParams = useSearchParams(): ReadonlyURLSearchParams\n```\nReturns a read-only `URLSearchParams` object for accessing the current URL's query parameters. Must be used in a Client Component and wrapped in a `<Suspense>` boundary." }]
|
|
60
|
+
},
|
|
61
|
+
"useParams": {
|
|
62
|
+
"contents": [{ "value": "```tsx\nimport { useParams } from 'next/navigation'\n\nconst params = useParams(): Params\n```\nReturns an object containing the current route's dynamic parameters. For example, for `/shop/[slug]` visiting `/shop/1` returns `{ slug: '1' }`. Client Component hook." }]
|
|
63
|
+
},
|
|
64
|
+
"redirect": {
|
|
65
|
+
"contents": [{ "value": "```tsx\nimport { redirect } from 'next/navigation'\n\nredirect(path: string, type?: RedirectType): never\n```\nRedirects the user to another URL. Can be used in Server Components, Server Actions, and Route Handlers. Throws a `NEXT_REDIRECT` error internally. Default type is `'replace'`." }]
|
|
66
|
+
},
|
|
67
|
+
"notFound": {
|
|
68
|
+
"contents": [{ "value": "```tsx\nimport { notFound } from 'next/navigation'\n\nnotFound(): never\n```\nInvokes the `not-found.tsx` file for the current route segment. Throws a `NEXT_NOT_FOUND` error that terminates rendering of the current segment and renders the not-found UI." }]
|
|
69
|
+
},
|
|
70
|
+
"useSelectedLayoutSegment": {
|
|
71
|
+
"contents": [{ "value": "```tsx\nimport { useSelectedLayoutSegment } from 'next/navigation'\n\nconst segment = useSelectedLayoutSegment(parallelRoutesKey?: string): string | null\n```\nReturns the active route segment one level below the layout it's called from. Useful for navigation UI like tabs that change style based on the active child segment." }]
|
|
72
|
+
},
|
|
73
|
+
"useSelectedLayoutSegments": {
|
|
74
|
+
"contents": [{ "value": "```tsx\nimport { useSelectedLayoutSegments } from 'next/navigation'\n\nconst segments = useSelectedLayoutSegments(parallelRoutesKey?: string): string[]\n```\nReturns an array of active route segments below the layout it's called from. Useful for building breadcrumbs or other UI that needs knowledge of all active child segments." }]
|
|
75
|
+
},
|
|
76
|
+
"Image": {
|
|
77
|
+
"contents": [{ "value": "```tsx\nimport Image from 'next/image'\n\n<Image src={src} width={number} height={number} alt={string} />\n```\nThe `next/image` component extends HTML `<img>` with automatic image optimization: lazy loading, responsive sizing, format conversion (WebP/AVIF), and prevents layout shift." }]
|
|
78
|
+
},
|
|
79
|
+
"src": {
|
|
80
|
+
"contents": [{ "value": "```tsx\nsrc: string | StaticImport\n```\nThe source of the image. Can be a path string (local or remote), or a statically imported image file. Remote images require `remotePatterns` configuration in `next.config.js`." }]
|
|
81
|
+
},
|
|
82
|
+
"width": {
|
|
83
|
+
"contents": [{ "value": "```tsx\nwidth: number\n```\nThe intrinsic width of the image in pixels. Required unless using `fill` prop or a statically imported image. Used to determine the correct aspect ratio and avoid layout shift." }]
|
|
84
|
+
},
|
|
85
|
+
"height": {
|
|
86
|
+
"contents": [{ "value": "```tsx\nheight: number\n```\nThe intrinsic height of the image in pixels. Required unless using `fill` prop or a statically imported image. Used to determine the correct aspect ratio and avoid layout shift." }]
|
|
87
|
+
},
|
|
88
|
+
"alt": {
|
|
89
|
+
"contents": [{ "value": "```tsx\nalt: string\n```\nDescriptive text for the image used by screen readers and search engines. Required prop on the `next/image` component for accessibility compliance." }]
|
|
90
|
+
},
|
|
91
|
+
"fill": {
|
|
92
|
+
"contents": [{ "value": "```tsx\nfill?: boolean\n```\nCauses the image to fill its parent element instead of using explicit width/height. The parent must have `position: relative`. Use with `sizes` prop and `object-fit` CSS." }]
|
|
93
|
+
},
|
|
94
|
+
"sizes": {
|
|
95
|
+
"contents": [{ "value": "```tsx\nsizes?: string\n```\nA media query string that indicates how wide the image will be at various breakpoints. Important for performance when using `fill` or responsive images. Example: `\"(max-width: 768px) 100vw, 50vw\"`." }]
|
|
96
|
+
},
|
|
97
|
+
"quality": {
|
|
98
|
+
"contents": [{ "value": "```tsx\nquality?: number // 1-100, default 75\n```\nThe quality of the optimized image. Higher values produce better quality but larger file sizes. Integer between 1 and 100." }]
|
|
99
|
+
},
|
|
100
|
+
"priority": {
|
|
101
|
+
"contents": [{ "value": "```tsx\npriority?: boolean // default false\n```\nWhen true, the image is considered high priority and will be preloaded. Disables lazy loading. Use for the Largest Contentful Paint (LCP) element on each page." }]
|
|
102
|
+
},
|
|
103
|
+
"placeholder": {
|
|
104
|
+
"contents": [{ "value": "```tsx\nplaceholder?: 'empty' | 'blur' | 'data:image/...' // default 'empty'\n```\nA placeholder to show while the image is loading. `'blur'` uses `blurDataURL` (auto-generated for static imports). `'empty'` shows nothing during load." }]
|
|
105
|
+
},
|
|
106
|
+
"blurDataURL": {
|
|
107
|
+
"contents": [{ "value": "```tsx\nblurDataURL?: string\n```\nA base64-encoded Data URL used as the placeholder image before `src` loads. Only takes effect when combined with `placeholder=\"blur\"`. Auto-generated for statically imported images." }]
|
|
108
|
+
},
|
|
109
|
+
"Link": {
|
|
110
|
+
"contents": [{ "value": "```tsx\nimport Link from 'next/link'\n\n<Link href={string | UrlObject} prefetch={boolean} replace={boolean} scroll={boolean}>{children}</Link>\n```\nThe `next/link` component enables client-side navigation between routes with automatic prefetching. It extends HTML `<a>` with Next.js routing capabilities." }]
|
|
111
|
+
},
|
|
112
|
+
"href": {
|
|
113
|
+
"contents": [{ "value": "```tsx\nhref: string | UrlObject\n```\nThe path or URL to navigate to. Can be a string path (`\"/dashboard\"`), an object with `pathname` and `query`, or a full URL for external links." }]
|
|
114
|
+
},
|
|
115
|
+
"prefetch": {
|
|
116
|
+
"contents": [{ "value": "```tsx\nprefetch?: boolean | null // default: true\n```\nControls prefetching behavior for `next/link`. When `true`, the linked route is prefetched when the link enters the viewport. Set to `false` to disable prefetching." }]
|
|
117
|
+
},
|
|
118
|
+
"replace": {
|
|
119
|
+
"contents": [{ "value": "```tsx\nreplace?: boolean // default false\n```\nWhen `true`, `next/link` replaces the current history state instead of adding a new entry to the browser's history stack." }]
|
|
120
|
+
},
|
|
121
|
+
"scroll": {
|
|
122
|
+
"contents": [{ "value": "```tsx\nscroll?: boolean // default true\n```\nControls whether the page scrolls to the top after navigation. Set to `false` to maintain the current scroll position when navigating via `next/link`." }]
|
|
123
|
+
},
|
|
124
|
+
"localFont": {
|
|
125
|
+
"contents": [{ "value": "```tsx\nimport localFont from 'next/font/local'\n\nconst myFont = localFont({ src: './my-font.woff2', display?: string, variable?: string })\n```\nLoads a local font file. Supports `.woff`, `.woff2`, `.ttf`, `.otf`. Automatically self-hosts and optimizes fonts with zero layout shift." }]
|
|
126
|
+
},
|
|
127
|
+
"next/font/google": {
|
|
128
|
+
"contents": [{ "value": "```tsx\nimport { Inter } from 'next/font/google'\n\nconst inter = Inter({ subsets: ['latin'], display?: string, variable?: string, weight?: string | string[] })\n```\nLoads Google Fonts with automatic self-hosting. No requests are sent to Google by the browser. Supports variable and non-variable fonts." }]
|
|
129
|
+
},
|
|
130
|
+
"Script": {
|
|
131
|
+
"contents": [{ "value": "```tsx\nimport Script from 'next/script'\n\n<Script src={string} strategy={string} onLoad={Function} onReady={Function} onError={Function} />\n```\nThe `next/script` component enables loading third-party scripts with optimized strategies: `beforeInteractive`, `afterInteractive` (default), `lazyOnload`, and `worker`." }]
|
|
132
|
+
},
|
|
133
|
+
"strategy": {
|
|
134
|
+
"contents": [{ "value": "```tsx\nstrategy?: 'beforeInteractive' | 'afterInteractive' | 'lazyOnload' | 'worker'\n```\nControls when the third-party script loads. `beforeInteractive`: before hydration. `afterInteractive` (default): after hydration. `lazyOnload`: during idle time. `worker`: in a web worker." }]
|
|
135
|
+
},
|
|
136
|
+
"onLoad": {
|
|
137
|
+
"contents": [{ "value": "```tsx\nonLoad?: () => void\n```\nCallback executed once after the script has finished loading. Only works with `afterInteractive` and `lazyOnload` strategies." }]
|
|
138
|
+
},
|
|
139
|
+
"onReady": {
|
|
140
|
+
"contents": [{ "value": "```tsx\nonReady?: () => void\n```\nCallback executed after the script has finished loading and every time the component is mounted. Useful for scripts that need re-initialization on route changes." }]
|
|
141
|
+
},
|
|
142
|
+
"headers": {
|
|
143
|
+
"contents": [{ "value": "```tsx\nimport { headers } from 'next/headers'\n\nconst headersList = await headers(): Promise<ReadonlyHeaders>\n```\nReturns a read-only Headers object for the incoming request. Used in Server Components and Route Handlers. Dynamic function that opts into dynamic rendering." }]
|
|
144
|
+
},
|
|
145
|
+
"cookies": {
|
|
146
|
+
"contents": [{ "value": "```tsx\nimport { cookies } from 'next/headers'\n\nconst cookieStore = await cookies(): Promise<ReadonlyRequestCookies>\n```\nReturns a read-only cookies object. Methods: `.get(name)`, `.getAll()`, `.has(name)`. To set cookies, use `cookies().set()` in a Server Action or Route Handler." }]
|
|
147
|
+
},
|
|
148
|
+
"NextRequest": {
|
|
149
|
+
"contents": [{ "value": "```tsx\nimport { NextRequest } from 'next/server'\n\nclass NextRequest extends Request {\n cookies: RequestCookies\n nextUrl: NextURL\n ip?: string\n geo?: { city, country, region, latitude, longitude }\n}\n```\nExtends the Web `Request` API with additional Next.js-specific properties. Used in Middleware and Route Handlers." }]
|
|
150
|
+
},
|
|
151
|
+
"NextResponse": {
|
|
152
|
+
"contents": [{ "value": "```tsx\nimport { NextResponse } from 'next/server'\n\nclass NextResponse extends Response {\n static json(body, init?): NextResponse\n static redirect(url, status?): NextResponse\n static rewrite(destination): NextResponse\n static next(init?): NextResponse\n cookies: ResponseCookies\n}\n```\nExtends the Web `Response` API with helper methods for Next.js middleware and route handlers." }]
|
|
153
|
+
},
|
|
154
|
+
"NextMiddleware": {
|
|
155
|
+
"contents": [{ "value": "```tsx\ntype NextMiddleware = (\n request: NextRequest,\n event: NextFetchEvent\n) => NextResponse | Response | null | undefined | void | Promise<...>\n```\nThe function type for Next.js middleware. Receives the request and an event object with `waitUntil()` for extending the lifetime of the function." }]
|
|
156
|
+
},
|
|
157
|
+
"fetch": {
|
|
158
|
+
"contents": [{ "value": "```tsx\nfetch(url: string, {\n cache?: 'force-cache' | 'no-store',\n next?: { revalidate?: number | false, tags?: string[] }\n}): Promise<Response>\n```\nNext.js extends the native `fetch` API with caching and revalidation options. `cache: 'force-cache'` caches indefinitely. `next.revalidate` sets time-based revalidation in seconds." }]
|
|
159
|
+
},
|
|
160
|
+
"revalidate": {
|
|
161
|
+
"contents": [{ "value": "```tsx\nexport const revalidate = number | false | 0\n```\nSets the default revalidation time (in seconds) for a layout or page segment. `0` means always revalidate. `false` means cache indefinitely. Applies to all `fetch` requests in the segment." }]
|
|
162
|
+
},
|
|
163
|
+
"tags": {
|
|
164
|
+
"contents": [{ "value": "```tsx\nnext: { tags: string[] }\n```\nAssigns cache tags to a `fetch` request. Tags enable on-demand revalidation via `revalidateTag(tag)`. Example: `fetch(url, { next: { tags: ['posts'] } })`." }]
|
|
165
|
+
},
|
|
166
|
+
"cache": {
|
|
167
|
+
"contents": [{ "value": "```tsx\ncache?: 'force-cache' | 'no-store'\n```\nThe `cache` option on `fetch()` controls request caching. `'force-cache'` (default for GET in Server Components) caches the response. `'no-store'` skips the cache entirely." }]
|
|
168
|
+
},
|
|
169
|
+
"unstable_cache": {
|
|
170
|
+
"contents": [{ "value": "```tsx\nimport { unstable_cache } from 'next/cache'\n\nconst getCachedData = unstable_cache(\n async () => { /* fetch data */ },\n keyParts?: string[],\n options?: { revalidate?: number, tags?: string[] }\n)\n```\nWraps a function with caching. The result is cached and can be revalidated by time or tags. Useful for caching database queries and other non-fetch data sources." }]
|
|
171
|
+
},
|
|
172
|
+
"unstable_noStore": {
|
|
173
|
+
"contents": [{ "value": "```tsx\nimport { unstable_noStore as noStore } from 'next/cache'\n\nnoStore(): void\n```\nOpts a Server Component or function out of static rendering, ensuring it always runs dynamically. Equivalent to `cache: 'no-store'` on a fetch request." }]
|
|
174
|
+
},
|
|
175
|
+
"images": {
|
|
176
|
+
"contents": [{ "value": "```tsx\n// next.config.js\nmodule.exports = {\n images: {\n remotePatterns: [{ protocol, hostname, port, pathname }],\n domains: string[],\n formats: ('image/avif' | 'image/webp')[],\n deviceSizes: number[],\n imageSizes: number[]\n }\n}\n```\nConfigures the Next.js Image Optimization API. Define allowed remote image sources, supported formats, and responsive breakpoints." }]
|
|
177
|
+
},
|
|
178
|
+
"redirects": {
|
|
179
|
+
"contents": [{ "value": "```tsx\n// next.config.js\nmodule.exports = {\n async redirects(): Promise<Redirect[]> {\n return [{ source: '/old', destination: '/new', permanent: true }]\n }\n}\n```\nDefines URL redirects. Each redirect has `source` (incoming path pattern), `destination` (target path), and `permanent` (308 vs 307 status code)." }]
|
|
180
|
+
},
|
|
181
|
+
"rewrites": {
|
|
182
|
+
"contents": [{ "value": "```tsx\n// next.config.js\nmodule.exports = {\n async rewrites() {\n return [{ source: '/api/:path*', destination: 'https://backend.example.com/:path*' }]\n }\n}\n```\nRewrites map an incoming request path to a different destination path. Unlike redirects, rewrites act as a URL proxy and mask the destination path." }]
|
|
183
|
+
},
|
|
184
|
+
"env": {
|
|
185
|
+
"contents": [{ "value": "```tsx\n// next.config.js\nmodule.exports = {\n env: { CUSTOM_KEY: 'value' }\n}\n```\nExposes environment variables to the browser bundle at build time. Variables prefixed with `NEXT_PUBLIC_` are automatically exposed without this config." }]
|
|
186
|
+
},
|
|
187
|
+
"webpack": {
|
|
188
|
+
"contents": [{ "value": "```tsx\n// next.config.js\nmodule.exports = {\n webpack: (config: WebpackConfig, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => {\n return config\n }\n}\n```\nCustom webpack configuration function. Called twice: once for the server and once for the client. Use to add loaders, plugins, or modify the config." }]
|
|
189
|
+
},
|
|
190
|
+
"turbopack": {
|
|
191
|
+
"contents": [{ "value": "```tsx\n// next.config.js\nmodule.exports = {\n experimental: {\n turbo: {\n rules: { '*.svg': { loaders: ['@svgr/webpack'], as: '*.js' } },\n resolveAlias: { underscore: 'lodash' }\n }\n }\n}\n```\nTurbopack configuration for the Next.js dev server (`next dev --turbo`). Supports custom loaders and module resolution aliases." }]
|
|
192
|
+
},
|
|
193
|
+
"metadata": {
|
|
194
|
+
"contents": [{ "value": "```tsx\nimport type { Metadata } from 'next'\n\nexport const metadata: Metadata = {\n title: string | { default, template, absolute },\n description: string,\n openGraph: { ... },\n twitter: { ... },\n icons: { ... },\n robots: { ... }\n}\n```\nStatic metadata export for a page or layout. Generates `<head>` elements including title, description, Open Graph tags, Twitter cards, icons, and robots directives." }]
|
|
195
|
+
},
|
|
196
|
+
"viewport": {
|
|
197
|
+
"contents": [{ "value": "```tsx\nimport type { Viewport } from 'next'\n\nexport const viewport: Viewport = {\n width: 'device-width',\n initialScale: 1,\n maximumScale: 1,\n themeColor: string | { media: string, color: string }[]\n}\n```\nStatic viewport configuration export. Separated from metadata for better static optimization. Controls viewport meta tag and theme color." }]
|
|
198
|
+
},
|
|
199
|
+
"MetadataBase": {
|
|
200
|
+
"contents": [{ "value": "```tsx\nexport const metadata: Metadata = {\n metadataBase: new URL('https://example.com')\n}\n```\nSets the base URL for metadata fields that require a fully qualified URL (like Open Graph images). Resolves relative URLs in `openGraph`, `twitter`, and other metadata fields." }]
|
|
201
|
+
},
|
|
202
|
+
"openGraph": {
|
|
203
|
+
"contents": [{ "value": "```tsx\nopenGraph: {\n title: string,\n description: string,\n url: string,\n siteName: string,\n images: [{ url, width, height, alt }],\n locale: string,\n type: 'website' | 'article'\n}\n```\nOpen Graph metadata for social media sharing. Generates `og:` meta tags. Used within the `metadata` or `generateMetadata` exports." }]
|
|
204
|
+
},
|
|
205
|
+
"twitter": {
|
|
206
|
+
"contents": [{ "value": "```tsx\ntwitter: {\n card: 'summary' | 'summary_large_image' | 'app' | 'player',\n title: string,\n description: string,\n images: string[],\n creator: string\n}\n```\nTwitter Card metadata. Generates `twitter:` meta tags for rich link previews on Twitter/X." }]
|
|
207
|
+
},
|
|
208
|
+
"icons": {
|
|
209
|
+
"contents": [{ "value": "```tsx\nicons: {\n icon: string | { url, type, sizes }[],\n shortcut: string,\n apple: string | { url, sizes }[],\n other: { rel, url }[]\n}\n```\nFavicon and app icon metadata. Generates `<link rel=\"icon\">`, `<link rel=\"apple-touch-icon\">`, and other icon-related tags." }]
|
|
210
|
+
},
|
|
211
|
+
"robots": {
|
|
212
|
+
"contents": [{ "value": "```tsx\nrobots: {\n index: boolean,\n follow: boolean,\n nocache: boolean,\n googleBot: { index, follow, noimageindex, 'max-video-preview', 'max-image-preview', 'max-snippet' }\n}\n```\nRobots metadata for search engine crawling directives. Generates the `robots` meta tag." }]
|
|
213
|
+
},
|
|
214
|
+
"sitemap": {
|
|
215
|
+
"contents": [{ "value": "```tsx\n// app/sitemap.ts\nimport type { MetadataRoute } from 'next'\n\nexport default function sitemap(): MetadataRoute.Sitemap {\n return [{ url: 'https://example.com', lastModified: new Date(), changeFrequency: 'yearly', priority: 1 }]\n}\n```\nGenerates a `sitemap.xml` file for search engine discoverability. Export a default function from `app/sitemap.ts`." }]
|
|
216
|
+
},
|
|
217
|
+
"manifest": {
|
|
218
|
+
"contents": [{ "value": "```tsx\n// app/manifest.ts\nimport type { MetadataRoute } from 'next'\n\nexport default function manifest(): MetadataRoute.Manifest {\n return { name: 'App', short_name: 'App', start_url: '/', display: 'standalone' }\n}\n```\nGenerates a `manifest.json` / `manifest.webmanifest` for Progressive Web App (PWA) support." }]
|
|
219
|
+
},
|
|
220
|
+
"dynamic": {
|
|
221
|
+
"contents": [{ "value": "```tsx\nimport dynamic from 'next/dynamic'\n\nconst Component = dynamic(() => import('./Component'), {\n loading: () => <p>Loading...</p>,\n ssr: boolean\n})\n```\nLazy loads a component with code splitting. Supports SSR toggle and a loading component. Uses `React.lazy()` and `Suspense` under the hood." }]
|
|
222
|
+
},
|
|
223
|
+
"useFormStatus": {
|
|
224
|
+
"contents": [{ "value": "```tsx\nimport { useFormStatus } from 'react-dom'\n\nconst { pending, data, method, action } = useFormStatus()\n```\nReturns status information for the last form submission. `pending` is `true` while the Server Action is executing. Must be used inside a `<form>` element." }]
|
|
225
|
+
},
|
|
226
|
+
"useFormState": {
|
|
227
|
+
"contents": [{ "value": "```tsx\nimport { useFormState } from 'react-dom'\n\nconst [state, formAction] = useFormState(action: ServerAction, initialState: State)\n```\nManages form state with a Server Action. Returns the current state and a wrapped action. The action receives previous state and form data as arguments." }]
|
|
228
|
+
},
|
|
229
|
+
"useOptimistic": {
|
|
230
|
+
"contents": [{ "value": "```tsx\nimport { useOptimistic } from 'react'\n\nconst [optimisticState, addOptimistic] = useOptimistic(state, updateFn)\n```\nProvides optimistic UI updates. Shows a temporary state while an async action (like a Server Action) is in progress. Reverts to actual state when the action completes." }]
|
|
231
|
+
},
|
|
232
|
+
"GET": {
|
|
233
|
+
"contents": [{ "value": "```tsx\nexport async function GET(request: NextRequest, { params }: { params: Promise<Params> }): Promise<Response | NextResponse>\n```\nHTTP GET handler in a Route Handler (`route.ts`). Handles GET requests. Cached by default unless using dynamic functions." }]
|
|
234
|
+
},
|
|
235
|
+
"POST": {
|
|
236
|
+
"contents": [{ "value": "```tsx\nexport async function POST(request: NextRequest, { params }: { params: Promise<Params> }): Promise<Response | NextResponse>\n```\nHTTP POST handler in a Route Handler (`route.ts`). Handles POST requests. Not cached by default." }]
|
|
237
|
+
},
|
|
238
|
+
"PUT": {
|
|
239
|
+
"contents": [{ "value": "```tsx\nexport async function PUT(request: NextRequest, { params }: { params: Promise<Params> }): Promise<Response | NextResponse>\n```\nHTTP PUT handler in a Route Handler (`route.ts`). Handles PUT requests for full resource updates." }]
|
|
240
|
+
},
|
|
241
|
+
"PATCH": {
|
|
242
|
+
"contents": [{ "value": "```tsx\nexport async function PATCH(request: NextRequest, { params }: { params: Promise<Params> }): Promise<Response | NextResponse>\n```\nHTTP PATCH handler in a Route Handler (`route.ts`). Handles PATCH requests for partial resource updates." }]
|
|
243
|
+
},
|
|
244
|
+
"DELETE": {
|
|
245
|
+
"contents": [{ "value": "```tsx\nexport async function DELETE(request: NextRequest, { params }: { params: Promise<Params> }): Promise<Response | NextResponse>\n```\nHTTP DELETE handler in a Route Handler (`route.ts`). Handles DELETE requests for resource removal." }]
|
|
246
|
+
},
|
|
247
|
+
"HEAD": {
|
|
248
|
+
"contents": [{ "value": "```tsx\nexport async function HEAD(request: NextRequest): Promise<Response>\n```\nHTTP HEAD handler in a Route Handler (`route.ts`). Similar to GET but without a response body. Useful for checking resource existence or headers." }]
|
|
249
|
+
},
|
|
250
|
+
"OPTIONS": {
|
|
251
|
+
"contents": [{ "value": "```tsx\nexport async function OPTIONS(request: NextRequest): Promise<Response>\n```\nHTTP OPTIONS handler in a Route Handler (`route.ts`). Used for CORS preflight requests. If not defined, Next.js auto-handles OPTIONS based on other defined methods." }]
|
|
252
|
+
},
|
|
253
|
+
"@folder": {
|
|
254
|
+
"contents": [{ "value": "```\napp/\n @analytics/\n page.tsx\n @team/\n page.tsx\n layout.tsx\n page.tsx\n```\nParallel routes are defined by naming a folder with the `@` prefix (slot). Each slot is passed as a prop to the parent layout. Parallel routes render simultaneously in the same layout." }]
|
|
255
|
+
},
|
|
256
|
+
"slots": {
|
|
257
|
+
"contents": [{ "value": "```tsx\nexport default function Layout({\n children,\n analytics,\n team\n}: {\n children: React.ReactNode\n analytics: React.ReactNode\n team: React.ReactNode\n}) { ... }\n```\nSlots are the props passed to a layout from parallel routes (`@folder`). Each slot renders independently and can have its own loading, error, and not-found states." }]
|
|
258
|
+
},
|
|
259
|
+
"(.)": {
|
|
260
|
+
"contents": [{ "value": "```\n(.) - matches the same level\n(..) - matches one level above\n(..)(..) - matches two levels above\n(...) - matches from the root app directory\n```\nIntercepting routes convention. Allows loading a route within the current layout while showing a different URL. Commonly used for modals (e.g., photo gallery overlays)." }]
|
|
261
|
+
},
|
|
262
|
+
"(..)": {
|
|
263
|
+
"contents": [{ "value": "```\n(..) - Intercepts a route one level above the current segment.\n```\nUsed for intercepting routes one directory level above. Place inside a folder like `(..)photo/[id]/page.tsx` to intercept `/photo/[id]` from a sibling route." }]
|
|
264
|
+
},
|
|
265
|
+
"(...)": {
|
|
266
|
+
"contents": [{ "value": "```\n(...) - Intercepts a route from the root app directory.\n```\nUsed for intercepting routes from the root of the app directory structure. Matches regardless of nesting depth." }]
|
|
267
|
+
},
|
|
268
|
+
"(..)(..)": {
|
|
269
|
+
"contents": [{ "value": "```\n(..)(..) - Intercepts a route two levels above the current segment.\n```\nUsed for intercepting routes two directory levels above. Useful for deeply nested interception patterns." }]
|
|
270
|
+
},
|
|
271
|
+
"runtime": {
|
|
272
|
+
"contents": [{ "value": "```tsx\nexport const runtime = 'nodejs' | 'edge'\n```\nSets the runtime for a route segment. `'nodejs'` (default) uses the Node.js runtime. `'edge'` uses the Edge Runtime with a smaller API surface but faster cold starts." }]
|
|
273
|
+
},
|
|
274
|
+
"dynamicParams": {
|
|
275
|
+
"contents": [{ "value": "```tsx\nexport const dynamicParams = true | false\n```\nControls behavior when visiting a dynamic segment not generated with `generateStaticParams`. `true` (default) generates on demand. `false` returns a 404." }]
|
|
276
|
+
},
|
|
277
|
+
"fetchCache": {
|
|
278
|
+
"contents": [{ "value": "```tsx\nexport const fetchCache = 'auto' | 'default-cache' | 'only-cache' | 'force-cache' | 'default-no-store' | 'only-no-store' | 'force-no-store'\n```\nOverrides the default caching behavior of all `fetch` requests in a route segment. Advanced option for fine-grained cache control." }]
|
|
279
|
+
},
|
|
280
|
+
"NextPage": {
|
|
281
|
+
"contents": [{ "value": "```tsx\nimport type { NextPage } from 'next'\n\nconst Page: NextPage<Props> = ({ prop1, prop2 }) => { ... }\n```\nType for page components in the Pages Router. Generic type that accepts page props. Includes `getInitialProps` support." }]
|
|
282
|
+
},
|
|
283
|
+
"NextApiRequest": {
|
|
284
|
+
"contents": [{ "value": "```tsx\nimport type { NextApiRequest } from 'next'\n\ninterface NextApiRequest extends IncomingMessage {\n query: Partial<{ [key: string]: string | string[] }>\n cookies: Partial<{ [key: string]: string }>\n body: any\n env: Env\n}\n```\nType for API route request objects in the Pages Router (`pages/api/`). Extends Node.js `IncomingMessage` with parsed query, cookies, and body."}]
|
|
285
|
+
},
|
|
286
|
+
"NextApiResponse": {
|
|
287
|
+
"contents": [{ "value": "```tsx\nimport type { NextApiResponse } from 'next'\n\ninterface NextApiResponse<T = any> extends ServerResponse {\n status(code: number): NextApiResponse<T>\n json(body: T): void\n redirect(url: string): NextApiResponse<T>\n send(body: string): void\n}\n```\nType for API route response objects in the Pages Router. Provides helper methods for status codes, JSON, redirects, and sending responses." }]
|
|
288
|
+
},
|
|
289
|
+
"getServerSideProps": {
|
|
290
|
+
"contents": [{ "value": "```tsx\nimport type { GetServerSideProps } from 'next'\n\nexport const getServerSideProps: GetServerSideProps = async (context) => {\n return { props: {} }\n}\n```\nPages Router data fetching function. Runs on every request on the server side. Can return `props`, `redirect`, or `notFound`. The page receives returned props as component props." }]
|
|
291
|
+
},
|
|
292
|
+
"getStaticProps": {
|
|
293
|
+
"contents": [{ "value": "```tsx\nimport type { GetStaticProps } from 'next'\n\nexport const getStaticProps: GetStaticProps = async (context) => {\n return { props: {}, revalidate?: number }\n}\n```\nPages Router data fetching for static generation. Runs at build time. Supports ISR with `revalidate`. Returns `props`, `redirect`, `notFound`, or `revalidate`." }]
|
|
294
|
+
},
|
|
295
|
+
"getStaticPaths": {
|
|
296
|
+
"contents": [{ "value": "```tsx\nimport type { GetStaticPaths } from 'next'\n\nexport const getStaticPaths: GetStaticPaths = async () => {\n return { paths: [{ params: { id: '1' } }], fallback: false | true | 'blocking' }\n}\n```\nPages Router function for defining dynamic routes to pre-render at build time. Used with `getStaticProps`. `fallback` controls behavior for non-generated paths." }]
|
|
297
|
+
},
|
|
298
|
+
"config": {
|
|
299
|
+
"contents": [{ "value": "```tsx\nexport const config = {\n matcher: string | string[]\n}\n```\nMiddleware configuration object. The `matcher` property defines which routes the middleware should run on. Supports path patterns with parameters." }]
|
|
300
|
+
},
|
|
301
|
+
"shallow": {
|
|
302
|
+
"contents": [{ "value": "```tsx\nshallow?: boolean\n```\nWhen used with `next/link` or `router.push`, updates the URL without running data fetching methods (Pages Router). In the App Router, use `window.history.pushState` instead." }]
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
{
|
|
2
|
+
"language": "react",
|
|
3
|
+
"hovers": {
|
|
4
|
+
"useState": {
|
|
5
|
+
"contents": [{ "value": "```jsx\nfunction useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>]\n```\nReturns a stateful value and a function to update it. During the initial render, the returned state matches the passed `initialState`. The `setState` function is used to update the state, triggering a re-render of the component." }]
|
|
6
|
+
},
|
|
7
|
+
"useEffect": {
|
|
8
|
+
"contents": [{ "value": "```jsx\nfunction useEffect(effect: EffectCallback, deps?: DependencyList): void\n```\nAccepts a function that contains imperative, possibly effectful code. Mutations, subscriptions, timers, logging, and other side effects are performed here. The function runs after every completed render by default. Provide a dependency array to control when the effect runs." }]
|
|
9
|
+
},
|
|
10
|
+
"useContext": {
|
|
11
|
+
"contents": [{ "value": "```jsx\nfunction useContext<T>(context: Context<T>): T\n```\nAccepts a context object (from `React.createContext`) and returns the current context value for that context. The value is determined by the `value` prop of the nearest `<MyContext.Provider>` above the calling component." }]
|
|
12
|
+
},
|
|
13
|
+
"useReducer": {
|
|
14
|
+
"contents": [{ "value": "```jsx\nfunction useReducer<R extends Reducer<any, any>>(reducer: R, initialState: ReducerState<R>): [ReducerState<R>, Dispatch<ReducerAction<R>>]\n```\nAn alternative to `useState` for managing complex state logic. Accepts a reducer of type `(state, action) => newState` and returns the current state paired with a `dispatch` method. Preferred when state logic involves multiple sub-values." }]
|
|
15
|
+
},
|
|
16
|
+
"useMemo": {
|
|
17
|
+
"contents": [{ "value": "```jsx\nfunction useMemo<T>(factory: () => T, deps: DependencyList): T\n```\nReturns a memoized value. Only recomputes when one of the dependencies has changed. This optimization helps avoid expensive calculations on every render. The function is called during rendering, so keep it pure." }]
|
|
18
|
+
},
|
|
19
|
+
"useCallback": {
|
|
20
|
+
"contents": [{ "value": "```jsx\nfunction useCallback<T extends Function>(callback: T, deps: DependencyList): T\n```\nReturns a memoized callback function. The callback only changes when one of the dependencies changes. Useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders." }]
|
|
21
|
+
},
|
|
22
|
+
"useRef": {
|
|
23
|
+
"contents": [{ "value": "```jsx\nfunction useRef<T>(initialValue: T): MutableRefObject<T>\n```\nReturns a mutable ref object whose `.current` property is initialized to the passed argument. The returned object persists for the full lifetime of the component. Commonly used for DOM access and storing mutable values without triggering re-renders." }]
|
|
24
|
+
},
|
|
25
|
+
"useLayoutEffect": {
|
|
26
|
+
"contents": [{ "value": "```jsx\nfunction useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void\n```\nIdentical to `useEffect`, but fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates inside `useLayoutEffect` will be flushed before the browser paints." }]
|
|
27
|
+
},
|
|
28
|
+
"useId": {
|
|
29
|
+
"contents": [{ "value": "```jsx\nfunction useId(): string\n```\nGenerates unique IDs that are stable across server and client. Avoids hydration mismatches. Primarily used for accessibility attributes like `htmlFor` and `aria-describedby`." }]
|
|
30
|
+
},
|
|
31
|
+
"useTransition": {
|
|
32
|
+
"contents": [{ "value": "```jsx\nfunction useTransition(): [boolean, (callback: () => void) => void]\n```\nReturns `[isPending, startTransition]`. Lets you mark state updates as transitions, so they can be interrupted by more urgent updates. `isPending` indicates when a transition is waiting." }]
|
|
33
|
+
},
|
|
34
|
+
"useDeferredValue": {
|
|
35
|
+
"contents": [{ "value": "```jsx\nfunction useDeferredValue<T>(value: T): T\n```\nAccepts a value and returns a deferred version that may lag behind. Useful for keeping the interface responsive when triggering expensive re-renders (e.g., filtering a large list)." }]
|
|
36
|
+
},
|
|
37
|
+
"useSyncExternalStore": {
|
|
38
|
+
"contents": [{ "value": "```jsx\nfunction useSyncExternalStore<T>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => T, getServerSnapshot?: () => T): T\n```\nSubscribes to an external store. Recommended for integrating non-React state management (Redux, Zustand, etc.) with React. Ensures consistent reads during concurrent rendering." }]
|
|
39
|
+
},
|
|
40
|
+
"useImperativeHandle": {
|
|
41
|
+
"contents": [{ "value": "```jsx\nfunction useImperativeHandle<T>(ref: Ref<T>, createHandle: () => T, deps?: DependencyList): void\n```\nCustomizes the instance value that is exposed to parent components when using `ref`. Should be used with `forwardRef`. Controls which methods or values parents can access." }]
|
|
42
|
+
},
|
|
43
|
+
"useDebugValue": {
|
|
44
|
+
"contents": [{ "value": "```jsx\nfunction useDebugValue<T>(value: T, format?: (value: T) => any): void\n```\nDisplays a label for custom hooks in React DevTools. Optionally accepts a formatting function to defer expensive formatting until the hook is inspected." }]
|
|
45
|
+
},
|
|
46
|
+
"useInsertionEffect": {
|
|
47
|
+
"contents": [{ "value": "```jsx\nfunction useInsertionEffect(effect: EffectCallback, deps?: DependencyList): void\n```\nFires synchronously before all DOM mutations. Designed for CSS-in-JS libraries to inject `<style>` rules before any layout effects read from the DOM." }]
|
|
48
|
+
},
|
|
49
|
+
"useOptimistic": {
|
|
50
|
+
"contents": [{ "value": "```jsx\nfunction useOptimistic<T, A>(passthrough: T, reducer: (state: T, action: A) => T): [T, (action: A) => void]\n```\nAllows optimistic UI updates while an async action is underway. Shows the optimistic state immediately, then reverts or updates when the async operation completes." }]
|
|
51
|
+
},
|
|
52
|
+
"useFormStatus": {
|
|
53
|
+
"contents": [{ "value": "```jsx\nfunction useFormStatus(): { pending: boolean; data: FormData | null; method: string | null; action: string | null }\n```\nGives status information of the last form submission. Must be called from a component rendered inside a `<form>`. Useful for disabling submit buttons during pending submissions." }]
|
|
54
|
+
},
|
|
55
|
+
"useActionState": {
|
|
56
|
+
"contents": [{ "value": "```jsx\nfunction useActionState<T>(action: (state: T, payload: FormData) => T | Promise<T>, initialState: T, permalink?: string): [T, (payload: FormData) => void]\n```\nUpdates state based on the result of a form action. Returns the current state and a wrapped action function. The action can be async and the state updates once it resolves." }]
|
|
57
|
+
},
|
|
58
|
+
"use": {
|
|
59
|
+
"contents": [{ "value": "```jsx\nfunction use<T>(resource: Promise<T> | Context<T>): T\n```\nReads the value of a resource like a Promise or context. Unlike other hooks, `use` can be called conditionally and inside loops. When called with a Promise, it integrates with Suspense and Error Boundaries." }]
|
|
60
|
+
},
|
|
61
|
+
"createElement": {
|
|
62
|
+
"contents": [{ "value": "```jsx\nfunction createElement(type: string | ComponentType, props?: object | null, ...children: ReactNode[]): ReactElement\n```\nCreates and returns a new React element of the given type. The type can be a tag name string (`'div'`), a React component type (class or function), or a React Fragment. JSX compiles to `createElement` calls." }]
|
|
63
|
+
},
|
|
64
|
+
"cloneElement": {
|
|
65
|
+
"contents": [{ "value": "```jsx\nfunction cloneElement(element: ReactElement, props?: object, ...children: ReactNode[]): ReactElement\n```\nClone and return a new React element using `element` as the starting point. New props are shallowly merged with the original. New children replace existing children." }]
|
|
66
|
+
},
|
|
67
|
+
"createContext": {
|
|
68
|
+
"contents": [{ "value": "```jsx\nfunction createContext<T>(defaultValue: T): Context<T>\n```\nCreates a Context object. When React renders a component that subscribes to this Context, it reads the current value from the closest matching `Provider` above it in the tree. The `defaultValue` is used when there is no matching Provider." }]
|
|
69
|
+
},
|
|
70
|
+
"forwardRef": {
|
|
71
|
+
"contents": [{ "value": "```jsx\nfunction forwardRef<T, P>(render: (props: P, ref: Ref<T>) => ReactElement | null): ForwardRefExoticComponent<P & RefAttributes<T>>\n```\nCreates a React component that forwards the `ref` attribute to a child component. Allows parent components to access a child's DOM element or component instance." }]
|
|
72
|
+
},
|
|
73
|
+
"lazy": {
|
|
74
|
+
"contents": [{ "value": "```jsx\nfunction lazy<T extends ComponentType<any>>(factory: () => Promise<{ default: T }>): LazyExoticComponent<T>\n```\nDefines a component that is loaded dynamically. Takes a function that returns a `Promise` resolving to a module with a `default` export containing a React component. Must be wrapped in `<Suspense>`." }]
|
|
75
|
+
},
|
|
76
|
+
"memo": {
|
|
77
|
+
"contents": [{ "value": "```jsx\nfunction memo<P>(Component: FunctionComponent<P>, propsAreEqual?: (prev: P, next: P) => boolean): NamedExoticComponent<P>\n```\nHigher-order component that memoizes results. If props are the same, React skips rendering the component and reuses the last result. Optionally accepts a custom comparison function." }]
|
|
78
|
+
},
|
|
79
|
+
"startTransition": {
|
|
80
|
+
"contents": [{ "value": "```jsx\nfunction startTransition(scope: () => void): void\n```\nMarks state updates inside the provided callback as transitions. Transitions are non-urgent and can be interrupted by more pressing updates (like typing), keeping the UI responsive." }]
|
|
81
|
+
},
|
|
82
|
+
"createPortal": {
|
|
83
|
+
"contents": [{ "value": "```jsx\nfunction createPortal(children: ReactNode, container: Element | DocumentFragment, key?: string): ReactPortal\n```\nCreates a portal that renders `children` into a DOM node (`container`) outside the parent component's DOM hierarchy. Events still bubble through the React tree, not the DOM tree." }]
|
|
84
|
+
},
|
|
85
|
+
"createRoot": {
|
|
86
|
+
"contents": [{ "value": "```jsx\nfunction createRoot(container: Element | DocumentFragment, options?: RootOptions): Root\n```\nCreates a React root for displaying content inside a browser DOM node. The React 18+ entry point. Call `root.render(<App />)` to display your application." }]
|
|
87
|
+
},
|
|
88
|
+
"hydrateRoot": {
|
|
89
|
+
"contents": [{ "value": "```jsx\nfunction hydrateRoot(container: Element | Document, initialChildren: ReactNode, options?: HydrateRootOptions): Root\n```\nHydrates a server-rendered container. React attaches event listeners and takes over management of the HTML generated by `react-dom/server`, making it interactive." }]
|
|
90
|
+
},
|
|
91
|
+
"flushSync": {
|
|
92
|
+
"contents": [{ "value": "```jsx\nfunction flushSync<R>(fn: () => R): R\n```\nForces React to flush any state updates inside the provided callback synchronously. The DOM is updated immediately. Use sparingly — `flushSync` can significantly hurt performance." }]
|
|
93
|
+
},
|
|
94
|
+
"Fragment": {
|
|
95
|
+
"contents": [{ "value": "```jsx\n<Fragment>children</Fragment>\n// or shorthand:\n<>children</>\n```\nLets you group elements without a wrapper DOM node. The short syntax `<>...</>` is equivalent to `<Fragment>...</Fragment>` but doesn't support the `key` prop." }]
|
|
96
|
+
},
|
|
97
|
+
"StrictMode": {
|
|
98
|
+
"contents": [{ "value": "```jsx\n<StrictMode>children</StrictMode>\n```\nActivates additional development-only checks for the component tree. Components re-render twice, effects run twice, and deprecated APIs trigger warnings. Helps find common bugs early." }]
|
|
99
|
+
},
|
|
100
|
+
"Suspense": {
|
|
101
|
+
"contents": [{ "value": "```jsx\n<Suspense fallback={<Loading />}>children</Suspense>\n```\nDisplays the `fallback` while its children are loading (lazy components, data fetching with Suspense-enabled frameworks). When loading completes, the `fallback` is replaced with the actual content." }]
|
|
102
|
+
},
|
|
103
|
+
"Profiler": {
|
|
104
|
+
"contents": [{ "value": "```jsx\n<Profiler id=\"name\" onRender={callback}>children</Profiler>\n```\nMeasures rendering performance of a React tree. The `onRender` callback receives `(id, phase, actualDuration, baseDuration, startTime, commitTime)` for each commit." }]
|
|
105
|
+
},
|
|
106
|
+
"Component": {
|
|
107
|
+
"contents": [{ "value": "```jsx\nclass MyComponent extends React.Component<Props, State> {\n render() { return <div />; }\n}\n```\nBase class for React class components. Provides lifecycle methods, `this.state`, `this.props`, and `this.setState()`. Function components with hooks are now the recommended approach." }]
|
|
108
|
+
},
|
|
109
|
+
"PureComponent": {
|
|
110
|
+
"contents": [{ "value": "```jsx\nclass MyComponent extends React.PureComponent<Props, State> {\n render() { return <div />; }\n}\n```\nSimilar to `Component` but implements `shouldComponentUpdate()` with a shallow prop and state comparison. Skips re-renders when props and state are shallowly equal." }]
|
|
111
|
+
},
|
|
112
|
+
"Children": {
|
|
113
|
+
"contents": [{ "value": "```jsx\nReact.Children.map(children, fn)\nReact.Children.forEach(children, fn)\nReact.Children.count(children)\nReact.Children.only(children)\nReact.Children.toArray(children)\n```\nUtilities for working with the opaque `children` data structure. Provides safe iteration and transformation methods that handle all children types (single elements, arrays, fragments)." }]
|
|
114
|
+
},
|
|
115
|
+
"Children.map": {
|
|
116
|
+
"contents": [{ "value": "```jsx\nReact.Children.map(children: ReactNode, fn: (child: ReactNode, index: number) => ReactNode): ReactNode[]\n```\nInvokes a function on every immediate child contained within `children`. Returns a flat array with keys assigned. Returns `null` or `undefined` if children is `null` or `undefined`." }]
|
|
117
|
+
},
|
|
118
|
+
"Children.forEach": {
|
|
119
|
+
"contents": [{ "value": "```jsx\nReact.Children.forEach(children: ReactNode, fn: (child: ReactNode, index: number) => void): void\n```\nLike `React.Children.map()` but does not return an array. Iterates over children for side effects only." }]
|
|
120
|
+
},
|
|
121
|
+
"Children.count": {
|
|
122
|
+
"contents": [{ "value": "```jsx\nReact.Children.count(children: ReactNode): number\n```\nReturns the total number of components in `children`, equal to the number of times a callback passed to `map` or `forEach` would be invoked." }]
|
|
123
|
+
},
|
|
124
|
+
"Children.only": {
|
|
125
|
+
"contents": [{ "value": "```jsx\nReact.Children.only(children: ReactNode): ReactElement\n```\nVerifies that `children` has only one child (a React element) and returns it. Throws an error if children has multiple children or is not a React element." }]
|
|
126
|
+
},
|
|
127
|
+
"Children.toArray": {
|
|
128
|
+
"contents": [{ "value": "```jsx\nReact.Children.toArray(children: ReactNode): ReactNode[]\n```\nReturns the `children` opaque data structure as a flat array with keys assigned to each child. Useful for manipulating children before passing them down." }]
|
|
129
|
+
},
|
|
130
|
+
"isValidElement": {
|
|
131
|
+
"contents": [{ "value": "```jsx\nfunction isValidElement(object: any): object is ReactElement\n```\nVerifies the object is a React element (created by `createElement`, JSX, or `cloneElement`). Returns `true` for React elements, `false` for everything else." }]
|
|
132
|
+
},
|
|
133
|
+
"cache": {
|
|
134
|
+
"contents": [{ "value": "```jsx\nfunction cache<T extends Function>(fn: T): T\n```\nWraps a function to cache its result. When the cached function is called with the same arguments, it returns the previous result without re-executing. Primarily used with React Server Components." }]
|
|
135
|
+
},
|
|
136
|
+
"experimental_taintObjectReference": {
|
|
137
|
+
"contents": [{ "value": "```jsx\nfunction experimental_taintObjectReference(message: string, object: object): void\n```\nPrevents a specific object instance from being passed to a Client Component. If someone tries, React throws an error with the provided `message`. A security feature for Server Components." }]
|
|
138
|
+
},
|
|
139
|
+
"renderToString": {
|
|
140
|
+
"contents": [{ "value": "```jsx\nfunction renderToString(element: ReactElement): string\n```\nRenders a React tree to an HTML string. Does not support Suspense streaming. On the client, call `hydrateRoot` to make the HTML interactive. Prefer `renderToPipeableStream` for streaming SSR." }]
|
|
141
|
+
},
|
|
142
|
+
"renderToStaticMarkup": {
|
|
143
|
+
"contents": [{ "value": "```jsx\nfunction renderToStaticMarkup(element: ReactElement): string\n```\nRenders a non-interactive React tree to an HTML string. The output has no React-specific attributes and cannot be hydrated. Use for generating static HTML like emails." }]
|
|
144
|
+
},
|
|
145
|
+
"renderToPipeableStream": {
|
|
146
|
+
"contents": [{ "value": "```jsx\nfunction renderToPipeableStream(element: ReactNode, options?: RenderToPipeableStreamOptions): PipeableStream\n```\nRenders a React tree to a pipeable Node.js Stream with full Suspense support. Returns `{ pipe, abort }`. This is the recommended SSR API for Node.js." }]
|
|
147
|
+
},
|
|
148
|
+
"renderToReadableStream": {
|
|
149
|
+
"contents": [{ "value": "```jsx\nfunction renderToReadableStream(element: ReactNode, options?: RenderToReadableStreamOptions): Promise<ReadableStream>\n```\nRenders a React tree to a Web Readable Stream. Returns a Promise that resolves to a ReadableStream. For edge runtimes and Deno." }]
|
|
150
|
+
},
|
|
151
|
+
"preload": {
|
|
152
|
+
"contents": [{ "value": "```jsx\nfunction preload(href: string, options: { as: string }): void\n```\nEagerly fetches a resource (stylesheet, font, script). Call from a component to start loading a resource before it's actually needed." }]
|
|
153
|
+
},
|
|
154
|
+
"prefetchDNS": {
|
|
155
|
+
"contents": [{ "value": "```jsx\nfunction prefetchDNS(href: string): void\n```\nEagerly looks up the IP of a server that you expect to load resources from. Reduces latency for future requests." }]
|
|
156
|
+
},
|
|
157
|
+
"preconnect": {
|
|
158
|
+
"contents": [{ "value": "```jsx\nfunction preconnect(href: string, options?: { crossOrigin?: string }): void\n```\nEagerly connects to a server (DNS + TCP + TLS). Reduces latency for future resource loads from that server." }]
|
|
159
|
+
},
|
|
160
|
+
"preinit": {
|
|
161
|
+
"contents": [{ "value": "```jsx\nfunction preinit(href: string, options: { as: 'style' | 'script' }): void\n```\nEagerly fetches and evaluates a stylesheet or external script. The resource is loaded and executed immediately." }]
|
|
162
|
+
},
|
|
163
|
+
"act": {
|
|
164
|
+
"contents": [{ "value": "```jsx\nawait act(async () => { /* trigger updates */ });\n```\nWraps code that causes React state updates. Ensures all updates, effects, and state changes are processed before assertions. Essential for reliable React testing." }]
|
|
165
|
+
},
|
|
166
|
+
"unmountComponentAtNode": {
|
|
167
|
+
"contents": [{ "value": "```jsx\nfunction unmountComponentAtNode(container: Element): boolean\n```\n**Legacy API**. Removes a mounted React component from the DOM. Use `root.unmount()` with `createRoot` instead. Returns `true` if a component was unmounted." }]
|
|
168
|
+
},
|
|
169
|
+
"findDOMNode": {
|
|
170
|
+
"contents": [{ "value": "```jsx\nfunction findDOMNode(instance: Component): Element | null\n```\n**Legacy API**. Finds the browser DOM node for a class component instance. Use refs instead. Not supported in StrictMode." }]
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|