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:
2025-11-20 02:26:38 +08:00
parent 02f2d0a599
commit e28beac1f1
3 changed files with 44 additions and 1 deletions

3
.gitignore vendored
View File

@@ -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

View 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 });
}
}

View File

@@ -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"