CODEWITHSUNDEEP
amazon-s3next.jsamazon-cloudfront
alanionita
alanionita

Reputation: 1443

Dynamic routing static export makes it hard to route in S3 + Cloudfront [NextJS]

I'm using a dynamic routing template to manage nested paths.

I'm serving everything static with S3 Cloudfront and had to remove .html from the exported Next files to support the deployment environment chosen.

I'm finding it very difficult to resolve solutions/a.html because when I try to rename it it clashes with the folder name a.

In a way a.html should probably be index.html within the a/ folder, but that will cause issues with Cloudfront which only support index.html files for root files.

Is there a way to fix this or maybe update my out config - I was thinking I could use the exportPathMap to define the paths as needed.

/pages
   /solutions
      [...id].tsx

Out folder export (redacted):

└── solutions
   ├── a
   |  ├── b
   |  ├── b.html
   |  ├── c
   |  ├── c.html
   ├── a.html

Upvotes: 0

Views: 2116

Answers (2)

tymik
tymik

Reputation: 791

You could consider Lambda@Edge at your cache behaviour on origin-request that is pointing to the actual file:

  const request = event.Records[0].cf.request;
  const uri = request.uri;

  if (uri.endsWith('/')) {
    request.uri += 'index.html';
  } else if (!uri.includes('.')) {
    request.uri += '/index.html';
  }

  callback(null, request);
};

This should do the trick without the need to flatten the structure

Upvotes: 1

alanionita
alanionita

Reputation: 1443

Ended up having to flatten the structure of solutions. This solved my issues with a.html not being able to be renamed to a because of the a/ folder.

Now that this was achieved all that was left was to change the ContentType to text/html. I achieved this using the serverless-s3-sync package which has a params prop.

└── solutions
   ├── a
   ├── a.html
   ├── b
   ├── b.html
   ├── c
   ├── c.html

Upvotes: 0

Related Questions