Image optimization not working as well in standalone mode?

siamahnaf commented 2 years ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: win32 Arch: x64 Version: Windows 10 Pro Binaries: Node: 16.17.0 npm: N/A Yarn: N/A pnpm: N/A Relevant packages: next: 12.2.6 eslint-config-next: 12.3.1 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Here the bug is very critical. I create one project and I deploy this project to vercel. Here I get all images are optimized. When I upload new image from my dashboard, it also optimized this image.

But I need to deploy my project to aws ec2 linux server. That's why I choose nextjs output tracing features. That's I build a standlone mode by helping of this documentation- https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files

After building, When I start my server by running node server.js. It starts successfully. Everything is okay. I can see all image optimized with webp format. But after some time by reloading my page, I can see image optimization not working. Then I can see some images come with optimization and some images come without optimization. Some images come with webp format, and some images come with jpeg, png format. After deploying to aws ec2. When I load my page first time, I can see all images are optmized. But after reloading my page or after some time the image optimization not working.

Also, When I upload new image from my dashboard, that new image isn't come with optimizations.

***Note: In terminal I not finding any sharp related error. Actually, I am not Geeting any error in my terminal.

I also try next js latest version-

12.3.1 and 12.3.2-canary.22

/** @type {import('next').NextConfig} */
const withPWA = require("next-pwa")({
  dest: "public",
  register: true,
  disable: process.env.NODE_ENV === "development"
});

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  output: "standalone",
  images: {
    minimumCacheTTL: 2592000,
    domains: ["dzzoo94ozikw5.cloudfront.net", "lh3.googleusercontent.com", "platform-lookaside.fbsbx.com"]
  },
}

module.exports = withPWA(nextConfig)

"@bradgarropy/next-google-analytics": "^1.0.2",
"@emotion/react": "^11.9.3",
"@emotion/server": "^11.4.0",
"@emotion/styled": "^11.9.3",
"@fontsource/open-sans": "^4.5.10",
"@greatsumini/react-facebook-login": "^3.2.1",
"@iconify/react": "^3.2.2",
"@mui/lab": "^5.0.0-alpha.91",
"@mui/material": "^5.9.1",
"@mui/x-data-grid": "^5.17.2",
"@react-oauth/google": "^0.2.8",
"@react-pdf/renderer": "^3.0.0",
"@reduxjs/toolkit": "^1.8.5",
"@types/file-saver": "^2.0.5",
"@types/js-cookie": "^3.0.2",
"@types/react-image-magnify": "^2.7.1",
"@types/uniqid": "^5.3.2",
"axios": "^0.27.2",
"embla-carousel-autoplay": "^7.0.0-rc05",
"embla-carousel-react": "^7.0.0-rc05",
"file-saver": "^2.0.5",
"html-react-parser": "^3.0.4",
"js-cookie": "^3.0.1",
"keen-slider": "^6.7.0",
"next": "12.2.6",
"next-nprogress-emotion": "^2.0.0",
"next-pwa": "^5.6.0",
"next-redux-wrapper": "^7.0.5",
"qrcode.react": "^3.1.0",
"react": "18.2.0",
"react-aws-s3-typescript": "^1.1.4",
"react-country-region-selector": "^3.4.0",
"react-dom": "18.2.0",
"react-facebook-pixel": "^1.0.4",
"react-hook-form": "^7.33.1",
"react-image-magnify": "^2.7.4",
"react-images-uploading": "^3.1.7",
"react-otp-input": "^2.4.0",
"react-password-strength-bar": "^0.4.1",
"react-phone-input-2": "^2.15.1",
"react-player": "^2.10.1",
"react-redux": "^8.0.2",
"react-share": "^4.4.0",
"react-timer-hook": "^3.0.5",
"sharp": "^0.31.1",
"uniqid": "^5.4.0"

I use next/image component in this way in my project.

<Image src={process.env.NEXT_PUBLIC_IMAGE_PATH + brand.image} width={25} height={25} alt={brand.name} />

All images should come with webp format! Even all new images after building my app uploading from dashboard. My Next js project is fully SSR. Now I need all the images will be optimized even Api called images uploading from dashboard. It needs optimized. Please help me. How can I solve this problem.

Expected Behavior

All images should come with webp format! Even all new images after building my app uploading from dashboard. My Next js project is fully SSR. Now I need all the images will be optimized even Api called images uploading from dashboard. It needs optimized. Please help me. How can I solve this problem.

Link to reproduction

https://www.nekmart.com

To Reproduce

Here I am creating re issue- Here is my previous issue. But I am not getting any reply from your part.

https://github.com/vercel/next.js/issues/41287

balazsorban44 commented 2 years ago

Duplicate of #41287. Please see the comment: https://github.com/vercel/next.js/issues/41287#issuecomment-1274642140

Could you please link to a reproduction or create a public repository with minimal code that reproduces the issue? :pray:

siamahnaf commented 2 years ago

@balazsorban44, This is githup code repository- https://github.com/nekmart/nekmart

github-actions[bot] commented 1 year ago

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

vercel / next.js