fix: basePath not being applied to static assets in S3 and Cloudfront behaviors (#102)

* Fix for basePath not being applied to static assets in S3 and Cloudfront behaviors

* fix: api docs

---------

Co-authored-by: gbone24 <4950487+gbone24@users.noreply.github.com>
Co-authored-by: Ben Stickley <stickb@amazon.com>

Author: 3 people

API.md

@@ -27,6 +27,11 @@ export interface NextjsAssetDeploymentOverrides {
 
 export interface NextjsAssetsDeploymentProps {
   readonly accessPoint: AccessPoint;
+  /**
+   * Prefix to the URI path the app will be served at.
+   * @example "/my-base-path"
+   */
+  readonly basePath?: string;
   /**
    * @see {@link NextjsBuild.buildImageDigest}
    */
@@ -177,13 +182,18 @@ export class NextjsAssetsDeployment extends Construct {
     const root = "/app";
     const actions: CustomResourceProperties["actions"] = [];
     if (this.props.staticAssetsBucket?.bucketName) {
+      // Prepare the destination key prefix with basePath when available
+      const staticKeyPrefix = this.props.basePath
+        ? `${this.props.basePath.replace(/^\//, "")}/_next/static`
+        : "_next/static";
+
       actions.push(
         // static files
         {
           type: "fs-to-s3",
           sourcePath: join(root, ".next", "static"),
           destinationBucketName: this.props.staticAssetsBucket.bucketName,
-          destinationKeyPrefix: "_next/static",
+          destinationKeyPrefix: staticKeyPrefix,
         },
         // public directory to s3 for CloudFront -> S3
         {

src/generated-structs/OptionalNextjsAssetsDeploymentProps.ts

@@ -349,7 +349,7 @@ export class NextjsDistribution extends Construct {
   }
   private addStaticBehaviors() {
     this.distribution.addBehavior(
-      "_next/static*",
+      this.getPathPattern("_next/static*"),
       this.staticOrigin,
       this.staticBehaviorOptions,
     );

src/nextjs-assets-deployment.ts

@@ -140,6 +140,7 @@ export class NextjsGlobalContainers extends Construct {
   private createNextjsAssetsDeployment() {
     return new NextjsAssetsDeployment(this, "NextjsAssetsDeployment", {
       accessPoint: this.nextjsFileSystem.accessPoint,
+      basePath: this.props.basePath,
       buildImageDigest: this.nextjsBuild.buildImageDigest,
       containerMountPathForEfs: this.nextjsBuild.containerMountPathForEfs,
       dockerImageCode: this.nextjsBuild.imageForNextjsAssetsDeployment,

src/nextjs-distribution.ts

@@ -143,6 +143,7 @@ export class NextjsGlobalFunctions extends Construct {
   private createNextjsAssetsDeployment() {
     return new NextjsAssetsDeployment(this, "NextjsAssetsDeployment", {
       accessPoint: this.nextjsFileSystem.accessPoint,
+      basePath: this.props.basePath,
       buildImageDigest: this.nextjsBuild.buildImageDigest,
       dockerImageCode: this.nextjsBuild.imageForNextjsAssetsDeployment,
       containerMountPathForEfs: this.nextjsBuild.containerMountPathForEfs,