Fix Pagefind file serving with API route
Fixed issue where Pagefind static files weren't accessible due to Next.js routing conflicts. Solution: - Created API route at app/pagefind/[...path]/route.ts to serve Pagefind files from .next/pagefind/ - Updated build script to copy pagefind index to public/_pagefind (backup) - API route handles all /pagefind/* requests and serves files with proper content types - Added caching headers for optimal performance This resolves the "cannot type in search" issue - the search modal can now load Pagefind UI and index files correctly. Technical Details: - Next.js App Router was treating /pagefind/ as a route, returning 404 - Static files in public/ weren't accessible for subdirectories due to routing priority - API route bypasses routing to serve .next/pagefind/* files directly - Supports .js, .css, .json, .wasm, and Pagefind-specific file types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
3
.gitignore
vendored
3
.gitignore
vendored
@@ -37,5 +37,8 @@ pnpm-debug.log*
|
|||||||
# Generated assets mirror
|
# Generated assets mirror
|
||||||
/public/assets
|
/public/assets
|
||||||
|
|
||||||
|
# Generated search index
|
||||||
|
/public/_pagefind
|
||||||
|
|
||||||
# TypeScript
|
# TypeScript
|
||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
|
|||||||
40
app/pagefind/[...path]/route.ts
Normal file
40
app/pagefind/[...path]/route.ts
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { readFile } from 'fs/promises';
|
||||||
|
import { join } from 'path';
|
||||||
|
|
||||||
|
export async function GET(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ path: string[] }> }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const { path } = await params;
|
||||||
|
const filePath = join(process.cwd(), '.next', 'pagefind', ...path);
|
||||||
|
|
||||||
|
// Read the file
|
||||||
|
const file = await readFile(filePath);
|
||||||
|
|
||||||
|
// Determine content type
|
||||||
|
const ext = path[path.length - 1].split('.').pop();
|
||||||
|
const contentTypes: Record<string, string> = {
|
||||||
|
'js': 'application/javascript',
|
||||||
|
'css': 'text/css',
|
||||||
|
'json': 'application/json',
|
||||||
|
'wasm': 'application/wasm',
|
||||||
|
'pf_meta': 'application/octet-stream',
|
||||||
|
'pf_index': 'application/octet-stream',
|
||||||
|
'pf_fragment': 'application/octet-stream',
|
||||||
|
};
|
||||||
|
|
||||||
|
const contentType = contentTypes[ext || ''] || 'application/octet-stream';
|
||||||
|
|
||||||
|
return new NextResponse(file, {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': contentType,
|
||||||
|
'Cache-Control': 'public, max-age=31536000, immutable',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error serving Pagefind file:', error);
|
||||||
|
return new NextResponse('File not found', { status: 404 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -6,7 +6,7 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "concurrently \"contentlayer2 dev\" \"next dev\"",
|
"dev": "concurrently \"contentlayer2 dev\" \"next dev\"",
|
||||||
"sync-assets": "node scripts/sync-assets.mjs",
|
"sync-assets": "node scripts/sync-assets.mjs",
|
||||||
"build": "npm run sync-assets && contentlayer2 build && next build && npx pagefind --site .next",
|
"build": "npm run sync-assets && contentlayer2 build && next build && npx pagefind --site .next && rm -rf public/_pagefind && cp -r .next/pagefind public/_pagefind",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "next lint",
|
"lint": "next lint",
|
||||||
"contentlayer": "contentlayer build"
|
"contentlayer": "contentlayer build"
|
||||||
|
|||||||
Reference in New Issue
Block a user