Next.js 15.2.3 Static Export on S3 + CloudFront Shows .txt Files After Update

[2820402]

Summary

I’m using Next.js 15.2.3 with static export (next build && next export) and deploying it to AWS S3, serving it through CloudFront. Everything works fine on the first deployment.

However, when I update my code, rebuild, sync the new files to S3, and invalidate the CloudFront cache, users sometimes see .txt files when navigating between routes instead of the expected content.

To Reproduce

# Upload files to S3 bucket
aws s3 sync "$OUT_DIR" "s3://$BUCKET/" --cache-control "max-age=31536000, public"

# Process HTML files: create extensionless copies
find "$OUT_DIR" -type f -name "*.html" -exec bash -c '
  file_path="$1"
  relative_path="${file_path#out/}"
  file_name="${relative_path%.html}"

  aws s3 cp "s3://$BUCKET/$relative_path" "s3://$BUCKET/$file_name" \
    --metadata-directive REPLACE \
    --cache-control "max-age=31536000, public" \
    --content-type "text/html"
' _ {} \;

# Invalidate CloudFront cache
aws cloudfront create-invalidation --distribution-id "$DISTRIBUTION_ID" --paths "/*"

Additional information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:24:06 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T8103
  Available memory (MB): 8192
  Available CPU cores: 8
Binaries:
  Node: 23.6.1
  npm: 10.9.2
  Yarn: 1.22.19
  pnpm: 10.6.2
Relevant Packages:
  next: 15.2.3 // Latest available version is detected (15.2.3).
  eslint-config-next: 15.2.3
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.2
Next.js Config:
  output: export

Example

No response

[2820402]

anyone?

[kennethnwc]

yes, i experienced the same, my version is 15.2.1 tho.

[kennethnwc]

this maybe an on-going issue
https://stackoverflow.com/questions/76502307/next-js-13-4-5-deployment-redirects-appending-txt-to-page-names-in-url

[mskwon1]

I think this might be due to the browser's caching behavior

1. deploys first time
2. user opens website -> browser caches some static resources
3. deploys second time
4. user opens website again
5. html/js file already cached
6. old js executes and throws error while trying to render using new rsc file or whatever(which is txt)
7. browser fallbacks to show txt file itself instead

based on this idea, I have set all caching related headers to not cache anything on browser using cloudfront function. And I think it is working fine. This might be a temporary workaround

[mskwon1]

@kennethnwc sure. below is the viewer response cloudfront function i am using.

function handler(event) {
    console.log(event);
    
    var response = event.response;
    var headers = response.headers;

    headers['cache-control'] = { value: 'no-store, no-cache, must-revalidate, max-age=0' };
    headers['pragma'] = { value: 'no-cache' };
    headers['expires'] = { value: '0' };

    return response;
}

it might look inefficient in that you lose the advantage of browser caching, I think cache of s3 -> cloudfront is enough and much better than showing .txt files every time you deploy new things.

[mskwon1]

@2820402 I hope I know the way, or anyone else finds out a better solution. But for now, I think disabling browser cache isn't that costly, so I will go with it.

[2820402]

Hey, did you check https://kiro.dev/? It's also hosted on AWS CloudFront with S3 and is statically built. How do they manage to cache those things?

[kennethnwc]

@2820402 i think the website you share does not do client side navigation, and the .txt was not found if you looked at the request. I guess they just never upload the .txt to S3

[kennethnwc]

@kennethnwc sure. below is the viewer response cloudfront function i am using.

function handler(event) {
    console.log(event);
    
    var response = event.response;
    var headers = response.headers;

    headers['cache-control'] = { value: 'no-store, no-cache, must-revalidate, max-age=0' };
    headers['pragma'] = { value: 'no-cache' };
    headers['expires'] = { value: '0' };

    return response;
}

it might look inefficient in that you lose the advantage of browser caching, I think cache of s3 -> cloudfront is enough and much better than showing .txt files every time you deploy new things.

thank you for the function. I think i did the same but i just set the headers when i upload the file. So far working fine. If this issue happen again, i will try your function.