Next.js: how to support cdn which need file suffix .js

[jason-ivy]

use url http://localhost:3000/index, it will to get .../page/index, and the program run well.
use url http://localhost:3000/index.js, it will to get .../page/index.js, but the program can not run.
my cdn need to the suffix, how can i do

[sergiodxa]

Maybe you can create a custom server who handle URLs with .js or .html (I think .html is better) and take the file name without .html to tell Next.js which page to use. That way /index.html is handled with page/index.

[jason-ivy]

the cdn is the public server, it is not support to create a custom server.

[sergiodxa]

I'm talking about using a custom Next.js server.

[arunoda]

Actually this is a good question.
@jason-ivy if you can use our static site builder use that. In that, we fixed this issue.
I want to bring that into next.js core as well.

[jason-ivy]

now i use the custom version by myself，which version will add this feature？

[arunoda]

Post 3.0

[jason-ivy]

thx, hope to release soon.

[JeremyJonas]

Is there any further status on this issue? I believe I am experience the same issue.

I poorly assumed (same as #2134) that assetPrefix for CDN support meant that I could upload the content of my .next build to AWS S3 bucket and use CloudFront with S3Origin to server and cache the site files, rather than from the Next server directly. I am hosting my Next app in AWS Lambda with a custom express server and would prefer not serve all the files over lambda... just the initial SSR requested html.

Here is what I am experiencing...

// next.config.js
...
   assetPrefix: 'https://xxxxxx.cloudfront.net'
...

Run next build && next start
Load http://localhost:3000/foo in chrome
Response:

...
<script ... src="https://xxxxxxx.cloudfront.net/.next/383195c3-e9f4-40aa-92d5-09adee5e384e/page/foo"></script>
...

Request for https://xxxxxxx.cloudfront.net/.next/383195c3-e9f4-40aa-92d5-09adee5e384e/page/foo fails because that path doesn't exist in S3, since it is a dynamically resolved path by the next server.

I tried to use exportPathMap + next export, then upload the contents of out to S3. This seems to correctly output the files that I need at the correct paths. But, since the actual requested file does not include /index.js, it is not found. Bummer, so close.

Are there plans to support this scenario? Any suggestions how to resolve?

I will do the work/pull-request if you can point me in the right direction.

To clarify my goal:

• NextJS in Lambda/Express servers initial SSR html
  
  
  
  • with all scripts/links/etc in SSR html pointing to cloudfront CDN (S3 origin)
  
  

Cheers!

Next version: 3.2.2

[sergiodxa]

// next.config.js
...
   assetPrefix: 'https://xxxxxx.cloudfront.net'
...

You can put the base pathname for your files there, e.g. https://xxxxxx.cloudfront.net/here/are/my/next/files and Next.js sould try to load from https://xxxxxx.cloudfront.net/here/are/my/next/files/_next/383195c3-e9f4-40aa-92d5-09adee5e384e/page/foo

[JeremyJonas]

Hey @sergiodxa , thanks for quick suggestion. However that is not the issue.
I have my CloudFront Origin Path pointing to the root directory where the next artifacts are uploaded, so that is not the issue.

The issue is that the paths in the SSR html file for scripts do not include the filename and therefore aren't found in the S3 bucket. S3 doesn't know how to auto append index.js to the requested path.

Actual:
<script ... src="https://xxxxxxx.cloudfront.net/.next/383195c3-e9f4-40aa-92d5-09adee5e384e/page/foo"></script>

Expected:
<script ... src="https://xxxxxxx.cloudfront.net/.next/383195c3-e9f4-40aa-92d5-09adee5e384e/page/foo/index.js"></script>

[alexindigo]

This one fixes the issue: https://github.com/zeit/next.js/pull/3332

[arunoda]

Now Next.js always load pages with .js. So, we can simply move assets into a S3 directory or similar.
See: https://github.com/zeit/next.js/pull/3393

[alexindigo]

@arunoda We can copy assets to S3 after next export run, or .next/build/* is sufficient?