cdklabs / cdklabs/cdk-nextjs

`NextjsGlobalFunctions`: image optimization returns 400 for imported images

Closed
#260 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
108
Forks
12
Avg merge
1h 30m
Merged PRs (30d)
7

Description

Hi, thanks for this great construct — it made deploying Next.js 16 on AWS with CDK really smooth. I ran into one issue with image optimization and wanted to report it.

## Summary

With `NextjsGlobalFunctions`, `next/image` optimization returns **400 (`The requested resource isn't a valid image ... received null`)** for imported images, which resolve to `/_next/static/media/*`:

```tsx
import Image from "next/image";
import foo from "./foo.png"; // -> /_next/static/media/foo..png

; // /_next/image request returns 400
```

Images referenced from `public/` by string path optimize fine:

```tsx
// works
```

## Environment

- `cdk-nextjs`: 0.5.12
- Next.js: 16.2 (App Router)
- Construct: `NextjsGlobalFunctions`

## Likely cause

The generated `functions.Dockerfile` copies `public/` into the container ("Next.js needs source images") but does not seem to copy `.next/static`:

```dockerfile
COPY --chown=nextjs:nodejs .next/standalone ./
COPY --chown=nextjs:nodejs public ./$RELATIVE_PATH_TO_PACKAGE/public
# no COPY of .next/static
```

`.next/static` (including `_next/static/media/*`) appears to be deployed only to the static-assets S3 bucket, not into the compute container. This might be why the optimizer can't read imported images as source (`received null`), while `public/` images work because `public/` is present in the container. I may be missing something here — happy to be corrected.

## Expected

Imported images (`_next/static/media/*`) should be optimizable, the same as `public/` images.

## Workaround

Placing images in `public/` and referencing them by string path works, since `public/` is copied into the container.

Happy to provide more details or logs if helpful. Thanks!

Contributor guide

Open the contributing guide

Research direction

Start by inspecting the generated functions.Dockerfile and how .next/static is deployed relative to the static-assets S3 bucket and the compute container. Reproduce the next/image request with an imported image under _next/static/media, then verify that it optimizes successfully without the 400 response while public/ images continue to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
aws, docker, nextjs
Domain
cloud, devops, infrastructure
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
70/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.