@@ -26,19 +26,29 @@ This is a starter template for building a Next.js application that fetches data
26
26
27
27
## Overview
28
28
29
- ### What's included?
30
-
31
- - ✅ Type-safe data layer with the WordPress RestAPI
32
- - ✅ Setup for all basic WordPress options: Posts, Pages, Authors, Categories, Tags
33
- - ✅ Easy integration with custom post types and ACF
34
- - ✅ Dynamic routes for Posts and Pages
35
- - ✅ Design system for layout and prose styling ([ craft-ds.com] ( https://craft-ds.com ) )
36
- - ✅ Filter, Search, and Card components
37
- - ✅ Dynamically rendered sitemap
38
- - ✅ Dynamically generated metadata
39
- - ✅ Responsive Nav and Footer components
40
- - ✅ Site configuration file
41
- - ✅ Menu configuration file
29
+ ### What's included?
30
+
31
+ ✅ Type-safe data layer with the WordPress RestAPI
32
+
33
+ ✅ Setup for all basic WordPress options: Posts, Pages, Authors, Categories, Tags
34
+
35
+ ✅ Easy integration with custom post types and ACF
36
+
37
+ ✅ Dynamic routes for Posts and Pages
38
+
39
+ ✅ Design system for layout and prose styling ([ craft-ds.com] ( https://craft-ds.com ) )
40
+
41
+ ✅ Filter, Search, and Card components
42
+
43
+ ✅ Dynamically rendered sitemap
44
+
45
+ ✅ Dynamically generated metadata
46
+
47
+ ✅ Responsive Nav and Footer components
48
+
49
+ ✅ Site configuration file
50
+
51
+ ✅ Menu configuration file
42
52
43
53
### Important files
44
54
@@ -142,7 +152,11 @@ All functions use the custom `WordPressAPIError` class for consistent error hand
142
152
143
153
``` typescript
144
154
class WordPressAPIError extends Error {
145
- constructor (message : string , public status : number , public endpoint : string ) {
155
+ constructor (
156
+ message : string ,
157
+ public status : number ,
158
+ public endpoint : string ,
159
+ ) {
146
160
super (message );
147
161
this .name = " WordPressAPIError" ;
148
162
}
@@ -330,6 +344,7 @@ import { SearchInput } from "@/components/posts/search-input";
330
344
```
331
345
332
346
Features:
347
+
333
348
- Real-time search with 300ms debouncing
334
349
- URL-based state management
335
350
- Maintains filters while searching
@@ -341,11 +356,13 @@ Features:
341
356
The search system is implemented across several layers:
342
357
343
358
1 . ** Client-Side Component** (` search-input.tsx ` ):
359
+
344
360
- Uses Next.js App Router's URL handling
345
361
- Debounced input for better performance
346
362
- Maintains search state in URL parameters
347
363
348
364
2 . ** Server-Side Processing** (` page.tsx ` ):
365
+
349
366
- Handles search parameters server-side
350
367
- Combines search with other filters
351
368
- Parallel data fetching for better performance
@@ -365,11 +382,11 @@ The following search-related functions are available in `lib/wordpress.ts`:
365
382
366
383
``` typescript
367
384
// Search posts with combined filters
368
- getAllPosts ({
385
+ getAllPosts ({
369
386
search?: string ,
370
387
author?: string ,
371
388
tag?: string ,
372
- category?: string
389
+ category?: string
373
390
})
374
391
375
392
// Search specific content types
@@ -383,9 +400,7 @@ searchAuthors(query: string)
383
400
``` typescript
384
401
// In your page component
385
402
const { search } = await searchParams ;
386
- const posts = search
387
- ? await getAllPosts ({ search })
388
- : await getAllPosts ();
403
+ const posts = search ? await getAllPosts ({ search }) : await getAllPosts ();
389
404
```
390
405
391
406
The search functionality automatically updates filters and results as you type, providing a smooth user experience while maintaining good performance through debouncing and server-side rendering.
0 commit comments