NextJS 13 App Dir Image Serving

[SamKomesarook]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Next.js

Amplify APIs

Not applicable

Amplify Categories

hosting

Environment information

# Put output below this line
System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1
    Memory: 80.66 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 19.1.0 - ~/.nvm/versions/node/v19.1.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v19.1.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 112.0.1
    Safari: 16.4
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @apollo/client: ^3.7.12 => 3.7.12 
    @apollo/client/cache:  undefined ()
    @apollo/client/core:  undefined ()
    @apollo/client/errors:  undefined ()
    @apollo/client/link/batch:  undefined ()
    @apollo/client/link/batch-http:  undefined ()
    @apollo/client/link/context:  undefined ()
    @apollo/client/link/core:  undefined ()
    @apollo/client/link/error:  undefined ()
    @apollo/client/link/http:  undefined ()
    @apollo/client/link/persisted-queries:  undefined ()
    @apollo/client/link/retry:  undefined ()
    @apollo/client/link/schema:  undefined ()
    @apollo/client/link/subscriptions:  undefined ()
    @apollo/client/link/utils:  undefined ()
    @apollo/client/link/ws:  undefined ()
    @apollo/client/react:  undefined ()
    @apollo/client/react/components:  undefined ()
    @apollo/client/react/context:  undefined ()
    @apollo/client/react/hoc:  undefined ()
    @apollo/client/react/hooks:  undefined ()
    @apollo/client/react/parser:  undefined ()
    @apollo/client/react/ssr:  undefined ()
    @apollo/client/testing:  undefined ()
    @apollo/client/testing/core:  undefined ()
    @apollo/client/utilities:  undefined ()
    @apollo/client/utilities/globals:  undefined ()
    @babel/core: ^7.21.4 => undefined (7.21.4, )
    @babel/runtime:  7.15.4 
    @edge-runtime/cookies:  3.0.4 
    @edge-runtime/primitives:  2.0.5 
    @hapi/accept:  undefined ()
    @mdx-js/react: ^2.3.0 => 2.3.0 
    @napi-rs/triples:  undefined ()
    @next/bundle-analyzer: ^13.3.0 => 13.3.0 
    @next/font:  undefined ()
    @next/react-dev-overlay:  undefined ()
    @opentelemetry/api:  undefined ()
    @segment/ajv-human-errors:  undefined ()
    @sentry/nextjs: ^7.48.0 => 7.48.0 
    @testing-library/jest-dom: ^5.16.5 => 5.16.5 
    @testing-library/react: ^14.0.0 => 14.0.0 
    @types/node: ^18.15.12 => 18.15.12 
    @types/react: ^18.0.37 => 18.0.37 
    @types/react-dom: ^18.0.11 => 18.0.11 
    @types/react-image-gallery: ^1.2.0 => 1.2.0 
    @vercel/nft:  undefined ()
    @vercel/og:  undefined ()
    acorn:  undefined ()
    amphtml-validator:  undefined ()
    anser:  undefined ()
    arg:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    babel-loader: ^9.1.2 => 9.1.2 
    babel-packages:  undefined ()
    browserify-zlib:  undefined ()
    browserslist:  undefined ()
    buffer:  undefined ()
    bytes:  undefined ()
    chalk:  undefined ()
    ci-info:  undefined ()
    cli-select:  undefined ()
    client-only:  0.0.1 
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    constants-browserify:  undefined ()
    content-disposition:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cross-spawn:  undefined ()
    crypto-browserify:  undefined ()
    css.escape:  undefined ()
    data-uri-to-buffer:  undefined ()
    debug:  undefined ()
    devalue:  undefined ()
    domain-browser:  undefined ()
    edge-runtime:  undefined ()
    eslint: ^8.38.0 => 8.38.0 
    eslint-config-next: ^13.3.0 => 13.3.0 
    eslint-config-prettier: ^8.8.0 => 8.8.0 
    events:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    fresh:  undefined ()
    get-orientation:  undefined ()
    glob:  undefined ()
    graphql: ^16.6.0 => 16.6.0 
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    http-proxy-agent:  undefined ()
    https-browserify:  undefined ()
    https-proxy-agent:  undefined ()
    husky: ^8.0.3 => 8.0.3 
    icss-utils:  undefined ()
    ignore-loader:  undefined ()
    image-size:  undefined ()
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    jest: ^29.5.0 => 29.5.0 
    jest-environment-jsdom: ^29.5.0 => 29.5.0 
    jest-worker:  undefined ()
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    loader-runner:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    micromatch:  undefined ()
    mini-css-extract-plugin:  undefined ()
    nanoid:  undefined ()
    native-url:  undefined ()
    neo-async:  undefined ()
    next: ^13.3.0 => 13.3.0 
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    path-browserify:  undefined ()
    platform:  undefined ()
    postcss-flexbugs-fixes:  undefined ()
    postcss-modules-extract-imports:  undefined ()
    postcss-modules-local-by-default:  undefined ()
    postcss-modules-scope:  undefined ()
    postcss-modules-values:  undefined ()
    postcss-preset-env:  undefined ()
    postcss-safe-parser:  undefined ()
    postcss-scss:  undefined ()
    postcss-value-parser:  undefined ()
    posthog-js: ^1.40.2 => 1.40.2 
    posthog-js-react:  1.0.0-alpha.1 
    prettier: ^2.8.7 => 2.8.7 
    process:  undefined ()
    punycode:  undefined ()
    querystring-es3:  undefined ()
    raw-body:  undefined ()
    react: ^18.2.0 => 18.2.0 (18.3.0-next-85de6fde5-20230328)
    react-datocms: ^4.0.10 => 4.0.10 
    react-dom: ^18.2.0 => 18.2.0 (18.3.0-next-85de6fde5-20230328)
    react-image-gallery: ^1.2.11 => 1.2.11 
    react-is:  18.2.0 
    react-refresh:  0.12.0 
    react-server-dom-webpack:  18.3.0-next-85de6fde5-20230328 
    regenerator-runtime:  0.13.4 
    sass-loader:  undefined ()
    scheduler:  undefined ()
    schema-utils:  undefined ()
    semver:  undefined ()
    send:  undefined ()
    server-only:  0.0.1 
    setimmediate:  undefined ()
    shell-quote:  undefined ()
    source-map:  undefined ()
    stacktrace-parser:  undefined ()
    stream-browserify:  undefined ()
    stream-http:  undefined ()
    string-hash:  undefined ()
    string_decoder:  undefined ()
    strip-ansi:  undefined ()
    tar:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    timers-browserify:  undefined ()
    tty-browserify:  undefined ()
    typescript: ^5.0.4 => 5.0.4 
    ua-parser-js:  undefined ()
    undici:  undefined ()
    unistore:  undefined ()
    util:  undefined ()
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    ws:  undefined ()
    zod:  undefined ()
  npmGlobalPackages:
    corepack: 0.15.1
    create-next-app: 13.3.0
    npm: 8.19.3

Describe the bug

I have deployed a Next13 site with the app directory enabled to Amplify, and I have various assets in the top-level public directory to statically serve. I am using an index file to export the various assets to the site, and using the Nextjs Image component to load them on the site.

Locally, both on dev and production-build, the images are loaded, however when deployed to Amplify, the .pngs return 500s when queried.

Strangely, the .svgs are loaded fine.

Expected behavior

The static images are loaded and available.

Reproduction steps

1. Create new NextJS App with the app dir enabled.
2. Add various png images in the public directory.
3. Expose them with an index.js file.
4. Import the image in a page.
5. Render the image with the NextJS Image component.

Code Snippet

// index.js in the /public dir
import powder from "./index/image.png"
export {
  image
}

// page.tsx in the app folder
import  {
image,
} from "../public/index.js"
// render this inside the page component
<Image height={200} width={200} src={image} alt={"image"} />

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[SamKomesarook]

As per #3428, the issue is fixed with a Next upgrade

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please either tag a team member or open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.