Basic Information
Project Type: Next.js 16.1.7 + Turbopack
Deployment Platform: Vercel (Hobby Plan)
Package Manager: pnpm
Project Structure: App Router ( app/ directory)
Problem Description
After modifying frontend code (API request URL), Vercel redeployed successfully, but the browser always loads the old JavaScript chunk files. The static resource filenames ( _next/static/chunks/xxx.js ) remain unchanged, and the content is still the old version.
Specific Symptoms
1.
Code Change: Modified API request URL in admin/page.tsx from /api/drafts/list to /api/v1/drafts/list
2.
Git Commit & Push: Triggered Vercel auto-deployment
3.
Deployment Success: Build Logs show successful completion with no errors
4.
Browser Access: Still requests old JS files, Network panel shows Status Code: 200 OK (from memory cache)
5.
Sources Panel: Confirmed JS file content is still old code containing /api/drafts/list
Attempted Solutions (None Worked)
Browser Hard Refresh — Ctrl + Shift + R — Failed, still loads cached files
2.
Clear Browser Cache — Ctrl + Shift + Delete clear all data — Failed
3.
Incognito Mode — Chrome/Edge incognito window — Failed
4.
Switch Browser — Edge, Firefox — Failed
5.
Disable Local Proxy — Close Clash/V2Ray — Failed, Remote Address became Vercel server
6.
Vercel CDN Purge — Caches → Purge Cache (CDN, ISR, Image) — Failed
7.
vercel.json Config — Add Cache-Control: no-cache headers — Failed (doesn’t apply to _next/static )
8.
next.config.mjs Config — generateBuildId / assetPrefix / webpack chunkFilename — Build errors or no effect
9.
Modify api-config.ts — Change API_VERSION to /v1 — Failed, chunk hash didn’t change
10.
Hardcode API URL — Directly write /api/v1/drafts/list in admin/page.tsx — Failed, chunk hash didn’t change
11.
Add Meaningless Comment — Add // rebuild: 2026-05-16 in page component — Failed
12.
Disable Turbopack — turbopack: false + --webpack — Build errors
Only Working Solution:
Delete Vercel project and recreate:
1.
Settings → General → Delete Project
2.
Re-import GitHub repository
3.
Reconfigure environment variables
4.
Redeploy
Result: Problem solved, browser loads new chunk files with latest code.
Key Findings
1.
Vercel Static Filenames vs Browser Inconsistent
Vercel Source panel shows: ade328277e8808f7.js (new build)
Browser Sources panel loads: 28ece507693862f6.js (old build)
Indicates Vercel CDN serves old files, not browser local cache issue
2.
Response Headers Show immutable
Cache-Control: public, max-age=31536000, immutable
Vercel forces long-term cache on _next/static directory, cannot override via configuration
3.
Turbopack Build Cache Issue
After code modification, Build Logs show successful build
But output chunk hash didn’t change, suggesting Turbopack may have reused old build artifacts
Environment Variables
NEXT_PUBLIC_API_URL : ***
NEXT_PUBLIC_ADMIN_TOKEN : ***
NEXT_PUBLIC_SITE_URL : ***
(All marked as Sensitive variables, cannot view specific values)
Expected Behavior
After code modification and redeployment, Vercel should:
1.
Detect code changes
2.
Turbopack/Webpack recalculates chunk hash
3.
Generate new static resource filenames
4.
CDN serves new files, browser loads latest version
Actual Behavior
After code modification, Turbopack may not correctly update chunk hash due to build cache, causing CDN to continue serving old immutable cached files.
Suggestions
1.
Vercel should provide official method to clear _next/static cache
2.
Turbopack build cache should more reliably detect code changes
3.
Documentation should clarify that vercel.json headers don’t apply to _next/static